Flutter/Dart basics for the JavaScript web developer. Learn the similarities and differences between Dart and JS side-by-side. Compare Flutter Widgets to React Native components. https://fireship.io/lessons/flutter-for-js-developers/

- Flutter https://flutter.io
- React Native https://facebook.github.io/react-native/
2024-02-04T07:02:43.619Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e51998bf-7f0f-4bad-82bf-6083a5d52ac4
8162edaf15fc9758ff5cb93e1749e224a3a19f6258dbaa782a7f382981377d93
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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 best tool for the job, either be a 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.
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 in Morse code from Fireship IO.
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 a 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+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs.
In a React Native project, you'll be building components, and those components combine the 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 10 different JavaScript files to get this 3 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 an Ionic 4 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.
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 4 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 3 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 browser.
And anytime you make a change to your code, you just enter r on the command line and it will hot 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 pubspec YAML, 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.
If you like simplicity, you might like Flutter.
But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer.
When you declare a basic reassignable 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 log in JS.
Now, we can write the same code over here in JavaScript which would use let instead of the type annotation.
And if we wanna add a type, we can append that to the person variable.
We can also have single assignment variables in JavaScript, which we can do with the const keyword.
So it's a const person equals Jeff.
In Dart, we would instead use the final keyword.
This is kind of confusing because there's also a const keyword in Dart, But it works slightly different.
It's more like calling object freeze in JavaScript because it will make the entire data structure immutable.
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, can be a useful tool.
And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript.
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 the e s six way.
We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions.
In this example here, we have a higher order function call me, which takes 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 Print.
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 mix and 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.
And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community.
But in any case, the syntax is very similar.
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 keyword is optional in Dart.
And you'll be instantiating a lot of objects in Flutter, 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, it would 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 wanna 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 wanna 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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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.
They're 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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error.
In Dart, we don't have promises, but instead futures.
Luckily, you don't 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.
Then we can write another function that awaits the resolved 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 MobX via observables.
So in RxJS, for example, we can create an observable like this.
Then if we want to listen to the values in it, we call subscribe on it.
Then we pass subscribe a 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 an await 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.
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.
Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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.
In 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 we'll 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 calling setState all the time doesn't scale very well.
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 re render different templates or widgets based on whatever the value of that stream might be.
I'm gonna go ahead and wrap things up there.
Hopefully, this gave you a general idea of what Flutter's all about.
I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter.
Thanks for watching, and I will talk to you soon.

Speaker 0: 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 best tool for the job, either be a 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. 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 in Morse code from Fireship IO. 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 a 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+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs. In a React Native project, you'll be building components, and those components combine the 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 10 different JavaScript files to get this 3 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 an Ionic 4 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. 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 4 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 3 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 browser. And anytime you make a change to your code, you just enter r on the command line and it will hot 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 pubspec YAML, 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. If you like simplicity, you might like Flutter. But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer.

When you declare a basic reassignable 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 log in JS. Now, we can write the same code over here in JavaScript which would use let instead of the type annotation. And if we wanna add a type, we can append that to the person variable.

We can also have single assignment variables in JavaScript, which we can do with the const keyword. So it's a const person equals Jeff. In Dart, we would instead use the final keyword. This is kind of confusing because there's also a const keyword in Dart, But it works slightly different. It's more like calling object freeze in JavaScript because it will make the entire data structure immutable.

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, can be a useful tool. And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript.

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 the e s six way. We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions. In this example here, we have a higher order function call me, which takes 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 Print. 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 mix and 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. And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community. But in any case, the syntax is very similar.

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 keyword is optional in Dart. And you'll be instantiating a lot of objects in Flutter, 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, it would 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 wanna 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 wanna 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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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. They're 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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error.

In Dart, we don't have promises, but instead futures. Luckily, you don't 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. Then we can write another function that awaits the resolved 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 MobX via observables. So in RxJS, for example, we can create an observable like this. Then if we want to listen to the values in it, we call subscribe on it.

Then we pass subscribe a 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 an await 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. 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. Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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. In 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 we'll 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 calling setState all the time doesn't scale very well. 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 re render different templates or widgets based on whatever the value of that stream might be. I'm gonna go ahead and wrap things up there. Hopefully, this gave you a general idea of what Flutter's all about. I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter. Thanks for watching, and I will talk to you soon.
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 best tool for the job, either be a 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. 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 in Morse code from Fireship IO.
youtube
video gaming
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 a 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.
camping
machine learning
Its engine is written in c+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs. In a React Native project, you'll be building components, and those components combine the styles, the Templating and the JavaScript logic in a single file for each component, generally speaking.
video gaming
programming
software development
modeling
You use NPM to manage your dependencies, of course, And then we have about 10 different JavaScript files to get this 3 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 an Ionic 4 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. 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 4 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.
software
animation
software development
We just have a single file called main. Dart which is the entry point to our app and I was able to build this 3 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 browser. And anytime you make a change to your code, you just enter r on the command line and it will hot reload the code and save the state of the actual app itself.
software
software development
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 pubspec YAML, which is the equivalent to a package JSON. You only have one dependency right out of the gate, which is the Flutter SDK.
software development
And then if you add anything else to this file, it will automatically update your dependencies when you save. If you like simplicity, you might like Flutter. But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer.
When you declare a basic reassignable 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 log in JS. Now, we can write the same code over here in JavaScript which would use let instead of the type annotation. And if we wanna add a type, we can append that to the person variable.
programming
We can also have single assignment variables in JavaScript, which we can do with the const keyword. So it's a const person equals Jeff. In Dart, we would instead use the final keyword. This is kind of confusing because there's also a const keyword in Dart, But it works slightly different. It's more like calling object freeze in JavaScript because it will make the entire data structure immutable. 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, can be a useful tool. And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript. 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 the e s six way. We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions. In this example here, we have a higher order function call me, which takes 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 Print.
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 mix and based inheritance, which means that any given class will only have one superclass.
programming
But the class body can be used in multiple classes, so you can do things like behavior based composition. And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community. But in any case, the syntax is very similar. 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 keyword is optional in Dart. And you'll be instantiating a lot of objects in Flutter, 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, it would 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.
programming
In addition, Dart has the concept of public and private members. Everything is public by default. But if you wanna 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 wanna 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.
programming
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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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. They're 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.
programming
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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error. In Dart, we don't have promises, but instead futures. Luckily, you don't 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. Then we can write another function that awaits the resolved 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 MobX via observables.
So in RxJS, for example, we can create an observable like this. Then if we want to listen to the values in it, we call subscribe on it. Then we pass subscribe a 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.
programming
We can use an await 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. 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. Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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. In 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 we'll 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.
animation
modeling
systems
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 calling setState all the time doesn't scale very well. 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 re render different templates or widgets based on whatever the value of that stream might be. I'm gonna go ahead and wrap things up there. Hopefully, this gave you a general idea of what Flutter's all about. I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter.
animation
programming
video gaming
Thanks for watching, and I will talk to you soon.
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 best tool for the job, either be a 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. 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 in Morse code from Fireship IO. 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 a 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+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs. In a React Native project, you'll be building components, and those components combine the 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 10 different JavaScript files to get this 3 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 an Ionic 4 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. 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 4 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 3 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 browser. And anytime you make a change to your code, you just enter r on the command line and it will hot 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 pubspec YAML, 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. If you like simplicity, you might like Flutter. But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer. When you declare a basic reassignable 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 log in JS. Now, we can write the same code over here in JavaScript which would use let instead of the type annotation. And if we wanna add a type, we can append that to the person variable. We can also have single assignment variables in JavaScript, which we can do with the const keyword. So it's a const person equals Jeff. In Dart, we would instead use the final keyword. This is kind of confusing because there's also a const keyword in Dart, But it works slightly different. It's more like calling object freeze in JavaScript because it will make the entire data structure immutable. 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, can be a useful tool. And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript. 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 the e s six way. We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions. In this example here, we have a higher order function call me, which takes 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 Print. 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 mix and 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. And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community. But in any case, the syntax is very similar. 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 keyword is optional in Dart. And you'll be instantiating a lot of objects in Flutter, 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, it would 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 wanna 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 wanna 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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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. They're 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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error. In Dart, we don't have promises, but instead futures. Luckily, you don't 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. Then we can write another function that awaits the resolved 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 MobX via observables. So in RxJS, for example, we can create an observable like this. Then if we want to listen to the values in it, we call subscribe on it. Then we pass subscribe a 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 an await 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. 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. Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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. In 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 we'll 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 calling setState all the time doesn't scale very well. 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 re render different templates or widgets based on whatever the value of that stream might be. I'm gonna go ahead and wrap things up there. Hopefully, this gave you a general idea of what Flutter's all about. I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter. Thanks for watching, and I will talk to you soon.
Hi.
hi
I'm
i'm
a
a
JavaScript
javascript
developer,
developer
and
and
my
my
passion
passion
is
is
building
building
things
things
for
for
the
the
web.
web
So
so
when
when
it
it
comes
comes
to
to
building
building
native
native
mobile
mobile
apps,
apps
JavaScript
javascript
has
has
always
always
felt
felt
like
like
best
best
tool
tool
for
for
the
the
job,
job
either
either
be
be
a
a
Ionic
ionic
Cordova
cordova
or
or
React
react
Native.
native
But
but
Flutter
flutter
has
has
blown
blown
my
my
mind
mind
recently,
recently
both
both
in
in
terms
terms
of
of
the
the
developer
developer
experience
experience
and
and
the
the
quality
quality
of
of
the
the
apps
apps
that
that
it
it
can
can
produce.
produce
You're
you're
a
a
JavaScript
javascript
developer
developer
who's
who's
heard
heard
rumors
rumors
about
about
Flutter
flutter
and
and
looking
looking
to
to
get
get
acquainted,
acquainted
this
this
is
is
the
the
video
video
for
for
you.
you
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
write
write
up
up
in
in
Morse
morse
code
code
from
from
Fireship
fireship
IO.
io
First,
first
we'll
we'll
talk
talk
about
about
the
the
trade
trade
offs,
offs
then
then
we'll
we'll
look
look
at
at
the
the
Flutter
flutter
project
project
structure
structure
compared
compared
to
to
React
react
Native
native
and
and
Ionic,
ionic
then
then
we'll
we'll
compare
compare
the
the
Dart
dart
programming
programming
language
language
to
to
JavaScript,
javascript
then
then
we'll
we'll
finish
finish
up
up
by
by
cloning
cloning
a
a
couple
couple
of
of
React
react
Native
native
components
components
as
as
Flutter
flutter
widgets.
widgets
Flutter
flutter
may
may
or
or
may
may
not
not
be
be
the
the
right
right
tool
tool
for
for
the
the
job.
job
Everything
everything
in
in
life
life
is
is
a
a
trade
trade
off.
off
And
and
there
there
are
are
a
a
couple
couple
of
of
big
big
trade
trade
offs
offs
with
with
Flutter
flutter
right
right
off
off
the
the
bat.
bat
The
the
first
first
one
one
is
is
the
the
learning
learning
curve.
curve
So
so
if
if
you're
you're
already
already
a
a
web
web
developer
developer
or
or
a
a
JavaScript
javascript
developer,
developer
you
you
can
can
basically
basically
just
just
jump
jump
right
right
into
into
an
an
Ionic
ionic
or
or
React
react
Native
native
project
project
without
without
any
any
learning
learning
curve.
curve
Another
another
potential
potential
drawback
drawback
is
is
the
the
size
size
of
of
the
the
community.
community
Coding
coding
boot
boot
camps
camps
are
are
churning
churning
out
out
new
new
JavaScript
javascript
developers
developers
every
every
day,
day
so
so
it's
it's
a
a
lot
lot
easier
easier
to
to
source
source
talent
talent
for
for
your
your
project.
project
And
and
the
the
truth
truth
is
is
companies
companies
using
using
hybrid
hybrid
frameworks
frameworks
are
are
generally
generally
doing
doing
so
so
to
to
save
save
time
time
and
and
money.
money
Now
now
while
while
I
i
said
said
there's
there's
a
a
learning
learning
curve,
curve
that
that
learning
learning
curve
curve
is
is
pretty
pretty
gentle.
gentle
This
this
comment
comment
says
says
it
it
all.
all
JavaScript
javascript
is
is
my
my
wife.
wife
Dart
dart
is
is
my
my
mistress.
mistress
But
but
Dart
dart
isn't
isn't
ahead
ahead
of
of
time
time
compiled
compiled
language,
language
so
so
it
it
brings
brings
something
something
else
else
to
to
the
the
table:
table
performance.
performance
Its
its
engine
engine
is
is
written
written
in
in
c+plus,
c+plus
and
and
when
when
you
you
have
have
to
to
make
make
a
a
lot
lot
of
of
callbacks
callbacks
to
to
the
the
native
native
system,
system
it's
it's
just
just
going
going
to
to
perform
perform
better
better
than
than
a
a
JavaScript
javascript
bridge.
bridge
It
it
can
can
also
also
integrate
integrate
existing
existing
native
native
code,
code
it
it
can
can
do
do
hot
hot
reloads
reloads
during
during
development,
development
and
and
it
it
has
has
some
some
of
of
the
the
best
best
documentation
documentation
that
that
I've
i've
seen
seen
for
for
any
any
framework,
framework
period.
period
I'm
i'm
in
in
the
the
process
process
of
of
building
building
my
my
own
own
Flutter
flutter
app
app
for
for
Fireship
fireship
IO.
io
And
and
while
while
it's
it's
not
not
a
a
silver
silver
bullet
bullet
that's
that's
just
just
going
going
to
to
make
make
app
app
development
development
easy,
easy
you
you
might
might
be
be
pleasantly
pleasantly
surprised
surprised
and
and
refreshed
refreshed
if
if
you're
you're
a
a
full
full
time
time
JS
js
developer.
developer
Let's
let's
go
go
ahead
ahead
and
and
fade
fade
out
out
the
the
music
music
and
and
start
start
looking
looking
at
at
some
some
code.
code
I
i
want
want
to
to
start
start
with
with
just
just
a
a
baseline
baseline
comparison
comparison
of
of
the
the
project
project
structure
structure
to
to
React
react
Native
native
and
and
Ionic.
ionic
The
the
baseline
baseline
app
app
that
that
we
we
have
have
here
here
is
is
just
just
3
3
tabs
tabs
at
at
the
the
bottom
bottom
that
that
can
can
toggle
toggle
between
between
3
3
different
different
screens.
screens
You're
you're
looking
looking
at
at
the
the
one
one
I
i
built
built
with
with
Flutter,
flutter
but
but
React
react
Native
native
and
and
Ionic
ionic
have
have
their
their
own
own
templates
templates
that
that
you
you
can
can
just
just
generate
generate
with
with
their
their
CLIs.
clis
In
in
a
a
React
react
Native
native
project,
project
you'll
you'll
be
be
building
building
components,
components
and
and
those
those
components
components
combine
combine
the
the
styles,
styles
the
the
Templating
templating
and
and
the
the
JavaScript
javascript
logic
logic
in
in
a
a
single
single
file
file
for
for
each
each
component,
component
generally
generally
speaking.
speaking
You
you
use
use
NPM
npm
to
to
manage
manage
your
your
dependencies,
dependencies
of
of
course,
course
And
and
then
then
we
we
have
have
about
about
10
10
different
different
JavaScript
javascript
files
files
to
to
get
get
this
this
3
3
tap
tap
layout
layout
working.
working
And
and
it
it
looks
looks
almost
almost
just
just
like
like
a
a
regular
regular
React
react
app
app
with
with
some
some
special
special
components
components
for
for
rendering
rendering
the
the
UI
ui
on
on
native
native
and
and
some
some
platform
platform
checking
checking
here
here
and
and
there.
there
At
at
the
the
end
end
of
of
the
the
video,
video
we'll
we'll
actually
actually
build
build
a
a
couple
couple
of
of
React
react
Native
native
components
components
in
in
Flutter.
flutter
Now
now
I'm
i'm
opening
opening
up
up
an
an
Ionic
ionic
4
4
project,
project
And
and
you'll
you'll
see
see
that
that
we
we
have
have
quite
quite
a
a
few
few
more
more
files,
files
but
but
that's
that's
mainly
mainly
because
because
Angular
angular
separates
separates
the
the
templates
templates
and
and
the
the
CSS
css
into
into
their
their
own
own
isolated
isolated
files.
files
Think
think
this
this
is
is
a
a
good
good
way
way
to
to
separate
separate
concerns,
concerns
but
but
it
it
can
can
also
also
be
be
pretty
pretty
overwhelming
overwhelming
if
if
you're
you're
jumping
jumping
into
into
this
this
project
project
for
for
the
the
first
first
time,
time
especially
especially
if
if
you
you
don't
don't
know
know
Angular.
angular
And,
and
there's
there's
a
a
pretty
pretty
long
long
list
list
of
of
dependencies
dependencies
that
that
you'll
you'll
have
have
to
to
learn.
learn
But,
but
because
because
4
4
now
now
uses
uses
web
web
components.
components
You'll
you'll
be
be
able
able
to
to
use
use
it
it
with
with
any
any
framework
framework
that
that
you
you
want.
want
Now,
now
when
when
we
we
jump
jump
into
into
our
our
Flutter
flutter
project,
project
you'll
you'll
see
see
right
right
off
off
the
the
bat
bat
that
that
it's
it's
far
far
less
less
complex
complex
than
than
the
the
JavaScript
javascript
counterparts.
counterparts
We
we
just
just
have
have
a
a
single
single
file
file
called
called
main.
main
Dart
dart
which
which
is
is
the
the
entry
entry
point
point
to
to
our
our
app
app
and
and
I
i
was
was
able
able
to
to
build
build
this
this
3
3
tab
tab
layout
layout
with
with
only
only
45
45
lines
lines
of
of
code.
code
There
there
was
was
no
no
import
import
export
export
headaches
headaches
and
and
no
no
boilerplate.
boilerplate
If
if
we
we
want
want
to
to
run
run
the
the
app,
app
we
we
can
can
do
do
that
that
directly
directly
from
from
the
the
command
command
line.
line
And
and
there's
there's
no
no
need
need
to
to
download
download
a
a
special
special
app
app
from
from
the
the
app
app
store
store
or
or
to
to
debug
debug
in
in
browser.
browser
And
and
anytime
anytime
you
you
make
make
a
a
change
change
to
to
your
your
code,
code
you
you
just
just
enter
enter
r
r
on
on
the
the
command
command
line
line
and
and
it
it
will
will
hot
hot
reload
reload
the
the
code
code
and
and
save
save
the
the
state
state
of
of
the
the
actual
actual
app
app
itself.
itself
React
react
Native
native
can
can
do
do
this
this
also,
also
and
and
it
it
has
has
a
a
huge
huge
impact
impact
on
on
your
your
development
development
productivity.
productivity
And
and
when
when
it
it
comes
comes
to
to
dependencies,
dependencies
you
you
have
have
this
this
pubspec
pubspec
YAML,
yaml
which
which
is
is
the
the
equivalent
equivalent
to
to
a
a
package
package
JSON.
json
You
you
only
only
have
have
one
one
dependency
dependency
right
right
out
out
of
of
the
the
gate,
gate
which
which
is
is
the
the
Flutter
flutter
SDK.
sdk
And
and
then
then
if
if
you
you
add
add
anything
anything
else
else
to
to
this
this
file,
file
it
it
will
will
automatically
automatically
update
update
your
your
dependencies
dependencies
when
when
you
you
save.
save
If
if
you
you
like
like
simplicity,
simplicity
you
you
might
might
like
like
Flutter.
flutter
But
but
if
if
you
you
wanna
wanna
learn
learn
Flutter,
flutter
that
that
means
means
you
you
have
have
to
to
learn
learn
a
a
whole
whole
another
another
programming
programming
language,
language
Dart.
dart
But
but
luckily,
luckily
it
it
shares
shares
a
a
lot
lot
of
of
the
the
same
same
conventions
conventions
as
as
JavaScript,
javascript
my
my
goal
goal
in
in
the
the
next
next
couple
couple
minutes
minutes
is
is
to
to
make
make
you
you
productive
productive
with
with
Dart
dart
from
from
the
the
first
first
keystroke.
keystroke
Let's
let's
look
look
at
at
the
the
syntax
syntax
side
side
by
by
side
side
with
with
TypeScript,
typescript
which
which
will
will
mostly
mostly
just
just
be
be
vanilla
vanilla
JavaScript.
javascript
The
the
main
main
entry
entry
point
point
for
for
a
a
Dart
dart
app,
app
which
which
is
is
on
on
the
the
left,
left
is
is
the
the
main
main
function.
function
This
this
is
is
where
where
your
your
app
app
will
will
start
start
executing.
executing
In
in
JavaScript,
javascript
we
we
don't
don't
really
really
have
have
this
this
concept,
concept
but
but
what
what
Apps
apps
commonly
commonly
do
do
is
is
export
export
a
a
function
function
and
and
then
then
have
have
that
that
function
function
be
be
called
called
by
by
the
the
library
library
consumer.
consumer
When
when
you
you
declare
declare
a
a
basic
basic
reassignable
reassignable
variable
variable
in
in
Dart,
dart
you
you
start
start
with
with
the
the
type
type
annotation.
annotation
So
so
if
if
we
we
have
have
a
a
string
string
variable,
variable
we'll
we'll
type
type
string,
string
then
then
we
we
can
can
assign
assign
that
that
variable
variable
to
to
a
a
string
string
value
value
and
and
then
then
reassign
reassign
it
it
later
later
if
if
we
we
want.
want
And
and
if
if
we
we
want
want
to
to
log
log
that
that
value,
value
we
we
can
can
just
just
call
call
print
print
which
which
is
is
the
the
equivalent
equivalent
to
to
console
console
log
log
in
in
JS.
js
Now,
now
we
we
can
can
write
write
the
the
same
same
code
code
over
over
here
here
in
in
JavaScript
javascript
which
which
would
would
use
use
let
let
instead
instead
of
of
the
the
type
type
annotation.
annotation
And
and
if
if
we
we
wanna
wanna
add
add
a
a
type,
type
we
we
can
can
append
append
that
that
to
to
the
the
person
person
variable.
variable
We
we
can
can
also
also
have
have
single
single
assignment
assignment
variables
variables
in
in
JavaScript,
javascript
which
which
we
we
can
can
do
do
with
with
the
the
const
const
keyword.
keyword
So
so
it's
it's
a
a
const
const
person
person
equals
equals
Jeff.
jeff
In
in
Dart,
dart
we
we
would
would
instead
instead
use
use
the
the
final
final
keyword.
keyword
This
this
is
is
kind
kind
of
of
confusing
confusing
because
because
there's
there's
also
also
a
a
const
const
keyword
keyword
in
in
Dart,
dart
But
but
it
it
works
works
slightly
slightly
different.
different
It's
it's
more
more
like
like
calling
calling
object
object
freeze
freeze
in
in
JavaScript
javascript
because
because
it
it
will
will
make
make
the
the
entire
entire
data
data
structure
structure
immutable.
immutable
So
so
in
in
Dart,
dart
you
you
would
would
use
use
const
const
to
to
make
make
an
an
array
array
or
or
a
a
map
map
completely
completely
immutable,
immutable
meaning
meaning
its
its
properties
properties
or
or
elements
elements
can't
can't
be
be
changed.
changed
So
so
Dart
dart
has
has
a
a
sound
sound
type
type
system,
system
but
but
it's
it's
also
also
flexible.
flexible
For
for
example,
example
we
we
can
can
use
use
the
the
var
var
keyword
keyword
to
to
tell
tell
Dart
dart
to
to
implicitly
implicitly
figure
figure
out
out
the
the
type.
type
So
so
if
if
you
you
hate
hate
type
type
annotations
annotations
everywhere
everywhere
or
or
if
if
you
you
have
have
a
a
dynamic
dynamic
type,
type
can
can
be
be
a
a
useful
useful
tool.
tool
And
and
speaking
speaking
of
of
dynamic,
dynamic
Dart
dart
also
also
has
has
a
a
dynamic
dynamic
type
type
which
which
is
is
similar
similar
to
to
the
the
any
any
type
type
in
in
TypeScript.
typescript
This
this
is
is
most
most
useful
useful
when
when
you
you
have
have
data
data
coming
coming
from
from
external
external
source
source
and
and
you
you
don't
don't
really
really
know
know
what
what
the
the
shape
shape
of
of
that
that
data
data
is
is
going
going
to
to
look
look
like.
like
So
so
when
when
you
you
see
see
the
the
dynamic
dynamic
keyword,
keyword
that
that
basically
basically
just
just
means
means
we
we
don't
don't
know.
know
Now
now
let's
let's
switch
switch
gears
gears
and
and
talk
talk
about
about
something
something
that's
that's
especially
especially
important
important
in
in
JavaScript,
javascript
and
and
that's
that's
importing
importing
things
things
between
between
files.
files
There's
there's
a
a
lot
lot
of
of
ways
ways
to
to
do
do
this
this
in
in
JavaScript,
javascript
but
but
we'll
we'll
just
just
go
go
the
the
e
e
s
s
six
six
way.
way
We'll
we'll
export
export
a
a
default
default
value,
value
which
which
points
points
to
to
our
our
lang
lang
variable.
variable
And
and
we
we
could
could
export
export
multiple
multiple
values
values
from
from
this
this
file
file
if
if
we
we
put
put
it
it
inside
inside
of
of
braces.
braces
Now
now
if
if
we
we
go
go
back
back
to
to
the
the
file
file
that
that
wants
wants
to
to
import
import
this
this
value,
value
we
we
can
can
simply
simply
import
import
it
it
from
from
that
that
file.
file
This
this
works
works
fine
fine
when
when
you
you
just
just
need
need
one
one
thing,
thing
but
but
you
you
know
know
as
as
a
a
JavaScript
javascript
developer
developer
that
that
this
this
gets
gets
harder
harder
as
as
you
you
need
need
more
more
and
and
more
more
things.
things
So
so
we
we
rely
rely
on
on
snippets
snippets
and
and
barrels
barrels
and
and
stuff
stuff
like
like
that
that
just
just
to
to
manage
manage
the
the
mental
mental
boilerplate
boilerplate
of
of
imports
imports
and
and
exports.
exports
In
in
Dart,
dart
we
we
don't
don't
have
have
to
to
worry
worry
about
about
exporting
exporting
anything.
anything
If
if
we
we
declare
declare
a
a
variable
variable
in
in
this
this
global's
global's
Dart
dart
file
file
and
and
then
then
import
import
it
it
in
in
the
the
other
other
file,
file
it's
it's
going
going
to
to
be
be
available
available
by
by
default.
default
And
and
because
because
Dart
dart
is
is
strong
strong
typed
typed
and
and
the
the
tooling
tooling
is
is
so
so
good,
good
we
we
can
can
just
just
start
start
typing
typing
out
out
the
the
name
name
of
of
something
something
in
in
this
this
file
file
and
and
it
it
will
will
IntelliSense
intellisense
autocomplete
autocomplete
for
for
us.
us
Now
now
let's
let's
take
take
a
a
look
look
at
at
functions.
functions
Functions
functions
feel
feel
just
just
like
like
they
they
do
do
in
in
JavaScript
javascript
minus
minus
the
the
function
function
keyword.
keyword
If
if
we
we
want
want
to
to
use
use
type
type
annotations,
annotations
they
they
come
come
before
before
the
the
actual
actual
name
name
unlike
unlike
TypeScript,
typescript
which
which
comes
comes
after
after
the
the
name.
name
You
you
can
can
also
also
use
use
anonymous
anonymous
functions,
functions
arrow
arrow
functions,
functions
and
and
higher
higher
order
order
functions.
functions
In
in
this
this
example
example
here,
here
we
we
have
have
a
a
higher
higher
order
order
function
function
call
call
me,
me
which
which
takes
takes
takes
takes
a
a
function
function
as
as
its
its
argument.
argument
And
and
then
then
when
when
we
we
call
call
it,
it
we
we
use
use
an
an
anonymous
anonymous
function
function
with
with
the
the
arrow
arrow
syntax
syntax
just
just
like
like
we
we
would
would
in
in
JavaScript.
javascript
So
so
functions
functions
will
will
feel
feel
just
just
like
like
they
they
do
do
in
in
JavaScript,
javascript
just
just
with
with
a
a
smaller
smaller
code
code
Print.
print
Now
now
I
i
realize
realize
I'm
i'm
going
going
pretty
pretty
fast
fast
with
with
these
these
code
code
snippets,
snippets
so
so
make
make
sure
sure
to
to
check
check
out
out
the
the
full
full
article
article
if
if
you
you
want
want
to
to
copy
copy
and
and
paste
paste
these
these
to
to
try
try
them
them
out
out
on
on
your
your
own.
own
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
object
object
oriented
oriented
programming.
programming
Dart
dart
supports
supports
mix
mix
and
and
based
based
inheritance,
inheritance
which
which
means
means
that
that
any
any
given
given
class
class
will
will
only
only
have
have
one
one
superclass.
superclass
But
but
the
the
class
class
body
body
can
can
be
be
used
used
in
in
multiple
multiple
classes,
classes
so
so
you
you
can
can
do
do
things
things
like
like
behavior
behavior
based
based
composition.
composition
And
and
JavaScript
javascript
classes
classes
are
are
more
more
or
or
less
less
just
just
Syntactic
syntactic
sugar
sugar
for
for
prototypal
prototypal
inheritance,
inheritance
so
so
they
they
get
get
kind
kind
of
of
a
a
bad
bad
reputation
reputation
in
in
the
the
JavaScript
javascript
community.
community
But
but
in
in
any
any
case,
case
the
the
syntax
syntax
is
is
very
very
similar.
similar
We
we
define
define
a
a
class
class
by
by
using
using
the
the
class
class
keyword,
keyword
and
and
then
then
we
we
can
can
instantiate
instantiate
that
that
class
class
by
by
calling
calling
it
it
with
with
parentheses.
parentheses
In
in
JavaScript,
javascript
We
we
do
do
the
the
exact
exact
same
same
thing,
thing
except
except
we
we
use
use
the
the
new
new
keyword
keyword
when
when
instantiating
instantiating
the
the
class.
class
The
the
new
new
keyword
keyword
is
is
optional
optional
in
in
Dart.
dart
And
and
you'll
you'll
be
be
instantiating
instantiating
a
a
lot
lot
of
of
objects
objects
in
in
Flutter,
flutter
so
so
this
this
helps
helps
keep
keep
your
your
code
code
very
very
clean.
clean
When
when
we
we
instantiate
instantiate
an
an
instance
instance
of
of
a
a
class,
class
we're
we're
creating
creating
an
an
object.
object
We
we
need
need
to
to
tell
tell
our
our
code
code
how
how
to
to
create
create
that
that
initial
initial
object
object
which
which
we
we
do
do
with
with
a
a
constructor.
constructor
In
in
Vanilla
vanilla
JavaScript,
javascript
it
it
would
would
look
look
like
like
this.
this
We
we
pass
pass
arguments
arguments
to
to
the
the
constructor
constructor
and
and
then
then
initialize
initialize
them
them
as
as
values
values
on
on
the
the
this
this
context.
context
In
in
TypeScript,
typescript
we
we
can
can
do
do
this
this
in
in
a
a
little
little
more
more
sugary
sugary
way
way
where
where
we
we
annotate
annotate
our
our
input
input
variables
variables
as
as
private
private
or
or
public,
public
and
and
then
then
they'll
they'll
automatically
automatically
be
be
available
available
on
on
this
this
class.
class
In
in
Dart,
dart
we
we
have
have
an
an
even
even
cleaner
cleaner
way
way
to
to
construct
construct
an
an
object
object
by
by
just
just
calling
calling
the
the
class
class
as
as
a
a
function.
function
In
in
addition,
addition
Dart
dart
has
has
the
the
concept
concept
of
of
public
public
and
and
private
private
members.
members
Everything
everything
is
is
public
public
by
by
default.
default
But
but
if
if
you
you
wanna
wanna
make
make
something
something
private
private
to
to
the
the
library
library
or
or
class,
class
just
just
add
add
an
an
underscore
underscore
to
to
the
the
beginning
beginning
of
of
its
its
name.
name
And
and
Dart
dart
has
has
another
another
cool
cool
thing
thing
up
up
its
its
sleeve
sleeve
called
called
named
named
constructors.
constructors
The
the
one
one
we
we
just
just
wrote
wrote
is
is
the
the
default,
default
but
but
we
we
can
can
also
also
add
add
a
a
name
name
constructor
constructor
to
to
provide
provide
different
different
initialization
initialization
logic
logic
as
as
needed.
needed
We
we
just
just
implement
implement
a
a
method
method
name
name
on
on
the
the
class
class
name
name
itself,
itself
and
and
now
now
we
we
have
have
a
a
different
different
constructor
constructor
with
with
whatever
whatever
logic
logic
we
we
want.
want
There's
there's
a
a
lot
lot
more
more
we
we
could
could
cover
cover
here,
here
but
but
the
the
actual
actual
definitions
definitions
of
of
methods
methods
and
and
Properties
properties
on
on
this
this
class
class
is
is
exactly
exactly
the
the
same
same
as
as
it
it
is
is
in
in
JavaScript,
javascript
so
so
we'll
we'll
just
just
go
go
ahead
ahead
and
and
leave
leave
it
it
there.
there
The
the
next
next
thing
thing
I
i
wanna
wanna
cover
cover
is
is
the
the
Dart
dart
list
list
which
which
is
is
equivalent
equivalent
to
to
a
a
JavaScript
javascript
array.
array
We
we
can
can
create
create
a
a
list
list
of
of
integers
integers
by
by
starting
starting
with
with
the
the
type
type
annotation
annotation
and
and
then
then
define
define
it
it
just
just
like
like
we
we
would
would
in
in
JavaScript.
javascript
And
and
just
just
like
like
JavaScript,
javascript
the
the
list
list
has
has
a
a
whole
whole
bunch
bunch
of
of
built
built
in
in
methods
methods
that
that
we
we
can
can
use
use
to
to
manipulate
manipulate
it
it
and
and
loop
loop
over
over
it.
it
You'll
you'll
find
find
all
all
your
your
old
old
favorites
favorites
like
like
for
for
each,
each
map,
map
and
and
reduce,
reduce
And
and
you'll
you'll
find
find
a
a
lot
lot
of
of
other
other
ones
ones
that
that
are
are
implemented
implemented
in
in
3rd
3rd
party
party
libraries
libraries
like
like
Lodash.
lodash
But
but
my
my
absolute
absolute
favorite
favorite
one
one
is
is
just
just
having
having
the
the
last
last
property.
property
I
i
don't
don't
even
even
want
want
to
to
admit
admit
how
how
many
many
times
times
I've
i've
Googled
googled
how
how
to
to
get
get
the
the
last
last
element
element
from
from
an
an
array
array
in
in
JavaScript
javascript
only
only
to
to
settle
settle
on
on
this
this
crappy
crappy
code
code
or
or
use
use
something
something
like
like
array
array
pop,
pop
which
which
also
also
isn't
isn't
ideal.
ideal
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
the
the
dart
dart
map,
map
which
which
is
is
the
the
equivalent
equivalent
to
to
a
a
JavaScript
javascript
object
object
or
or
a
a
JavaScript
javascript
map.
map
It
it
kind
kind
of
of
takes
takes
the
the
best
best
of
of
both
both
worlds
worlds
and
and
just
just
combines
combines
them
them
into
into
a
a
single
single
data
data
structure.
structure
In
in
JavaScript,
javascript
we
we
can
can
create
create
a
a
plain
plain
object
object
by
by
wrapping
wrapping
key
key
value
value
pairs
pairs
in
in
braces.
braces
We
we
can
can
almost
almost
do
do
the
the
same
same
thing
thing
with
with
a
a
dart
dart
map,
map
but
but
the
the
keys
keys
in
in
that
that
object
object
will
will
be
be
strongly
strongly
typed.
typed
This
this
means
means
you
you
can
can
use
use
anything
anything
for
for
the
the
key
key
itself
itself
which
which
could
could
be
be
a
a
class
class
or
or
a
a
class
class
instance
instance
or
or
whatever
whatever
you
you
want.
want
Now
now
you
you
could
could
also
also
do
do
this
this
with
with
a
a
JavaScript
javascript
map.
map
They're
they're
just
just
syntactically
syntactically
not
not
as
as
nice
nice
to
to
work
work
with.
with
Now
now
the
the
next
next
thing
thing
we're
we're
going
going
to
to
look
look
at
at
is
is
asynchronous
asynchronous
programming
programming
which
which
is
is
one
one
of
of
the
the
most
most
important
important
concepts
concepts
to
to
know
know
for
for
JavaScript
javascript
and
and
Flutter
flutter
alike.
alike
In
in
JavaScript,
javascript
we
we
have
have
promises
promises
And
and
we
we
can
can
create
create
promises
promises
by
by
writing
writing
async
async
functions
functions
that
that
return
return
some
some
value.
value
By
by
default,
default
these
these
will
will
automatically
automatically
return
return
a
a
promise.
promise
Now
now
in
in
some
some
other
other
async
async
function,
function
we
we
can
can
await
await
the
the
value
value
of
of
this
this
Promise,
promise
which
which
will
will
pause
pause
the
the
execution
execution
of
of
the
the
function
function
until
until
that
that
promise
promise
returns
returns
some
some
kind
kind
of
of
value.
value
And
and
if
if
we
we
don't
don't
wanna
wanna
use
use
async
async
await,
await
we
we
can
can
use
use
then
then
to
to
capture
capture
the
the
value
value
when
when
it's
it's
resolved
resolved
Or
or
a
a
catch
catch
if
if
it
it
results
results
in
in
an
an
error.
error
In
in
Dart,
dart
we
we
don't
don't
have
have
promises,
promises
but
but
instead
instead
futures.
futures
Luckily,
luckily
you
you
don't
don't
To
to
relearn
relearn
everything
everything
you
you
know
know
about
about
async
async
programming
programming
because
because
a
a
future
future
works
works
exactly
exactly
like
like
a
a
promise.
promise
We
we
can
can
write
write
an
an
async
async
function
function
which
which
will
will
return
return
a
a
future
future
by
by
default.
default
Then
then
we
we
can
can
write
write
another
another
function
function
that
that
awaits
awaits
the
the
resolved
resolved
value
value
from
from
that
that
future.
future
If
if
we
we
have
have
a
a
future,
future
we
we
can
can
call
call
then
then
or
or
catch
catch
error
error
on
on
it.
it
So
so
the
the
ergonomics
ergonomics
are
are
really
really
no
no
different
different
than
than
promises.
promises
Now
now
Dart
dart
has
has
a
a
stream
stream
data
data
structure
structure
for
for
handling
handling
multiple
multiple
asynchronous
asynchronous
values.
values
Vanilla
vanilla
JavaScript
javascript
doesn't
doesn't
have
have
anything
anything
like
like
that
that
right
right
out
out
of
of
the
the
box,
box
But
but
a
a
lot
lot
of
of
libraries
libraries
provide
provide
them
them
like
like
RxJS
rxjs
and
and
MobX
mobx
via
via
observables.
observables
So
so
in
in
RxJS,
rxjs
for
for
example,
example
we
we
can
can
create
create
an
an
observable
observable
like
like
this.
this
Then
then
if
if
we
we
want
want
to
to
listen
listen
to
to
the
the
values
values
in
in
it,
it
we
we
call
call
subscribe
subscribe
on
on
it.
it
Then
then
we
we
pass
pass
subscribe
subscribe
a
a
callback
callback
function
function
to
to
execute
execute
some
some
code
code
whenever
whenever
it
it
emits
emits
a
a
new
new
value.
value
We
we
can
can
follow
follow
a
a
similar
similar
pattern
pattern
in
in
Dart
dart
with
with
the
the
stream
stream
object,
object
but
but
we
we
can
can
actually
actually
use
use
this
this
with
with
async
async
await
await
as
as
well.
well
We
we
can
can
use
use
an
an
await
await
for
for
loop
loop
to
to
basically
basically
loop
loop
over
over
an
an
object
object
as
as
it
it
changes
changes
over
over
time.
time
This
this
often
often
results
results
in
in
much
much
more
more
readable
readable
code
code
compared
compared
to
to
chaining
chaining
a
a
bunch
bunch
of
of
callback
callback
functions
functions
together.
together
We
we
can
can
also
also
subscribe
subscribe
to
to
a
a
stream
stream
just
just
like
like
we
we
would
would
with
with
an
an
observable
observable
except
except
it's
it's
called
called
listen.
listen
So
so
at
at
this
this
point
point
you're
you're
probably
probably
seeing
seeing
a
a
pattern.
pattern
Dart
dart
is
is
very
very
similar
similar
to
to
JavaScript
javascript
in
in
a
a
lot
lot
of
of
ways,
ways
but
but
maybe
maybe
a
a
little
little
smoother
smoother
around
around
the
the
Just
just
so
so
let's
let's
see
see
how
how
this
this
actually
actually
translates
translates
into
into
building
building
a
a
widget
widget
with
with
Flutter.
flutter
To
to
do
do
that,
that
I
i
just
just
went
went
to
to
the
the
React
react
Native
native
docs
docs
and
and
grabbed
grabbed
a
a
couple
couple
of
of
their
their
examples.
examples
The
the
first
first
example
example
shows
shows
how
how
to
to
apply
apply
styles
styles
in
in
a
a
way
way
that
that
can
can
be
be
merged
merged
so
so
one
one
style
style
can
can
override
override
the
the
other
other
in
in
only
only
the
the
properties
properties
that
that
it
it
wants
wants
to
to
change.
change
On
on
the
the
right,
right
we
we
have
have
the
the
React
react
Native
native
component
component
which
which
was
was
just
just
copied
copied
directly
directly
from
from
the
the
docs
docs
and
and
then
then
recreated
recreated
in
in
Flutter
flutter
on
on
the
the
left.
left
In
in
React
react
Native,
native
we
we
implement
implement
a
a
render
render
function
function
That
that
returns
returns
a
a
bunch
bunch
of
of
different
different
components
components
that
that
resemble
resemble
HTML.
html
Then
then
to
to
apply
apply
the
the
styles,
styles
we
we
have
have
a
a
style
style
property,
property
then
then
we
we
can
can
add
add
our
our
styles
styles
to
to
an
an
array
array
and
and
React
react
will
will
apply
apply
those
those
styles
styles
from
from
left
left
to
to
right.
right
In
in
Flutter,
flutter
the
the
overall
overall
structure
structure
looks
looks
very
very
similar,
similar
but
but
instead,
instead
we
we
are
are
instantiating
instantiating
objects.
objects
And
and
because
because
there's
there's
no
no
new
new
keyword,
keyword
it
it
actually
actually
looks
looks
like
like
we're
we're
just
just
calling
calling
functions.
functions
And
and
all
all
this
this
happens
happens
inside
inside
the
the
build
build
method
method
which
which
is
is
the
the
equivalent
equivalent
to
to
render.
render
So,
so
overall,
overall
you
you
should
should
be
be
able
able
to
to
see
see
that
that
Flutter
flutter
took
took
a
a
lot
lot
of
of
inspiration
inspiration
from
from
React.
react
So
so
that's
that's
a
a
very
very
basic
basic
comparison
comparison
on
on
a
a
stateless
stateless
widget
widget
or
or
component,
component
but
but
the
the
real
real
value
value
of
of
these
these
frameworks
frameworks
is
is
that
that
they
they
can
can
react
react
to
to
changes
changes
in
in
data.
data
This
this
time,
time
I'm
i'm
grabbing
grabbing
the
the
state
state
example
example
from
from
React
react
Native
native
and
and
we'll
we'll
clone
clone
it
it
in
in
Flutter.
flutter
One
one
of
of
the
the
main
main
features
features
of
of
a
a
React
react
component
component
is
is
that
that
it
it
has
has
the
the
set
set
state
state
method
method
that
that
will
will
rerender
rerender
it
it
when
when
called
called
with
with
state
state
changes.
changes
And
and
Flutter
flutter
has
has
this
this
exact
exact
same
same
thing
thing
on
on
what's
what's
called
called
a
a
stateful
stateful
widget.
widget
And
and
that's
that's
a
a
perfectly
perfectly
fine
fine
way
way
to
to
build
build
your
your
widgets,
widgets
but
but
what
what
you'll
you'll
find
find
in
in
both
both
Flutter
flutter
and
and
React
react
is
is
that
that
calling
calling
setState
setstate
all
all
the
the
time
time
doesn't
doesn't
scale
scale
very
very
well.
well
You
you
pretty
pretty
quickly
quickly
have
have
to
to
implement
implement
something
something
like
like
Redux
redux
for
for
state
state
management.
management
And
and
that's
that's
perfectly
perfectly
fine
fine
and
and
you
you
can
can
do
do
that
that
in
in
Flutter
flutter
as
as
well.
well
But
but
Flutter
flutter
also
also
has
has
these
these
things
things
called
called
builders
builders
which
which
allow
allow
you
you
to
to
work
work
with
with
asynchronous
asynchronous
data
data
sources
sources
and
and
render
render
the
the
UI
ui
automatically.
automatically
They're
they're
similar
similar
conceptually
conceptually
to
to
the
the
async
async
pipe
pipe
in
in
Angular.
angular
Basically,
basically
you
you
tell
tell
your
your
UI
ui
to
to
listen
listen
to
to
a
a
stream
stream
and
and
then
then
re
re
render
render
different
different
templates
templates
or
or
widgets
widgets
based
based
on
on
whatever
whatever
the
the
value
value
of
of
that
that
stream
stream
might
might
be.
be
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Hopefully,
hopefully
this
this
gave
gave
you
you
a
a
general
general
idea
idea
of
of
what
what
Flutter's
flutter's
all
all
about.
about
I
i
never
never
really
really
expected
expected
to
to
be
be
writing
writing
Dart
dart
code
code
on
on
a
a
regular
regular
basis,
basis
But
but
I
i
am
am
super
super
excited
excited
to
to
be
be
building
building
the
the
Fireship
fireship
IO
io
app
app
with
with
Flutter.
flutter
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker discusses the trade-offs of Flutter in building native mobile apps and the importance of learning a new programming language, specifically React Native. They also touch on the use of flexible variables in JavaScript, including the use of a const keyword, and the process of creating a multi-factor layout in Flutter using files and dependencies. The speaker provides examples of how to create a class, use variables and methods, and use streaming data structures and building a widget based on a single variable. They express excitement for building a Fireship IO app with Flutter.
Flutter for the JS Developer
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 best tool for the job, either be a 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. 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 in Morse code from Fireship IO. 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 a 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+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs. In a React Native project, you'll be building components, and those components combine the 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 10 different JavaScript files to get this 3 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 an Ionic 4 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. 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 4 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 3 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 browser. And anytime you make a change to your code, you just enter r on the command line and it will hot 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 pubspec YAML, 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. If you like simplicity, you might like Flutter. But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer. When you declare a basic reassignable 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 log in JS. Now, we can write the same code over here in JavaScript which would use let instead of the type annotation. And if we wanna add a type, we can append that to the person variable. We can also have single assignment variables in JavaScript, which we can do with the const keyword. So it's a const person equals Jeff. In Dart, we would instead use the final keyword. This is kind of confusing because there's also a const keyword in Dart, But it works slightly different. It's more like calling object freeze in JavaScript because it will make the entire data structure immutable. 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, can be a useful tool. And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript. 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 the e s six way. We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions. In this example here, we have a higher order function call me, which takes 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 Print. 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 mix and 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. And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community. But in any case, the syntax is very similar. 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 keyword is optional in Dart. And you'll be instantiating a lot of objects in Flutter, 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, it would 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 wanna 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 wanna 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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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. They're 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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error. In Dart, we don't have promises, but instead futures. Luckily, you don't 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. Then we can write another function that awaits the resolved 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 MobX via observables. So in RxJS, for example, we can create an observable like this. Then if we want to listen to the values in it, we call subscribe on it. Then we pass subscribe a 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 an await 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. 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. Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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. In 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 we'll 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 calling setState all the time doesn't scale very well. 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 re render different templates or widgets based on whatever the value of that stream might be. I'm gonna go ahead and wrap things up there. Hopefully, this gave you a general idea of what Flutter's all about. I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter. Thanks for watching, and I will talk to you soon.
The speaker discusses the trade-offs of Flutter in building native mobile apps and the importance of learning a new programming language, specifically React Native. They also touch on the use of flexible variables in JavaScript, including the use of a const keyword, and the process of creating a multi-factor layout in Flutter using files and dependencies. The speaker provides examples of how to create a class, use variables and methods, and use streaming data structures and building a widget based on a single variable. They express excitement for building a Fireship IO app with Flutter.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Flutter for the JS Developer 
        and a small summary : The speaker discusses the trade-offs of Flutter in building native mobile apps and the importance of learning a new programming language, specifically React Native. They also touch on the use of flexible variables in JavaScript, including the use of a const keyword, and the process of creating a multi-factor layout in Flutter using files and dependencies. The speaker provides examples of how to create a class, use variables and methods, and use streaming data structures and building a widget based on a single variable. They express excitement for building a Fireship IO app with Flutter.
        [/INST]
        
        Generate the video : 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 best tool for the job, either be a 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. 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 in Morse code from Fireship IO. 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 a 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+plus, 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 Fireship 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 JS 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 3 tabs at the bottom that can toggle between 3 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 CLIs. In a React Native project, you'll be building components, and those components combine the 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 10 different JavaScript files to get this 3 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 an Ionic 4 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. 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 4 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 3 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 browser. And anytime you make a change to your code, you just enter r on the command line and it will hot 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 pubspec YAML, 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. If you like simplicity, you might like Flutter. But if you wanna 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, 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 commonly do is export a function and then have that function be called by the library consumer. When you declare a basic reassignable 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 log in JS. Now, we can write the same code over here in JavaScript which would use let instead of the type annotation. And if we wanna add a type, we can append that to the person variable. We can also have single assignment variables in JavaScript, which we can do with the const keyword. So it's a const person equals Jeff. In Dart, we would instead use the final keyword. This is kind of confusing because there's also a const keyword in Dart, But it works slightly different. It's more like calling object freeze in JavaScript because it will make the entire data structure immutable. 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, can be a useful tool. And speaking of dynamic, Dart also has a dynamic type which is similar to the any type in TypeScript. 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 the e s six way. We'll 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 is 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 minus 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 functions, arrow functions, and higher order functions. In this example here, we have a higher order function call me, which takes 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 Print. 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 mix and 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. And JavaScript classes are more or less just Syntactic sugar for prototypal inheritance, so they get kind of a bad reputation in the JavaScript community. But in any case, the syntax is very similar. 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 keyword is optional in Dart. And you'll be instantiating a lot of objects in Flutter, 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, it would 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 wanna 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 wanna 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 3rd 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 array pop, which also isn't 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 plain object by wrapping key value pairs in 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. They're 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 wanna use async await, we can use then to capture the value when it's resolved Or a catch if it results in an error. In Dart, we don't have promises, but instead futures. Luckily, you don't 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. Then we can write another function that awaits the resolved 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 MobX via observables. So in RxJS, for example, we can create an observable like this. Then if we want to listen to the values in it, we call subscribe on it. Then we pass subscribe a 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 an await 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. 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. Dart is very similar to JavaScript in a lot of ways, but maybe a little smoother around the Just 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. In 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 we'll 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 calling setState all the time doesn't scale very well. 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 re render different templates or widgets based on whatever the value of that stream might be. I'm gonna go ahead and wrap things up there. Hopefully, this gave you a general idea of what Flutter's all about. I never really expected to be writing Dart code on a regular basis, But I am super excited to be building the Fireship IO app with Flutter. Thanks for watching, and I will talk to you soon.
        