Flutter for the JS Developer

[Music] hi I'm a JavaScript developer and my passion is building things for the web so when it comes to building native mobile apps javascript has always felt like the best tool for the job either via ionic cordova or react native but flutter has blown my mind recently both in terms of the developer experience and the quality of the apps that it can produce if you're a JavaScript developer who's heard rumors about flutter and looking to get acquainted this is the video for you if you're new here like and subscribe and you can grab the full write-up and source code from fire ship I know first we'll talk about the trade-offs then we'll look at the flutter project structure compared to react native and ionic then we'll compare the dart programming language to JavaScript then we'll finish up by cloning a couple of react native components as flutter widgets flutter may or may not be the right tool for the job everything in life is a trade-off and there are a couple of big trade-offs with flutter right off the bat the first one is the learning curve so if you're already a web developer or JavaScript developer you can basically just jump right into an ionic or react native project without any learning curve another potential drawback is the size of the community coding boot camps are churning out new JavaScript developers every day so it's a lot easier to source talent for your project and the truth is companies using hybrid frameworks are generally doing so to save time and money now while I said there's a learning curve that learning curve is pretty gentle this comment says it all javascript is my wife dart is my mistress but dart isn't ahead of time compiled language so it brings something else to the table performance its engine is written in C++ and when you have to make a lot of callbacks to the native system it's just going to perform better than a JavaScript bridge it can also integrate existing native code it can do hot reloads during development and it has some of the best documentation that I've seen for any framework period I'm in the process of building my own flutter app for fire ship IO and while it's not a silver bullet that's just going to make app development easy you might be pleasantly surprised and refreshed if you're a full-time j/s developer let's go ahead and fade out the music and start looking at some code I want to start with just a baseline comparison of the project structure to react native and ionic the baseline app that we have here is just three tabs at the bottom that can toggle between three different screens you're looking at the one I built with flutter but react native and ionic have their own templates that you can just generate with their CL is in a react native project building components and those components combine these styles the templating and the JavaScript logic in a single file for each component generally speaking you use NPM to manage your dependencies of course and then we have about ten different JavaScript files to get this three tap layout working and it looks almost just like a regular react app with some special components for rendering the UI on native and some platform checking here and there at the end of the video we'll actually build a couple of react native components in flutter now I'm opening up in ionic for project and you'll see that we have quite a few more files but that's mainly because angular separates the templates and the CSS into their own isolated files I think this is a good way to separate concerns but it can also be pretty overwhelming if you're jumping into this project for the first time especially if you don't know angular and there's a pretty long list of dependencies that you'll have to learn but because ionic for now uses web components you'll be able to use it with any framework that you want now when we jump into our flutter project you'll see right off the bat that it's far less complex than the JavaScript counterparts we just have a single file called main dart which is the entry point to our app and I was able to build this three tab layout with only 45 lines of code there was no import/export headaches and no boilerplate if we want to run the app we can do that directly from the command line and there's no need to download a special app from the App Store or to debug in the browser and anytime you make a change to your code you just enter R on the command line and it will hop reload the code and save the state of the actual app itself react native can do this also and it has a huge impact on your development productivity and when it comes to dependencies you have this pub spec Yamma which is the equivalent to a package.json you only have one dependency right out of the gate which is the flutter SDK and then if you add anything else to this file it will automatically update your dependencies when you save so if you like simplicity you might like flutter but if you want to learn flutter that means you have to learn a whole another programming language dart but luckily it shares a lot of the same conventions as JavaScript so my goal in the next couple minutes is to make you productive with dart from the first keystroke let's look at the syntax side-by-side with typescript which will mostly just be vanilla JavaScript the main entry point for a dart app which is on the left is the main function this is where your app will start executing in JavaScript we don't really have this concept but what Apps comment like do is export a function and then have that function be called by the library consumer when you declare a basic reassign humble variable in dart you start with the type annotation so if we have a string variable we'll type string then we can assign that variable to a string value and then reassign it later if we want and if we want to log that value we can just call print which is the equivalent to console login Jas now we can write the same code over here in JavaScript which would use let instead of the type annotation and if we want to add a type we can append that to the person variable we can also add single assignment variables in JavaScript which we can do with the Const keyword so it's a cost per s'en equals Jeff in dart we would instead use the final keyword this is kind of confusing because there's also a Const keyword and dart but it works slightly different it's more like calling object freeze and JavaScript because it will make the entire data structure and mutable so in dart you would use Const to make an array or a map completely immutable meaning its properties or elements can't be changed so dart has a sound type system but it's also flexible for example we can use the VAR keyword to tell dart to implicitly figure out the type so if you hate type annotations everywhere or if you have a dynamic type this can be a useful tool and speaking of dynamic dart also has a dynamic type which is similar to the any type and type script this is most useful when you have data coming from external source and you don't really know what the shape of that data is going to look like so when you see the dynamic keyword that basically just means we don't know now let's switch gears and talk about something that's especially important in JavaScript and that's importing things between files there's a lot of ways to do this in JavaScript but we'll just go to the es6 way will export a default value which points to our Lang variable and we could export multiple values from this file if we put it inside of braces now if we go back to the file that wants to import this value we can simply import it from that file this works fine when you just need one thing but you know as a JavaScript developer that this gets harder as you need more and more things so we rely on snippets and barrels and stuff like that just to manage the mental boilerplate of imports and exports in dart we don't have to worry about exporting anything if we declare a variable in this Global's dart file and then import it in the other file it's going to be available by default and because dart is strong typed and the tooling so good we can just start typing out the name of something in this file and it will intellisense autocomplete for us now let's take a look at functions functions feel just like they do in JavaScript - the function keyword if we want to use type annotations they come before the actual name unlike typescript which comes after the name you can also use anonymous phone arrow functions and higher-order functions in this example here we have a higher-order function call me which takes a function as its argument and then when we call it we use an anonymous function with the arrow syntax just like we would in JavaScript so functions will feel just like they do in JavaScript just with a smaller code footprint now I realize I'm going pretty fast with these code snippets so make sure to check out the full article if you want to copy and paste these to try them out on your own the next thing we'll look at is object-oriented programming dart supports mixin based inheritance which means that any given class will only have one superclass but the class body can be used in multiple classes so you can do things like behavior based composition in JavaScript classes are more or less just syntactic sugar for prototype one heritance so they get kind of a bad reputation in the JavaScript community but in any case the syntax is very similar so we define a class by using the class keyword and then we can instantiate that class by calling it with parentheses in JavaScript we do the exact same thing except we use the new keyword when instantiating the class the new keywords optional in dart and you'll be instantiating a lot of objects and flutters so this helps keep your code very clean when we instantiate an instance of a class we're creating an object we need to tell our code how to create that initial object which we do with a constructor in vanilla JavaScript to look like this we pass arguments to the constructor and then initialize them as values on the this context in typescript we can do this in a little more sugary way where we annotate our input variables as private or public and then they'll automatically be available on this class in dart we have an even cleaner way to construct an object by just calling the class as a function in addition dart has the concept of public and private members everything is public by default but if you want to make something private to the library or class just add an underscore to the beginning of its name and dart has another cool thing up its sleeve called named constructors the one we just wrote is the default but we can also add a name constructor to provide different initialization logic as needed we just implement a method name on the class name itself and now we have a different constructor with whatever logic we want there's a lot more we could cover here but the actual definitions of methods and properties on this class is exactly the same as it is in JavaScript so we'll just go ahead and leave it there the next thing I want to cover is the dart list which is equivalent to a JavaScript array we can create a list of integers by starting with the type annotation and then define it just like we would in JavaScript and just like JavaScript the list has a whole bunch of built-in methods that we can use to manipulate it and loop over it you'll find all your old favorites like for each map and reduce and you'll find a lot of other ones that are implemented in third-party libraries like lodash but my absolute favorite one is just having the last property I don't even want to admit how many times I've googled how to get the last element from an array in JavaScript only to settle on this crappy code or use something like a ray pop which also is an ideal the next thing we'll look at is the dart map which is the equivalent to a JavaScript object or a JavaScript map it kind of takes the best of both worlds and just combines them into a single data structure in JavaScript we can create a plane object by wrapping key value pairs and braces we can almost do the same thing with a dart map but the keys in that object will be strongly typed this means you can use anything for the key itself which could be a class or a class instance or whatever you want now you could also do this with a javascript map there just syntactically not as nice to work with now the next thing we're going to look at is asynchronous programming which is one of the most important concepts to know for JavaScript and flutter alike in JavaScript we have promises and we can create promises by writing async functions that return some value by default these will automatically return a promise now in some other async function we can await the value of this promise which will pause the execution of the function until that promise returns some kind of value and if we don't want to use async await we can use then to capture the value when it's resolved or catch if it results in an error in dart we don't have promises but instead futures luckily you don't have to relearn everything you know about async programming because a future works exactly like a promise we can write an async function which will return a future by default and we can write another function that awaits the result value from that future if we have a future we can call then or catch error on it so the ergonomics are really no different than promises now dart has a stream data structure for handling multiple asynchronous values vanilla JavaScript doesn't have anything like that right out of the box but a lot of libraries provide them like rxjs and mob x via observables so an rxjs for example we can create an observable like this and if we want to listen to the values in it we call subscribe on it then we pass subscribe callback function to execute some code whenever it emits a new value we can follow a similar pattern in dart with the stream object but we can actually use this with async/await as well we can use in a weight for loop to basically loop over an object as it changes over time this often results in much more readable code compared to chaining a bunch of callback functions together but we can also subscribe to a stream just like we would with an observable except it's called listen so at this point you're probably seeing a pattern the dart is very similar to JavaScript in a lot of ways but maybe a little smoother around the edges so let's see how this actually translates into building a widget with flutter to do that I just went to the react native Docs and grabbed a couple of their examples the first example shows how to apply Styles in a way that can be merged so one style can override the other in only the properties that it wants to change on the right we have the react native component which was just copied directly from the docs and then recreated in flutter on the left in react native we implement a render function that returns a bunch of different components that resemble HTML then to apply the styles we have a style property then we can add our Styles to an array and react will apply those Styles from left to right and flutter the overall structure looks very similar but instead we are instantiating objects and because there's no new keyword it actually looks like we're just calling functions and all this happens inside the build method which is the equivalent to render so overall you should be able to see that flutter took a lot of inspiration from react so that's a very basic comparison on a stateless widget or component but the real value of these frameworks is that they can react to changes in data this time I'm grabbing the state example from react native and will clone it in flutter one of the main features of a react component is that it has the set state method that will rerender it when called with state changes and flutter has this exact same thing on what's called a stateful widget and that's a perfectly fine way to build your widgets but what you'll find in both flutter and react is that coin sets stay all the time doesn't scale very well so you pretty quickly have to implement something like Redux for state management and that's perfectly fine and you can do that in flutter as well but flutter also has these things called builders which allow you to work with asynchronous data sources and render the UI automatically they're similar conceptually to the async pipe in angular basically you tell your UI to listen to a stream and then rerender different templates or widgets based on whatever the value of that stream might be I'm gonna go ahead and wrap things there hopefully this gave you a general idea of what flutter is all about I never really expected to be writing dart code on a regular basis but I am super excited to be building the fire ship i/o app with flutter thanks for watching and I will talk to you soon [Music]

Channel: Fireship

Views: 277,001

Rating: 4.9527364 out of 5

Keywords: firebase, webdev, app development, typescript, javascript, lesson, tutorial, react, react native, flutter, dart, js, flutter js, flutter web dev, flutter vs react native, flutter vs ionic, hybrid app development

Id: 7sJZi0grFR4

Length: 13min 42sec (822 seconds)

Published: Mon Jan 21 2019