Learn the true state of JavaScript and why I'm thankful for Angular this holiday season https://angularfirebase.com

- State of JS Survey https://stateofjs.com/
- JS Salaries https://www.glassdoor.com/Salaries/javascript-developer-salary-SRCH_KO0,20.htm
- Web traffic stats - https://www.alexa.com/
- NPM Trends - https://www.npmtrends.com/@angular/core-vs-react-vs-vue
2024-02-04T07:08:10.191Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
967daa40-7b35-405b-928b-850075895399
d86a78a40a4c4de40babca0513ced2dcb87e356a73a52769fed218ed71a1e9fd
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, I wanna tell you why I'm thankful for Angular and talk about some of the advantages that it offers over other front end frameworks.
If you follow Twitter, you may have seen the State of JS Survey results were just published the other day, and what you will have learned from the survey is that everybody hates Angular and everybody loves Vue and React.
But, as you'll see over the next few minutes, that's not the actual reality that we live in.
If you're new here, like and subscribe and please let me know what you think in the comments because this is a Very important topic.
I'd like to start by saying that I'm a big fan of React and especially Vue, and this video is nothing against those frameworks or the developers that use them, but it is a problem when flawed data is used to represent the entire JavaScript population, because product managers and developers will use this data to justify their decisions.
So I've done my fair share of data analysis.
I'm a top ranked Kaggle expert, and I can generally pick out when we're dealing with a bad dataset.
One of the most common ways to screw up a dataset is with a sampling bias.
Now I'm not implying any malintent by the creators of this survey.
They actually did an awesome job with the user interface.
But they're all involved in the React community which just makes it more likely for the survey to be distributed among React developers as opposed to the JavaScript community at large.
And we can actually see this in the data itself.
We have about 20,000 total respondents with 13,000 being happy React developers.
Now, if we look at the statistics for Angular, we'll see that the exact Inverse is true for developers who dislike or have no interest in learning Angular.
Now React was definitely the most popular JavaScript library in 2018.
I am not doubting that.
But what we're seeing is a flaw in the satisfaction rate.
Even though everybody says it's not a competition, it's definitely competition if you've invested a lot of time in either one of these frameworks.
You want to see your own framework succeed.
And the big red flag for me was in the framework conclusion section where the author talks about the fall of Angular, which is simply not true outside of the echo chamber of this survey.
And we'll look at some supporting hard data in just a second here.
Another problem with this sample is that the majority of the respondents come from the United States With a very small percentage of females and, for some reason, the average salary is way higher in the United States than it is in reality.
I think most people are probably just lying about their salary or maybe the survey got distributed to a high percentage of Facebook employees working in the Bay Area.
And on a similar note, this survey only had 20,000 total responses.
My little YouTube channel has 70,000 subscribers, so that just puts in perspective how small this actual sample is of the total developer population.
I'm gonna go ahead and leave it at that.
I think this survey is fun, but it's not something you should use as the basis for important decision making.
So now let's look at some Hard unbiased data that we can use to get a picture of the true state of JavaScript.
None of these metrics are perfect on their own, but we can use all of them together to get a general idea of how things sit.
The first thing we'll look at is npm downloads.
And we can do that on npm trends.com.
Angular view and React all grew in 2018, But you can see at the beginning of the year, React was getting about 3 times more downloads than Angular.
And in the last 6 months, that's been reduced to about 1 and a half to 2 times more downloads.
And Vue's held steady at a distant third place, but Vue gets a ton of downloads in China from other sources.
So keep that in mind.
The next thing I want to look at is Jobs.
First, we'll check out Stack Overflow.
And if we search React Jobs, you can see we get 714 results.
But if we then go search for Angular, you can see we get 380 results.
So the ratio aligns almost perfectly to npm downloads.
The next thing we'll look at is freelance job postings on Upwork.
Here, we'll find about a 118 jobs for React and about 66 for Angular.
And again, we have roughly the same ratio.
The next thing we'll take a look at is an call on Medium that claims that 78% of the Front End Developer Jobs are for React.
And this is based on job postings on Indeed.
If we go to Indeed and type in React, you can see that that's absolutely true.
We get way more postings for React.
But if we actually look at this data, they're not React jobs, They're construction jobs with an average salary of $15 an hour.
So when you read an article online, don't take it at face value.
Make sure to scrutinize its data Because a lot of people just make honest mistakes and a lot of people just bullshit.
So if we look at the actual job postings on Indeed, we can type Type in React developer or React web and do the same for Angular, and we get an even distribution of jobs.
And most good companies will hire based on your script and programming fundamentals, not just the fact that you know a specific framework.
And the last thing I wanna look at is web traffic to the documentation for these various frameworks.
We can grab this unbiased data from Alexa, and it should show the same trend that we see in the survey with Angular on the decline and React on an uptrend.
But we actually see the inverse of this trend with Angular's documentation site receiving more web traffic than React in 2018.
And Vue.
Js generates the most web traffic, most of which comes from China.
But it's interesting that this trend is the exact inverse of what we see in npm downloads.
There's probably additional data we could look at, but I'm just going to leave it there and hopefully that gives you a better picture of the real state of JavaScript.
Now I wanna take a few minutes to show you why Angular has been so successful over the last couple years, because Angular has some pretty awesome superpowers that you won't find in React or Vue.
So in no particular order, we'll start with routing.
In React, everything is a component or a function, so that leads to some pretty cumbersome routing.
You kinda get used to doing things this way, but when you go to Angular or Vue, it's very refreshing.
We're just looking at the Vue router quick start And what you'll see here is a router that's directly embedded with the component HTML.
I really like to maintain a separation of concerns in my code and I feel like this just violates it.
And complex nested routing gets even more difficult to deal with.
If you look at the Angular router, you define all your routes as a plain JavaScript object.
So it's very clear and easy to understand.
We have a path and then that path routes to a specific component.
We don't have to do all this weird component stuff just to define some routes.
And And if we look at the view router here quickly, it kind of takes the same approach as Angular, which I think just makes a lot more sense.
Now the next reason I'm thankful for Angular is the CLI.
The Angular CLI is just in a completely different universe when it comes to generating boilerplate code, testing, and being extendable.
In addition, we now have the Angular console which makes the CLI much more approachable to newcomers and allows you to use everything in a graphical user interface.
The officially supported CLI tool in React is create react app.
And it doesn't really do a whole lot.
It will scaffold out your initial project, but it doesn't generate components.
And you'll probably end up ejecting from it after generating the initial boilerplate.
The VCLI is not quite as powerful as Angular, but it does have a really nice UI.
And it gives you the option to mix to match different packages and generate your project with TypeScript.
So it does offer a lot of nice options and it seems to constantly be getting better.
The next huge reason I'm thankful for Angular is dependency injection.
It seems kind of weird to a web developer at first, but it's a really simple concept.
You have an app with multiple components and you want to share some state or some functionality between all those components.
This is a requirement for virtually every script app.
And it becomes very hard to do as your component tree grows more complex.
In React, you basically have to either use the Context API, which is just kind of like root scope from Angular 1.
Or you have to use a library like Redux, which is going to dramatically increase your code footprint on an already complex project.
But with Angular, you can just create a service and then inject it into any component that you want.
This allows you to separate your concerns very easily no matter what your component tree looks Now, the last thing I'm thankful for is how Angular reduces complexity.
A lot of people complain that Angular is too big and bloated, but that's only because other frameworks tend to hide their complexity and it doesn't really come out until you get into a complicated app.
So let's take a look at a simple React component, and then we'll switch over to Angular.
So with React, we have a state object which may become hooks in the future which aren't really much different.
Then we'll define a render method which returns some JSX.
And this is actually another reason I'm thankful for Angular.
Learning and using JSX is pretty annoying because it's kind of like HTML, but it has all these small caveats that make you use it in a different way than you would use regular HTML.
For example, if we want to add a CSS class here, we can't just say class equals whatever.
We actually have to use class name because class is a reserved word in JavaScript.
This isn't a huge deal, of course, but it does feel like a weird abstraction to have when building a web application.
And with JSX, you'll tend to run into code readability issues.
For example, if we want to loop over a list of items, we'll need to extract this out into its own function or we can map it to a DOM element directly in the JSX.
So you either have to destructure your HTML into multiple functions or you have to embed this JavaScript directly in the template, which is hard to read in my opinion.
So let's go ahead and switch over to Angular, and we'll build this exact same component.
The nice thing about Angular is that it uses TypeScript, which both Angular and View are starting to adopt as well.
So I'm thankful for that as well.
And if we want to define our data, we can just define them as properties on this class.
Then Angular allows us to write our templates like they're regular HTML with some additional magic on top.
So instead of writing a JavaScript loop, we can just use the NG 4 directive to loop over the items in our array.
So we can write out our template with a lot less code and a way that's more readable in my opinion, assuming that you know what ng4 does.
So the idea that Angular is more complex than React or Vue is really just kind of nonsense.
If you've watched my channel for a while, you've seen me build All kinds of different demos with Angular, which would just generally not be possible with React because there's additional configuration to get through.
Again, I'm not saying one's better than the but really just wanted to highlight some of the best parts of Angular in this video.
Let me know whether you agree or disagree in the comments.
And again, make to be critical of data that's floating out around there on the interwebs, whether it supports or goes against your worldview.
I'm gonna go ahead and wrap things up there.
I'm wishing everybody a happy Thanksgiving, and I'll See you next week.

Speaker 0: Today, I wanna tell you why I'm thankful for Angular and talk about some of the advantages that it offers over other front end frameworks. If you follow Twitter, you may have seen the State of JS Survey results were just published the other day, and what you will have learned from the survey is that everybody hates Angular and everybody loves Vue and React. But, as you'll see over the next few minutes, that's not the actual reality that we live in. If you're new here, like and subscribe and please let me know what you think in the comments because this is a Very important topic. I'd like to start by saying that I'm a big fan of React and especially Vue, and this video is nothing against those frameworks or the developers that use them, but it is a problem when flawed data is used to represent the entire JavaScript population, because product managers and developers will use this data to justify their decisions.

So I've done my fair share of data analysis. I'm a top ranked Kaggle expert, and I can generally pick out when we're dealing with a bad dataset. One of the most common ways to screw up a dataset is with a sampling bias. Now I'm not implying any malintent by the creators of this survey. They actually did an awesome job with the user interface.

But they're all involved in the React community which just makes it more likely for the survey to be distributed among React developers as opposed to the JavaScript community at large. And we can actually see this in the data itself. We have about 20,000 total respondents with 13,000 being happy React developers. Now, if we look at the statistics for Angular, we'll see that the exact Inverse is true for developers who dislike or have no interest in learning Angular. Now React was definitely the most popular JavaScript library in 2018.

I am not doubting that. But what we're seeing is a flaw in the satisfaction rate. Even though everybody says it's not a competition, it's definitely competition if you've invested a lot of time in either one of these frameworks. You want to see your own framework succeed. And the big red flag for me was in the framework conclusion section where the author talks about the fall of Angular, which is simply not true outside of the echo chamber of this survey.

And we'll look at some supporting hard data in just a second here. Another problem with this sample is that the majority of the respondents come from the United States With a very small percentage of females and, for some reason, the average salary is way higher in the United States than it is in reality. I think most people are probably just lying about their salary or maybe the survey got distributed to a high percentage of Facebook employees working in the Bay Area. And on a similar note, this survey only had 20,000 total responses. My little YouTube channel has 70,000 subscribers, so that just puts in perspective how small this actual sample is of the total developer population.

I'm gonna go ahead and leave it at that. I think this survey is fun, but it's not something you should use as the basis for important decision making. So now let's look at some Hard unbiased data that we can use to get a picture of the true state of JavaScript. None of these metrics are perfect on their own, but we can use all of them together to get a general idea of how things sit. The first thing we'll look at is npm downloads.

And we can do that on npm trends.com. Angular view and React all grew in 2018, But you can see at the beginning of the year, React was getting about 3 times more downloads than Angular. And in the last 6 months, that's been reduced to about 1 and a half to 2 times more downloads. And Vue's held steady at a distant third place, but Vue gets a ton of downloads in China from other sources. So keep that in mind.

The next thing I want to look at is Jobs. First, we'll check out Stack Overflow. And if we search React Jobs, you can see we get 714 results. But if we then go search for Angular, you can see we get 380 results. So the ratio aligns almost perfectly to npm downloads.

The next thing we'll look at is freelance job postings on Upwork. Here, we'll find about a 118 jobs for React and about 66 for Angular. And again, we have roughly the same ratio. The next thing we'll take a look at is an call on Medium that claims that 78% of the Front End Developer Jobs are for React. And this is based on job postings on Indeed.

If we go to Indeed and type in React, you can see that that's absolutely true. We get way more postings for React. But if we actually look at this data, they're not React jobs, They're construction jobs with an average salary of $15 an hour. So when you read an article online, don't take it at face value. Make sure to scrutinize its data Because a lot of people just make honest mistakes and a lot of people just bullshit.

So if we look at the actual job postings on Indeed, we can type Type in React developer or React web and do the same for Angular, and we get an even distribution of jobs. And most good companies will hire based on your script and programming fundamentals, not just the fact that you know a specific framework. And the last thing I wanna look at is web traffic to the documentation for these various frameworks. We can grab this unbiased data from Alexa, and it should show the same trend that we see in the survey with Angular on the decline and React on an uptrend. But we actually see the inverse of this trend with Angular's documentation site receiving more web traffic than React in 2018.

And Vue. Js generates the most web traffic, most of which comes from China. But it's interesting that this trend is the exact inverse of what we see in npm downloads. There's probably additional data we could look at, but I'm just going to leave it there and hopefully that gives you a better picture of the real state of JavaScript. Now I wanna take a few minutes to show you why Angular has been so successful over the last couple years, because Angular has some pretty awesome superpowers that you won't find in React or Vue.

So in no particular order, we'll start with routing. In React, everything is a component or a function, so that leads to some pretty cumbersome routing. You kinda get used to doing things this way, but when you go to Angular or Vue, it's very refreshing. We're just looking at the Vue router quick start And what you'll see here is a router that's directly embedded with the component HTML. I really like to maintain a separation of concerns in my code and I feel like this just violates it.

And complex nested routing gets even more difficult to deal with. If you look at the Angular router, you define all your routes as a plain JavaScript object. So it's very clear and easy to understand. We have a path and then that path routes to a specific component. We don't have to do all this weird component stuff just to define some routes.

And And if we look at the view router here quickly, it kind of takes the same approach as Angular, which I think just makes a lot more sense. Now the next reason I'm thankful for Angular is the CLI. The Angular CLI is just in a completely different universe when it comes to generating boilerplate code, testing, and being extendable. In addition, we now have the Angular console which makes the CLI much more approachable to newcomers and allows you to use everything in a graphical user interface. The officially supported CLI tool in React is create react app.

And it doesn't really do a whole lot. It will scaffold out your initial project, but it doesn't generate components. And you'll probably end up ejecting from it after generating the initial boilerplate. The VCLI is not quite as powerful as Angular, but it does have a really nice UI. And it gives you the option to mix to match different packages and generate your project with TypeScript.

So it does offer a lot of nice options and it seems to constantly be getting better. The next huge reason I'm thankful for Angular is dependency injection. It seems kind of weird to a web developer at first, but it's a really simple concept. You have an app with multiple components and you want to share some state or some functionality between all those components. This is a requirement for virtually every script app.

And it becomes very hard to do as your component tree grows more complex. In React, you basically have to either use the Context API, which is just kind of like root scope from Angular 1. Or you have to use a library like Redux, which is going to dramatically increase your code footprint on an already complex project. But with Angular, you can just create a service and then inject it into any component that you want. This allows you to separate your concerns very easily no matter what your component tree looks Now, the last thing I'm thankful for is how Angular reduces complexity.

A lot of people complain that Angular is too big and bloated, but that's only because other frameworks tend to hide their complexity and it doesn't really come out until you get into a complicated app. So let's take a look at a simple React component, and then we'll switch over to Angular. So with React, we have a state object which may become hooks in the future which aren't really much different. Then we'll define a render method which returns some JSX. And this is actually another reason I'm thankful for Angular.

Learning and using JSX is pretty annoying because it's kind of like HTML, but it has all these small caveats that make you use it in a different way than you would use regular HTML. For example, if we want to add a CSS class here, we can't just say class equals whatever. We actually have to use class name because class is a reserved word in JavaScript. This isn't a huge deal, of course, but it does feel like a weird abstraction to have when building a web application. And with JSX, you'll tend to run into code readability issues.

For example, if we want to loop over a list of items, we'll need to extract this out into its own function or we can map it to a DOM element directly in the JSX. So you either have to destructure your HTML into multiple functions or you have to embed this JavaScript directly in the template, which is hard to read in my opinion. So let's go ahead and switch over to Angular, and we'll build this exact same component. The nice thing about Angular is that it uses TypeScript, which both Angular and View are starting to adopt as well. So I'm thankful for that as well.

And if we want to define our data, we can just define them as properties on this class. Then Angular allows us to write our templates like they're regular HTML with some additional magic on top. So instead of writing a JavaScript loop, we can just use the NG 4 directive to loop over the items in our array. So we can write out our template with a lot less code and a way that's more readable in my opinion, assuming that you know what ng4 does. So the idea that Angular is more complex than React or Vue is really just kind of nonsense.

If you've watched my channel for a while, you've seen me build All kinds of different demos with Angular, which would just generally not be possible with React because there's additional configuration to get through. Again, I'm not saying one's better than the but really just wanted to highlight some of the best parts of Angular in this video. Let me know whether you agree or disagree in the comments. And again, make to be critical of data that's floating out around there on the interwebs, whether it supports or goes against your worldview. I'm gonna go ahead and wrap things up there.

I'm wishing everybody a happy Thanksgiving, and I'll See you next week.
Today, I wanna tell you why I'm thankful for Angular and talk about some of the advantages that it offers over other front end frameworks. If you follow Twitter, you may have seen the State of JS Survey results were just published the other day, and what you will have learned from the survey is that everybody hates Angular and everybody loves Vue and React. But, as you'll see over the next few minutes, that's not the actual reality that we live in. If you're new here, like and subscribe and please let me know what you think in the comments because this is a Very important topic.
I'd like to start by saying that I'm a big fan of React and especially Vue, and this video is nothing against those frameworks or the developers that use them, but it is a problem when flawed data is used to represent the entire JavaScript population, because product managers and developers will use this data to justify their decisions. So I've done my fair share of data analysis. I'm a top ranked Kaggle expert, and I can generally pick out when we're dealing with a bad dataset. One of the most common ways to screw up a dataset is with a sampling bias. Now I'm not implying any malintent by the creators of this survey. They actually did an awesome job with the user interface. But they're all involved in the React community which just makes it more likely for the survey to be distributed among React developers as opposed to the JavaScript community at large.
data analysis
data
data management
machine learning
video gaming
And we can actually see this in the data itself. We have about 20,000 total respondents with 13,000 being happy React developers. Now, if we look at the statistics for Angular, we'll see that the exact Inverse is true for developers who dislike or have no interest in learning Angular. Now React was definitely the most popular JavaScript library in 2018. I am not doubting that. But what we're seeing is a flaw in the satisfaction rate.
Even though everybody says it's not a competition, it's definitely competition if you've invested a lot of time in either one of these frameworks. You want to see your own framework succeed. And the big red flag for me was in the framework conclusion section where the author talks about the fall of Angular, which is simply not true outside of the echo chamber of this survey. And we'll look at some supporting hard data in just a second here. Another problem with this sample is that the majority of the respondents come from the United States With a very small percentage of females and, for some reason, the average salary is way higher in the United States than it is in reality.
statistics
debate
I think most people are probably just lying about their salary or maybe the survey got distributed to a high percentage of Facebook employees working in the Bay Area.
And on a similar note, this survey only had 20,000 total responses. My little YouTube channel has 70,000 subscribers, so that just puts in perspective how small this actual sample is of the total developer population. I'm gonna go ahead and leave it at that. I think this survey is fun, but it's not something you should use as the basis for important decision making.
youtube
So now let's look at some Hard unbiased data that we can use to get a picture of the true state of JavaScript. None of these metrics are perfect on their own, but we can use all of them together to get a general idea of how things sit. The first thing we'll look at is npm downloads. And we can do that on npm trends.com. Angular view and React all grew in 2018, But you can see at the beginning of the year, React was getting about 3 times more downloads than Angular. And in the last 6 months, that's been reduced to about 1 and a half to 2 times more downloads. And Vue's held steady at a distant third place, but Vue gets a ton of downloads in China from other sources. So keep that in mind. The next thing I want to look at is Jobs. First, we'll check out Stack Overflow. And if we search React Jobs, you can see we get 714 results. But if we then go search for Angular, you can see we get 380 results. So the ratio aligns almost perfectly to npm downloads. The next thing we'll look at is freelance job postings on Upwork. Here, we'll find about a 118 jobs for React and about 66 for Angular. And again, we have roughly the same ratio. The next thing we'll take a look at is an call on Medium that claims that 78% of the Front End Developer Jobs are for React. And this is based on job postings on Indeed. If we go to Indeed and type in React, you can see that that's absolutely true. We get way more postings for React. But if we actually look at this data, they're not React jobs, They're construction jobs with an average salary of $15 an hour. So when you read an article online, don't take it at face value. Make sure to scrutinize its data Because a lot of people just make honest mistakes and a lot of people just bullshit. So if we look at the actual job postings on Indeed, we can type Type in React developer or React web and do the same for Angular, and we get an even distribution of jobs.
And most good companies will hire based on your script and programming fundamentals, not just the fact that you know a specific framework. And the last thing I wanna look at is web traffic to the documentation for these various frameworks. We can grab this unbiased data from Alexa, and it should show the same trend that we see in the survey with Angular on the decline and React on an uptrend.
google
commerce
databases
But we actually see the inverse of this trend with Angular's documentation site receiving more web traffic than React in 2018. And Vue. Js generates the most web traffic, most of which comes from China. But it's interesting that this trend is the exact inverse of what we see in npm downloads. There's probably additional data we could look at, but I'm just going to leave it there and hopefully that gives you a better picture of the real state of JavaScript. Now I wanna take a few minutes to show you why Angular has been so successful over the last couple years, because Angular has some pretty awesome superpowers that you won't find in React or Vue. So in no particular order, we'll start with routing. In React, everything is a component or a function, so that leads to some pretty cumbersome routing. You kinda get used to doing things this way, but when you go to Angular or Vue, it's very refreshing. We're just looking at the Vue router quick start And what you'll see here is a router that's directly embedded with the component HTML. I really like to maintain a separation of concerns in my code and I feel like this just violates it. And complex nested routing gets even more difficult to deal with. If you look at the Angular router, you define all your routes as a plain JavaScript object. So it's very clear and easy to understand. We have a path and then that path routes to a specific component. We don't have to do all this weird component stuff just to define some routes. And And if we look at the view router here quickly, it kind of takes the same approach as Angular, which I think just makes a lot more sense. Now the next reason I'm thankful for Angular is the CLI. The Angular CLI is just in a completely different universe when it comes to generating boilerplate code, testing, and being extendable.
In addition, we now have the Angular console which makes the CLI much more approachable to newcomers and allows you to use everything in a graphical user interface. The officially supported CLI tool in React is create react app. And it doesn't really do a whole lot. It will scaffold out your initial project, but it doesn't generate components. And you'll probably end up ejecting from it after generating the initial boilerplate. The VCLI is not quite as powerful as Angular, but it does have a really nice UI. And it gives you the option to mix to match different packages and generate your project with TypeScript. So it does offer a lot of nice options and it seems to constantly be getting better.
software development
software
The next huge reason I'm thankful for Angular is dependency injection. It seems kind of weird to a web developer at first, but it's a really simple concept. You have an app with multiple components and you want to share some state or some functionality between all those components. This is a requirement for virtually every script app. And it becomes very hard to do as your component tree grows more complex. In React, you basically have to either use the Context API, which is just kind of like root scope from Angular 1. Or you have to use a library like Redux, which is going to dramatically increase your code footprint on an already complex project. But with Angular, you can just create a service and then inject it into any component that you want. This allows you to separate your concerns very easily no matter what your component tree looks Now, the last thing I'm thankful for is how Angular reduces complexity. A lot of people complain that Angular is too big and bloated, but that's only because other frameworks tend to hide their complexity and it doesn't really come out until you get into a complicated app. So let's take a look at a simple React component, and then we'll switch over to Angular. So with React, we have a state object which may become hooks in the future which aren't really much different. Then we'll define a render method which returns some JSX. And this is actually another reason I'm thankful for Angular. Learning and using JSX is pretty annoying because it's kind of like HTML, but it has all these small caveats that make you use it in a different way than you would use regular HTML. For example, if we want to add a CSS class here, we can't just say class equals whatever. We actually have to use class name because class is a reserved word in JavaScript. This isn't a huge deal, of course, but it does feel like a weird abstraction to have when building a web application. And with JSX, you'll tend to run into code readability issues. For example, if we want to loop over a list of items, we'll need to extract this out into its own function or we can map it to a DOM element directly in the JSX. So you either have to destructure your HTML into multiple functions or you have to embed this JavaScript directly in the template, which is hard to read in my opinion. So let's go ahead and switch over to Angular, and we'll build this exact same component. The nice thing about Angular is that it uses TypeScript, which both Angular and View are starting to adopt as well. So I'm thankful for that as well. And if we want to define our data, we can just define them as properties on this class. Then Angular allows us to write our templates like they're regular HTML with some additional magic on top. So instead of writing a JavaScript loop, we can just use the NG 4 directive to loop over the items in our array. So we can write out our template with a lot less code and a way that's more readable in my opinion, assuming that you know what ng4 does. So the idea that Angular is more complex than React or Vue is really just kind of nonsense. If you've watched my channel for a while, you've seen me build All kinds of different demos with Angular, which would just generally not be possible with React because there's additional configuration to get through. Again, I'm not saying one's better than the but really just wanted to highlight some of the best parts of Angular in this video. Let me know whether you agree or disagree in the comments. And again, make to be critical of data that's floating out around there on the interwebs, whether it supports or goes against your worldview. I'm gonna go ahead and wrap things up there.
I'm wishing everybody a happy Thanksgiving, and I'll See you next week.
Today, I wanna tell you why I'm thankful for Angular and talk about some of the advantages that it offers over other front end frameworks. If you follow Twitter, you may have seen the State of JS Survey results were just published the other day, and what you will have learned from the survey is that everybody hates Angular and everybody loves Vue and React. But, as you'll see over the next few minutes, that's not the actual reality that we live in. If you're new here, like and subscribe and please let me know what you think in the comments because this is a Very important topic. I'd like to start by saying that I'm a big fan of React and especially Vue, and this video is nothing against those frameworks or the developers that use them, but it is a problem when flawed data is used to represent the entire JavaScript population, because product managers and developers will use this data to justify their decisions. So I've done my fair share of data analysis. I'm a top ranked Kaggle expert, and I can generally pick out when we're dealing with a bad dataset. One of the most common ways to screw up a dataset is with a sampling bias. Now I'm not implying any malintent by the creators of this survey. They actually did an awesome job with the user interface. But they're all involved in the React community which just makes it more likely for the survey to be distributed among React developers as opposed to the JavaScript community at large. And we can actually see this in the data itself. We have about 20,000 total respondents with 13,000 being happy React developers. Now, if we look at the statistics for Angular, we'll see that the exact Inverse is true for developers who dislike or have no interest in learning Angular. Now React was definitely the most popular JavaScript library in 2018. I am not doubting that. But what we're seeing is a flaw in the satisfaction rate. Even though everybody says it's not a competition, it's definitely competition if you've invested a lot of time in either one of these frameworks. You want to see your own framework succeed. And the big red flag for me was in the framework conclusion section where the author talks about the fall of Angular, which is simply not true outside of the echo chamber of this survey. And we'll look at some supporting hard data in just a second here. Another problem with this sample is that the majority of the respondents come from the United States With a very small percentage of females and, for some reason, the average salary is way higher in the United States than it is in reality. I think most people are probably just lying about their salary or maybe the survey got distributed to a high percentage of Facebook employees working in the Bay Area. And on a similar note, this survey only had 20,000 total responses. My little YouTube channel has 70,000 subscribers, so that just puts in perspective how small this actual sample is of the total developer population. I'm gonna go ahead and leave it at that. I think this survey is fun, but it's not something you should use as the basis for important decision making. So now let's look at some Hard unbiased data that we can use to get a picture of the true state of JavaScript. None of these metrics are perfect on their own, but we can use all of them together to get a general idea of how things sit. The first thing we'll look at is npm downloads. And we can do that on npm trends.com. Angular view and React all grew in 2018, But you can see at the beginning of the year, React was getting about 3 times more downloads than Angular. And in the last 6 months, that's been reduced to about 1 and a half to 2 times more downloads. And Vue's held steady at a distant third place, but Vue gets a ton of downloads in China from other sources. So keep that in mind. The next thing I want to look at is Jobs. First, we'll check out Stack Overflow. And if we search React Jobs, you can see we get 714 results. But if we then go search for Angular, you can see we get 380 results. So the ratio aligns almost perfectly to npm downloads. The next thing we'll look at is freelance job postings on Upwork. Here, we'll find about a 118 jobs for React and about 66 for Angular. And again, we have roughly the same ratio. The next thing we'll take a look at is an call on Medium that claims that 78% of the Front End Developer Jobs are for React. And this is based on job postings on Indeed. If we go to Indeed and type in React, you can see that that's absolutely true. We get way more postings for React. But if we actually look at this data, they're not React jobs, They're construction jobs with an average salary of $15 an hour. So when you read an article online, don't take it at face value. Make sure to scrutinize its data Because a lot of people just make honest mistakes and a lot of people just bullshit. So if we look at the actual job postings on Indeed, we can type Type in React developer or React web and do the same for Angular, and we get an even distribution of jobs. And most good companies will hire based on your script and programming fundamentals, not just the fact that you know a specific framework. And the last thing I wanna look at is web traffic to the documentation for these various frameworks. We can grab this unbiased data from Alexa, and it should show the same trend that we see in the survey with Angular on the decline and React on an uptrend. But we actually see the inverse of this trend with Angular's documentation site receiving more web traffic than React in 2018. And Vue. Js generates the most web traffic, most of which comes from China. But it's interesting that this trend is the exact inverse of what we see in npm downloads. There's probably additional data we could look at, but I'm just going to leave it there and hopefully that gives you a better picture of the real state of JavaScript. Now I wanna take a few minutes to show you why Angular has been so successful over the last couple years, because Angular has some pretty awesome superpowers that you won't find in React or Vue. So in no particular order, we'll start with routing. In React, everything is a component or a function, so that leads to some pretty cumbersome routing. You kinda get used to doing things this way, but when you go to Angular or Vue, it's very refreshing. We're just looking at the Vue router quick start And what you'll see here is a router that's directly embedded with the component HTML. I really like to maintain a separation of concerns in my code and I feel like this just violates it. And complex nested routing gets even more difficult to deal with. If you look at the Angular router, you define all your routes as a plain JavaScript object. So it's very clear and easy to understand. We have a path and then that path routes to a specific component. We don't have to do all this weird component stuff just to define some routes. And And if we look at the view router here quickly, it kind of takes the same approach as Angular, which I think just makes a lot more sense. Now the next reason I'm thankful for Angular is the CLI. The Angular CLI is just in a completely different universe when it comes to generating boilerplate code, testing, and being extendable. In addition, we now have the Angular console which makes the CLI much more approachable to newcomers and allows you to use everything in a graphical user interface. The officially supported CLI tool in React is create react app. And it doesn't really do a whole lot. It will scaffold out your initial project, but it doesn't generate components. And you'll probably end up ejecting from it after generating the initial boilerplate. The VCLI is not quite as powerful as Angular, but it does have a really nice UI. And it gives you the option to mix to match different packages and generate your project with TypeScript. So it does offer a lot of nice options and it seems to constantly be getting better. The next huge reason I'm thankful for Angular is dependency injection. It seems kind of weird to a web developer at first, but it's a really simple concept. You have an app with multiple components and you want to share some state or some functionality between all those components. This is a requirement for virtually every script app. And it becomes very hard to do as your component tree grows more complex. In React, you basically have to either use the Context API, which is just kind of like root scope from Angular 1. Or you have to use a library like Redux, which is going to dramatically increase your code footprint on an already complex project. But with Angular, you can just create a service and then inject it into any component that you want. This allows you to separate your concerns very easily no matter what your component tree looks Now, the last thing I'm thankful for is how Angular reduces complexity. A lot of people complain that Angular is too big and bloated, but that's only because other frameworks tend to hide their complexity and it doesn't really come out until you get into a complicated app. So let's take a look at a simple React component, and then we'll switch over to Angular. So with React, we have a state object which may become hooks in the future which aren't really much different. Then we'll define a render method which returns some JSX. And this is actually another reason I'm thankful for Angular. Learning and using JSX is pretty annoying because it's kind of like HTML, but it has all these small caveats that make you use it in a different way than you would use regular HTML. For example, if we want to add a CSS class here, we can't just say class equals whatever. We actually have to use class name because class is a reserved word in JavaScript. This isn't a huge deal, of course, but it does feel like a weird abstraction to have when building a web application. And with JSX, you'll tend to run into code readability issues. For example, if we want to loop over a list of items, we'll need to extract this out into its own function or we can map it to a DOM element directly in the JSX. So you either have to destructure your HTML into multiple functions or you have to embed this JavaScript directly in the template, which is hard to read in my opinion. So let's go ahead and switch over to Angular, and we'll build this exact same component. The nice thing about Angular is that it uses TypeScript, which both Angular and View are starting to adopt as well. So I'm thankful for that as well. And if we want to define our data, we can just define them as properties on this class. Then Angular allows us to write our templates like they're regular HTML with some additional magic on top. So instead of writing a JavaScript loop, we can just use the NG 4 directive to loop over the items in our array. So we can write out our template with a lot less code and a way that's more readable in my opinion, assuming that you know what ng4 does. So the idea that Angular is more complex than React or Vue is really just kind of nonsense. If you've watched my channel for a while, you've seen me build All kinds of different demos with Angular, which would just generally not be possible with React because there's additional configuration to get through. Again, I'm not saying one's better than the but really just wanted to highlight some of the best parts of Angular in this video. Let me know whether you agree or disagree in the comments. And again, make to be critical of data that's floating out around there on the interwebs, whether it supports or goes against your worldview. I'm gonna go ahead and wrap things up there. I'm wishing everybody a happy Thanksgiving, and I'll See you next week.
Today,
today
I
i
wanna
wanna
tell
tell
you
you
why
why
I'm
i'm
thankful
thankful
for
for
Angular
angular
and
and
talk
talk
about
about
some
some
of
of
the
the
advantages
advantages
that
that
it
it
offers
offers
over
over
other
other
front
front
end
end
frameworks.
frameworks
If
if
you
you
follow
follow
Twitter,
twitter
you
you
may
may
have
have
seen
seen
the
the
State
state
of
of
JS
js
Survey
survey
results
results
were
were
just
just
published
published
the
the
other
other
day,
day
and
and
what
what
you
you
will
will
have
have
learned
learned
from
from
the
the
survey
survey
is
is
that
that
everybody
everybody
hates
hates
Angular
angular
and
and
everybody
everybody
loves
loves
Vue
vue
and
and
React.
react
But,
but
as
as
you'll
you'll
see
see
over
over
the
the
next
next
few
few
minutes,
minutes
that's
that's
not
not
the
the
actual
actual
reality
reality
that
that
we
we
live
live
in.
in
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
please
please
let
let
me
me
know
know
what
what
you
you
think
think
in
in
the
the
comments
comments
because
because
this
this
is
is
a
a
Very
very
important
important
topic.
topic
I'd
i'd
like
like
to
to
start
start
by
by
saying
saying
that
that
I'm
i'm
a
a
big
big
fan
fan
of
of
React
react
and
and
especially
especially
Vue,
vue
and
and
this
this
video
video
is
is
nothing
nothing
against
against
those
those
frameworks
frameworks
or
or
the
the
developers
developers
that
that
use
use
them,
them
but
but
it
it
is
is
a
a
problem
problem
when
when
flawed
flawed
data
data
is
is
used
used
to
to
represent
represent
the
the
entire
entire
JavaScript
javascript
population,
population
because
because
product
product
managers
managers
and
and
developers
developers
will
will
use
use
this
this
data
data
to
to
justify
justify
their
their
decisions.
decisions
So
so
I've
i've
done
done
my
my
fair
fair
share
share
of
of
data
data
analysis.
analysis
I'm
i'm
a
a
top
top
ranked
ranked
Kaggle
kaggle
expert,
expert
and
and
I
i
can
can
generally
generally
pick
pick
out
out
when
when
we're
we're
dealing
dealing
with
with
a
a
bad
bad
dataset.
dataset
One
one
of
of
the
the
most
most
common
common
ways
ways
to
to
screw
screw
up
up
a
a
dataset
dataset
is
is
with
with
a
a
sampling
sampling
bias.
bias
Now
now
I'm
i'm
not
not
implying
implying
any
any
malintent
malintent
by
by
the
the
creators
creators
of
of
this
this
survey.
survey
They
they
actually
actually
did
did
an
an
awesome
awesome
job
job
with
with
the
the
user
user
interface.
interface
But
but
they're
they're
all
all
involved
involved
in
in
the
the
React
react
community
community
which
which
just
just
makes
makes
it
it
more
more
likely
likely
for
for
the
the
survey
survey
to
to
be
be
distributed
distributed
among
among
React
react
developers
developers
as
as
opposed
opposed
to
to
the
the
JavaScript
javascript
community
community
at
at
large.
large
And
and
we
we
can
can
actually
actually
see
see
this
this
in
in
the
the
data
data
itself.
itself
We
we
have
have
about
about
20,000
20,000
total
total
respondents
respondents
with
with
13,000
13,000
being
being
happy
happy
React
react
developers.
developers
Now,
now
if
if
we
we
look
look
at
at
the
the
statistics
statistics
for
for
Angular,
angular
we'll
we'll
see
see
that
that
the
the
exact
exact
Inverse
inverse
is
is
true
true
for
for
developers
developers
who
who
dislike
dislike
or
or
have
have
no
no
interest
interest
in
in
learning
learning
Angular.
angular
Now
now
React
react
was
was
definitely
definitely
the
the
most
most
popular
popular
JavaScript
javascript
library
library
in
in
2018.
2018
I
i
am
am
not
not
doubting
doubting
that.
that
But
but
what
what
we're
we're
seeing
seeing
is
is
a
a
flaw
flaw
in
in
the
the
satisfaction
satisfaction
rate.
rate
Even
even
though
though
everybody
everybody
says
says
it's
it's
not
not
a
a
competition,
competition
it's
it's
definitely
definitely
competition
competition
if
if
you've
you've
invested
invested
a
a
lot
lot
of
of
time
time
in
in
either
either
one
one
of
of
these
these
frameworks.
frameworks
You
you
want
want
to
to
see
see
your
your
own
own
framework
framework
succeed.
succeed
And
and
the
the
big
big
red
red
flag
flag
for
for
me
me
was
was
in
in
the
the
framework
framework
conclusion
conclusion
section
section
where
where
the
the
author
author
talks
talks
about
about
the
the
fall
fall
of
of
Angular,
angular
which
which
is
is
simply
simply
not
not
true
true
outside
outside
of
of
the
the
echo
echo
chamber
chamber
of
of
this
this
survey.
survey
And
and
we'll
we'll
look
look
at
at
some
some
supporting
supporting
hard
hard
data
data
in
in
just
just
a
a
second
second
here.
here
Another
another
problem
problem
with
with
this
this
sample
sample
is
is
that
that
the
the
majority
majority
of
of
the
the
respondents
respondents
come
come
from
from
the
the
United
united
States
states
With
with
a
a
very
very
small
small
percentage
percentage
of
of
females
females
and,
and
for
for
some
some
reason,
reason
the
the
average
average
salary
salary
is
is
way
way
higher
higher
in
in
the
the
United
united
States
states
than
than
it
it
is
is
in
in
reality.
reality
I
i
think
think
most
most
people
people
are
are
probably
probably
just
just
lying
lying
about
about
their
their
salary
salary
or
or
maybe
maybe
the
the
survey
survey
got
got
distributed
distributed
to
to
a
a
high
high
percentage
percentage
of
of
Facebook
facebook
employees
employees
working
working
in
in
the
the
Bay
bay
Area.
area
And
and
on
on
a
a
similar
similar
note,
note
this
this
survey
survey
only
only
had
had
20,000
20,000
total
total
responses.
responses
My
my
little
little
YouTube
youtube
channel
channel
has
has
70,000
70,000
subscribers,
subscribers
so
so
that
that
just
just
puts
puts
in
in
perspective
perspective
how
how
small
small
this
this
actual
actual
sample
sample
is
is
of
of
the
the
total
total
developer
developer
population.
population
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
leave
leave
it
it
at
at
that.
that
I
i
think
think
this
this
survey
survey
is
is
fun,
fun
but
but
it's
it's
not
not
something
something
you
you
should
should
use
use
as
as
the
the
basis
basis
for
for
important
important
decision
decision
making.
making
So
so
now
now
let's
let's
look
look
at
at
some
some
Hard
hard
unbiased
unbiased
data
data
that
that
we
we
can
can
use
use
to
to
get
get
a
a
picture
picture
of
of
the
the
true
true
state
state
of
of
JavaScript.
javascript
None
none
of
of
these
these
metrics
metrics
are
are
perfect
perfect
on
on
their
their
own,
own
but
but
we
we
can
can
use
use
all
all
of
of
them
them
together
together
to
to
get
get
a
a
general
general
idea
idea
of
of
how
how
things
things
sit.
sit
The
the
first
first
thing
thing
we'll
we'll
look
look
at
at
is
is
npm
npm
downloads.
downloads
And
and
we
we
can
can
do
do
that
that
on
on
npm
npm
trends.com.
trends.com
Angular
angular
view
view
and
and
React
react
all
all
grew
grew
in
in
2018,
2018
But
but
you
you
can
can
see
see
at
at
the
the
beginning
beginning
of
of
the
the
year,
year
React
react
was
was
getting
getting
about
about
3
3
times
times
more
more
downloads
downloads
than
than
Angular.
angular
And
and
in
in
the
the
last
last
6
6
months,
months
that's
that's
been
been
reduced
reduced
to
to
about
about
1
1
and
and
a
a
half
half
to
to
2
2
times
times
more
more
downloads.
downloads
And
and
Vue's
vue's
held
held
steady
steady
at
at
a
a
distant
distant
third
third
place,
place
but
but
Vue
vue
gets
gets
a
a
ton
ton
of
of
downloads
downloads
in
in
China
china
from
from
other
other
sources.
sources
So
so
keep
keep
that
that
in
in
mind.
mind
The
the
next
next
thing
thing
I
i
want
want
to
to
look
look
at
at
is
is
Jobs.
jobs
First,
first
we'll
we'll
check
check
out
out
Stack
stack
Overflow.
overflow
And
and
if
if
we
we
search
search
React
react
Jobs,
jobs
you
you
can
can
see
see
we
we
get
get
714
714
results.
results
But
but
if
if
we
we
then
then
go
go
search
search
for
for
Angular,
angular
you
you
can
can
see
see
we
we
get
get
380
380
results.
results
So
so
the
the
ratio
ratio
aligns
aligns
almost
almost
perfectly
perfectly
to
to
npm
npm
downloads.
downloads
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
freelance
freelance
job
job
postings
postings
on
on
Upwork.
upwork
Here,
here
we'll
we'll
find
find
about
about
a
a
118
118
jobs
jobs
for
for
React
react
and
and
about
about
66
66
for
for
Angular.
angular
And
and
again,
again
we
we
have
have
roughly
roughly
the
the
same
same
ratio.
ratio
The
the
next
next
thing
thing
we'll
we'll
take
take
a
a
look
look
at
at
is
is
an
an
call
call
on
on
Medium
medium
that
that
claims
claims
that
that
78%
78%
of
of
the
the
Front
front
End
end
Developer
developer
Jobs
jobs
are
are
for
for
React.
react
And
and
this
this
is
is
based
based
on
on
job
job
postings
postings
on
on
Indeed.
indeed
If
if
we
we
go
go
to
to
Indeed
indeed
and
and
type
type
in
in
React,
react
you
you
can
can
see
see
that
that
that's
that's
absolutely
absolutely
true.
true
We
we
get
get
way
way
more
more
postings
postings
for
for
React.
react
But
but
if
if
we
we
actually
actually
look
look
at
at
this
this
data,
data
they're
they're
not
not
React
react
jobs,
jobs
They're
they're
construction
construction
jobs
jobs
with
with
an
an
average
average
salary
salary
of
of
$15
$15
an
an
hour.
hour
So
so
when
when
you
you
read
read
an
an
article
article
online,
online
don't
don't
take
take
it
it
at
at
face
face
value.
value
Make
make
sure
sure
to
to
scrutinize
scrutinize
its
its
data
data
Because
because
a
a
lot
lot
of
of
people
people
just
just
make
make
honest
honest
mistakes
mistakes
and
and
a
a
lot
lot
of
of
people
people
just
just
bullshit.
bullshit
So
so
if
if
we
we
look
look
at
at
the
the
actual
actual
job
job
postings
postings
on
on
Indeed,
indeed
we
we
can
can
type
type
Type
type
in
in
React
react
developer
developer
or
or
React
react
web
web
and
and
do
do
the
the
same
same
for
for
Angular,
angular
and
and
we
we
get
get
an
an
even
even
distribution
distribution
of
of
jobs.
jobs
And
and
most
most
good
good
companies
companies
will
will
hire
hire
based
based
on
on
your
your
script
script
and
and
programming
programming
fundamentals,
fundamentals
not
not
just
just
the
the
fact
fact
that
that
you
you
know
know
a
a
specific
specific
framework.
framework
And
and
the
the
last
last
thing
thing
I
i
wanna
wanna
look
look
at
at
is
is
web
web
traffic
traffic
to
to
the
the
documentation
documentation
for
for
these
these
various
various
frameworks.
frameworks
We
we
can
can
grab
grab
this
this
unbiased
unbiased
data
data
from
from
Alexa,
alexa
and
and
it
it
should
should
show
show
the
the
same
same
trend
trend
that
that
we
we
see
see
in
in
the
the
survey
survey
with
with
Angular
angular
on
on
the
the
decline
decline
and
and
React
react
on
on
an
an
uptrend.
uptrend
But
but
we
we
actually
actually
see
see
the
the
inverse
inverse
of
of
this
this
trend
trend
with
with
Angular's
angular's
documentation
documentation
site
site
receiving
receiving
more
more
web
web
traffic
traffic
than
than
React
react
in
in
2018.
2018
And
and
Vue.
vue
Js
js
generates
generates
the
the
most
most
web
web
traffic,
traffic
most
most
of
of
which
which
comes
comes
from
from
China.
china
But
but
it's
it's
interesting
interesting
that
that
this
this
trend
trend
is
is
the
the
exact
exact
inverse
inverse
of
of
what
what
we
we
see
see
in
in
npm
npm
downloads.
downloads
There's
there's
probably
probably
additional
additional
data
data
we
we
could
could
look
look
at,
at
but
but
I'm
i'm
just
just
going
going
to
to
leave
leave
it
it
there
there
and
and
hopefully
hopefully
that
that
gives
gives
you
you
a
a
better
better
picture
picture
of
of
the
the
real
real
state
state
of
of
JavaScript.
javascript
Now
now
I
i
wanna
wanna
take
take
a
a
few
few
minutes
minutes
to
to
show
show
you
you
why
why
Angular
angular
has
has
been
been
so
so
successful
successful
over
over
the
the
last
last
couple
couple
years,
years
because
because
Angular
angular
has
has
some
some
pretty
pretty
awesome
awesome
superpowers
superpowers
that
that
you
you
won't
won't
find
find
in
in
React
react
or
or
Vue.
vue
So
so
in
in
no
no
particular
particular
order,
order
we'll
we'll
start
start
with
with
routing.
routing
In
in
React,
react
everything
everything
is
is
a
a
component
component
or
or
a
a
function,
function
so
so
that
that
leads
leads
to
to
some
some
pretty
pretty
cumbersome
cumbersome
routing.
routing
You
you
kinda
kinda
get
get
used
used
to
to
doing
doing
things
things
this
this
way,
way
but
but
when
when
you
you
go
go
to
to
Angular
angular
or
or
Vue,
vue
it's
it's
very
very
refreshing.
refreshing
We're
we're
just
just
looking
looking
at
at
the
the
Vue
vue
router
router
quick
quick
start
start
And
and
what
what
you'll
you'll
see
see
here
here
is
is
a
a
router
router
that's
that's
directly
directly
embedded
embedded
with
with
the
the
component
component
HTML.
html
I
i
really
really
like
like
to
to
maintain
maintain
a
a
separation
separation
of
of
concerns
concerns
in
in
my
my
code
code
and
and
I
i
feel
feel
like
like
this
this
just
just
violates
violates
it.
it
And
and
complex
complex
nested
nested
routing
routing
gets
gets
even
even
more
more
difficult
difficult
to
to
deal
deal
with.
with
If
if
you
you
look
look
at
at
the
the
Angular
angular
router,
router
you
you
define
define
all
all
your
your
routes
routes
as
as
a
a
plain
plain
JavaScript
javascript
object.
object
So
so
it's
it's
very
very
clear
clear
and
and
easy
easy
to
to
understand.
understand
We
we
have
have
a
a
path
path
and
and
then
then
that
that
path
path
routes
routes
to
to
a
a
specific
specific
component.
component
We
we
don't
don't
have
have
to
to
do
do
all
all
this
this
weird
weird
component
component
stuff
stuff
just
just
to
to
define
define
some
some
routes.
routes
And
and
And
and
if
if
we
we
look
look
at
at
the
the
view
view
router
router
here
here
quickly,
quickly
it
it
kind
kind
of
of
takes
takes
the
the
same
same
approach
approach
as
as
Angular,
angular
which
which
I
i
think
think
just
just
makes
makes
a
a
lot
lot
more
more
sense.
sense
Now
now
the
the
next
next
reason
reason
I'm
i'm
thankful
thankful
for
for
Angular
angular
is
is
the
the
CLI.
cli
The
the
Angular
angular
CLI
cli
is
is
just
just
in
in
a
a
completely
completely
different
different
universe
universe
when
when
it
it
comes
comes
to
to
generating
generating
boilerplate
boilerplate
code,
code
testing,
testing
and
and
being
being
extendable.
extendable
In
in
addition,
addition
we
we
now
now
have
have
the
the
Angular
angular
console
console
which
which
makes
makes
the
the
CLI
cli
much
much
more
more
approachable
approachable
to
to
newcomers
newcomers
and
and
allows
allows
you
you
to
to
use
use
everything
everything
in
in
a
a
graphical
graphical
user
user
interface.
interface
The
the
officially
officially
supported
supported
CLI
cli
tool
tool
in
in
React
react
is
is
create
create
react
react
app.
app
And
and
it
it
doesn't
doesn't
really
really
do
do
a
a
whole
whole
lot.
lot
It
it
will
will
scaffold
scaffold
out
out
your
your
initial
initial
project,
project
but
but
it
it
doesn't
doesn't
generate
generate
components.
components
And
and
you'll
you'll
probably
probably
end
end
up
up
ejecting
ejecting
from
from
it
it
after
after
generating
generating
the
the
initial
initial
boilerplate.
boilerplate
The
the
VCLI
vcli
is
is
not
not
quite
quite
as
as
powerful
powerful
as
as
Angular,
angular
but
but
it
it
does
does
have
have
a
a
really
really
nice
nice
UI.
ui
And
and
it
it
gives
gives
you
you
the
the
option
option
to
to
mix
mix
to
to
match
match
different
different
packages
packages
and
and
generate
generate
your
your
project
project
with
with
TypeScript.
typescript
So
so
it
it
does
does
offer
offer
a
a
lot
lot
of
of
nice
nice
options
options
and
and
it
it
seems
seems
to
to
constantly
constantly
be
be
getting
getting
better.
better
The
the
next
next
huge
huge
reason
reason
I'm
i'm
thankful
thankful
for
for
Angular
angular
is
is
dependency
dependency
injection.
injection
It
it
seems
seems
kind
kind
of
of
weird
weird
to
to
a
a
web
web
developer
developer
at
at
first,
first
but
but
it's
it's
a
a
really
really
simple
simple
concept.
concept
You
you
have
have
an
an
app
app
with
with
multiple
multiple
components
components
and
and
you
you
want
want
to
to
share
share
some
some
state
state
or
or
some
some
functionality
functionality
between
between
all
all
those
those
components.
components
This
this
is
is
a
a
requirement
requirement
for
for
virtually
virtually
every
every
script
script
app.
app
And
and
it
it
becomes
becomes
very
very
hard
hard
to
to
do
do
as
as
your
your
component
component
tree
tree
grows
grows
more
more
complex.
complex
In
in
React,
react
you
you
basically
basically
have
have
to
to
either
either
use
use
the
the
Context
context
API,
api
which
which
is
is
just
just
kind
kind
of
of
like
like
root
root
scope
scope
from
from
Angular
angular
1.
1
Or
or
you
you
have
have
to
to
use
use
a
a
library
library
like
like
Redux,
redux
which
which
is
is
going
going
to
to
dramatically
dramatically
increase
increase
your
your
code
code
footprint
footprint
on
on
an
an
already
already
complex
complex
project.
project
But
but
with
with
Angular,
angular
you
you
can
can
just
just
create
create
a
a
service
service
and
and
then
then
inject
inject
it
it
into
into
any
any
component
component
that
that
you
you
want.
want
This
this
allows
allows
you
you
to
to
separate
separate
your
your
concerns
concerns
very
very
easily
easily
no
no
matter
matter
what
what
your
your
component
component
tree
tree
looks
looks
Now,
now
the
the
last
last
thing
thing
I'm
i'm
thankful
thankful
for
for
is
is
how
how
Angular
angular
reduces
reduces
complexity.
complexity
A
a
lot
lot
of
of
people
people
complain
complain
that
that
Angular
angular
is
is
too
too
big
big
and
and
bloated,
bloated
but
but
that's
that's
only
only
because
because
other
other
frameworks
frameworks
tend
tend
to
to
hide
hide
their
their
complexity
complexity
and
and
it
it
doesn't
doesn't
really
really
come
come
out
out
until
until
you
you
get
get
into
into
a
a
complicated
complicated
app.
app
So
so
let's
let's
take
take
a
a
look
look
at
at
a
a
simple
simple
React
react
component,
component
and
and
then
then
we'll
we'll
switch
switch
over
over
to
to
Angular.
angular
So
so
with
with
React,
react
we
we
have
have
a
a
state
state
object
object
which
which
may
may
become
become
hooks
hooks
in
in
the
the
future
future
which
which
aren't
aren't
really
really
much
much
different.
different
Then
then
we'll
we'll
define
define
a
a
render
render
method
method
which
which
returns
returns
some
some
JSX.
jsx
And
and
this
this
is
is
actually
actually
another
another
reason
reason
I'm
i'm
thankful
thankful
for
for
Angular.
angular
Learning
learning
and
and
using
using
JSX
jsx
is
is
pretty
pretty
annoying
annoying
because
because
it's
it's
kind
kind
of
of
like
like
HTML,
html
but
but
it
it
has
has
all
all
these
these
small
small
caveats
caveats
that
that
make
make
you
you
use
use
it
it
in
in
a
a
different
different
way
way
than
than
you
you
would
would
use
use
regular
regular
HTML.
html
For
for
example,
example
if
if
we
we
want
want
to
to
add
add
a
a
CSS
css
class
class
here,
here
we
we
can't
can't
just
just
say
say
class
class
equals
equals
whatever.
whatever
We
we
actually
actually
have
have
to
to
use
use
class
class
name
name
because
because
class
class
is
is
a
a
reserved
reserved
word
word
in
in
JavaScript.
javascript
This
this
isn't
isn't
a
a
huge
huge
deal,
deal
of
of
course,
course
but
but
it
it
does
does
feel
feel
like
like
a
a
weird
weird
abstraction
abstraction
to
to
have
have
when
when
building
building
a
a
web
web
application.
application
And
and
with
with
JSX,
jsx
you'll
you'll
tend
tend
to
to
run
run
into
into
code
code
readability
readability
issues.
issues
For
for
example,
example
if
if
we
we
want
want
to
to
loop
loop
over
over
a
a
list
list
of
of
items,
items
we'll
we'll
need
need
to
to
extract
extract
this
this
out
out
into
into
its
its
own
own
function
function
or
or
we
we
can
can
map
map
it
it
to
to
a
a
DOM
dom
element
element
directly
directly
in
in
the
the
JSX.
jsx
So
so
you
you
either
either
have
have
to
to
destructure
destructure
your
your
HTML
html
into
into
multiple
multiple
functions
functions
or
or
you
you
have
have
to
to
embed
embed
this
this
JavaScript
javascript
directly
directly
in
in
the
the
template,
template
which
which
is
is
hard
hard
to
to
read
read
in
in
my
my
opinion.
opinion
So
so
let's
let's
go
go
ahead
ahead
and
and
switch
switch
over
over
to
to
Angular,
angular
and
and
we'll
we'll
build
build
this
this
exact
exact
same
same
component.
component
The
the
nice
nice
thing
thing
about
about
Angular
angular
is
is
that
that
it
it
uses
uses
TypeScript,
typescript
which
which
both
both
Angular
angular
and
and
View
view
are
are
starting
starting
to
to
adopt
adopt
as
as
well.
well
So
so
I'm
i'm
thankful
thankful
for
for
that
that
as
as
well.
well
And
and
if
if
we
we
want
want
to
to
define
define
our
our
data,
data
we
we
can
can
just
just
define
define
them
them
as
as
properties
properties
on
on
this
this
class.
class
Then
then
Angular
angular
allows
allows
us
us
to
to
write
write
our
our
templates
templates
like
like
they're
they're
regular
regular
HTML
html
with
with
some
some
additional
additional
magic
magic
on
on
top.
top
So
so
instead
instead
of
of
writing
writing
a
a
JavaScript
javascript
loop,
loop
we
we
can
can
just
just
use
use
the
the
NG
ng
4
4
directive
directive
to
to
loop
loop
over
over
the
the
items
items
in
in
our
our
array.
array
So
so
we
we
can
can
write
write
out
out
our
our
template
template
with
with
a
a
lot
lot
less
less
code
code
and
and
a
a
way
way
that's
that's
more
more
readable
readable
in
in
my
my
opinion,
opinion
assuming
assuming
that
that
you
you
know
know
what
what
ng4
ng4
does.
does
So
so
the
the
idea
idea
that
that
Angular
angular
is
is
more
more
complex
complex
than
than
React
react
or
or
Vue
vue
is
is
really
really
just
just
kind
kind
of
of
nonsense.
nonsense
If
if
you've
you've
watched
watched
my
my
channel
channel
for
for
a
a
while,
while
you've
you've
seen
seen
me
me
build
build
All
all
kinds
kinds
of
of
different
different
demos
demos
with
with
Angular,
angular
which
which
would
would
just
just
generally
generally
not
not
be
be
possible
possible
with
with
React
react
because
because
there's
there's
additional
additional
configuration
configuration
to
to
get
get
through.
through
Again,
again
I'm
i'm
not
not
saying
saying
one's
one's
better
better
than
than
the
the
but
but
really
really
just
just
wanted
wanted
to
to
highlight
highlight
some
some
of
of
the
the
best
best
parts
parts
of
of
Angular
angular
in
in
this
this
video.
video
Let
let
me
me
know
know
whether
whether
you
you
agree
agree
or
or
disagree
disagree
in
in
the
the
comments.
comments
And
and
again,
again
make
make
to
to
be
be
critical
critical
of
of
data
data
that's
that's
floating
floating
out
out
around
around
there
there
on
on
the
the
interwebs,
interwebs
whether
whether
it
it
supports
supports
or
or
goes
goes
against
against
your
your
worldview.
worldview
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
I'm
i'm
wishing
wishing
everybody
everybody
a
a
happy
happy
Thanksgiving,
thanksgiving
and
and
I'll
i'll
See
see
you
you
next
next
week.
week
success
The speakers discuss the benefits of Angular in front end frameworks, including flawed data and the need for React developers to prioritize their decisions. They also discuss the success of Angular in React, including its use of router and CLI tool, and the importance of dependency injection in creating app with multiple components. The success of Angular is highlighted, including its use of a router and CLI tool, and the creation of a React app with multiple components. The process of creating a React app with multiple components is also discussed, along with the use of Angular and TypeScript.
State of JavaScript - Real Analysis of Angular, React, and Vue
Today, I wanna tell you why I'm thankful for Angular and talk about some of the advantages that it offers over other front end frameworks. If you follow Twitter, you may have seen the State of JS Survey results were just published the other day, and what you will have learned from the survey is that everybody hates Angular and everybody loves Vue and React. But, as you'll see over the next few minutes, that's not the actual reality that we live in. If you're new here, like and subscribe and please let me know what you think in the comments because this is a Very important topic. I'd like to start by saying that I'm a big fan of React and especially Vue, and this video is nothing against those frameworks or the developers that use them, but it is a problem when flawed data is used to represent the entire JavaScript population, because product managers and developers will use this data to justify their decisions. So I've done my fair share of data analysis. I'm a top ranked Kaggle expert, and I can generally pick out when we're dealing with a bad dataset. One of the most common ways to screw up a dataset is with a sampling bias. Now I'm not implying any malintent by the creators of this survey. They actually did an awesome job with the user interface. But they're all involved in the React community which just makes it more likely for the survey to be distributed among React developers as opposed to the JavaScript community at large. And we can actually see this in the data itself. We have about 20,000 total respondents with 13,000 being happy React developers. Now, if we look at the statistics for Angular, we'll see that the exact Inverse is true for developers who dislike or have no interest in learning Angular. Now React was definitely the most popular JavaScript library in 2018. I am not doubting that. But what we're seeing is a flaw in the satisfaction rate. Even though everybody says it's not a competition, it's definitely competition if you've invested a lot of time in either one of these frameworks. You want to see your own framework succeed. And the big red flag for me was in the framework conclusion section where the author talks about the fall of Angular, which is simply not true outside of the echo chamber of this survey. And we'll look at some supporting hard data in just a second here. Another problem with this sample is that the majority of the respondents come from the United States With a very small percentage of females and, for some reason, the average salary is way higher in the United States than it is in reality. I think most people are probably just lying about their salary or maybe the survey got distributed to a high percentage of Facebook employees working in the Bay Area. And on a similar note, this survey only had 20,000 total responses. My little YouTube channel has 70,000 subscribers, so that just puts in perspective how small this actual sample is of the total developer population. I'm gonna go ahead and leave it at that. I think this survey is fun, but it's not something you should use as the basis for important decision making. So now let's look at some Hard unbiased data that we can use to get a picture of the true state of JavaScript. None of these metrics are perfect on their own, but we can use all of them together to get a general idea of how things sit. The first thing we'll look at is npm downloads. And we can do that on npm trends.com. Angular view and React all grew in 2018, But you can see at the beginning of the year, React was getting about 3 times more downloads than Angular. And in the last 6 months, that's been reduced to about 1 and a half to 2 times more downloads. And Vue's held steady at a distant third place, but Vue gets a ton of downloads in China from other sources. So keep that in mind. The next thing I want to look at is Jobs. First, we'll check out Stack Overflow. And if we search React Jobs, you can see we get 714 results. But if we then go search for Angular, you can see we get 380 results. So the ratio aligns almost perfectly to npm downloads. The next thing we'll look at is freelance job postings on Upwork. Here, we'll find about a 118 jobs for React and about 66 for Angular. And again, we have roughly the same ratio. The next thing we'll take a look at is an call on Medium that claims that 78% of the Front End Developer Jobs are for React. And this is based on job postings on Indeed. If we go to Indeed and type in React, you can see that that's absolutely true. We get way more postings for React. But if we actually look at this data, they're not React jobs, They're construction jobs with an average salary of $15 an hour. So when you read an article online, don't take it at face value. Make sure to scrutinize its data Because a lot of people just make honest mistakes and a lot of people just bullshit. So if we look at the actual job postings on Indeed, we can type Type in React developer or React web and do the same for Angular, and we get an even distribution of jobs. And most good companies will hire based on your script and programming fundamentals, not just the fact that you know a specific framework. And the last thing I wanna look at is web traffic to the documentation for these various frameworks. We can grab this unbiased data from Alexa, and it should show the same trend that we see in the survey with Angular on the decline and React on an uptrend. But we actually see the inverse of this trend with Angular's documentation site receiving more web traffic than React in 2018. And Vue. Js generates the most web traffic, most of which comes from China. But it's interesting that this trend is the exact inverse of what we see in npm downloads. There's probably additional data we could look at, but I'm just going to leave it there and hopefully that gives you a better picture of the real state of JavaScript. Now I wanna take a few minutes to show you why Angular has been so successful over the last couple years, because Angular has some pretty awesome superpowers that you won't find in React or Vue. So in no particular order, we'll start with routing. In React, everything is a component or a function, so that leads to some pretty cumbersome routing. You kinda get used to doing things this way, but when you go to Angular or Vue, it's very refreshing. We're just looking at the Vue router quick start And what you'll see here is a router that's directly embedded with the component HTML. I really like to maintain a separation of concerns in my code and I feel like this just violates it. And complex nested routing gets even more difficult to deal with. If you look at the Angular router, you define all your routes as a plain JavaScript object. So it's very clear and easy to understand. We have a path and then that path routes to a specific component. We don't have to do all this weird component stuff just to define some routes. And And if we look at the view router here quickly, it kind of takes the same approach as Angular, which I think just makes a lot more sense. Now the next reason I'm thankful for Angular is the CLI. The Angular CLI is just in a completely different universe when it comes to generating boilerplate code, testing, and being extendable. In addition, we now have the Angular console which makes the CLI much more approachable to newcomers and allows you to use everything in a graphical user interface. The officially supported CLI tool in React is create react app. And it doesn't really do a whole lot. It will scaffold out your initial project, but it doesn't generate components. And you'll probably end up ejecting from it after generating the initial boilerplate. The VCLI is not quite as powerful as Angular, but it does have a really nice UI. And it gives you the option to mix to match different packages and generate your project with TypeScript. So it does offer a lot of nice options and it seems to constantly be getting better. The next huge reason I'm thankful for Angular is dependency injection. It seems kind of weird to a web developer at first, but it's a really simple concept. You have an app with multiple components and you want to share some state or some functionality between all those components. This is a requirement for virtually every script app. And it becomes very hard to do as your component tree grows more complex. In React, you basically have to either use the Context API, which is just kind of like root scope from Angular 1. Or you have to use a library like Redux, which is going to dramatically increase your code footprint on an already complex project. But with Angular, you can just create a service and then inject it into any component that you want. This allows you to separate your concerns very easily no matter what your component tree looks Now, the last thing I'm thankful for is how Angular reduces complexity. A lot of people complain that Angular is too big and bloated, but that's only because other frameworks tend to hide their complexity and it doesn't really come out until you get into a complicated app. So let's take a look at a simple React component, and then we'll switch over to Angular. So with React, we have a state object which may become hooks in the future which aren't really much different. Then we'll define a render method which returns some JSX. And this is actually another reason I'm thankful for Angular. Learning and using JSX is pretty annoying because it's kind of like HTML, but it has all these small caveats that make you use it in a different way than you would use regular HTML. For example, if we want to add a CSS class here, we can't just say class equals whatever. We actually have to use class name because class is a reserved word in JavaScript. This isn't a huge deal, of course, but it does feel like a weird abstraction to have when building a web application. And with JSX, you'll tend to run into code readability issues. For example, if we want to loop over a list of items, we'll need to extract this out into its own function or we can map it to a DOM element directly in the JSX. So you either have to destructure your HTML into multiple functions or you have to embed this JavaScript directly in the template, which is hard to read in my opinion. So let's go ahead and switch over to Angular, and we'll build this exact same component. The nice thing about Angular is that it uses TypeScript, which both Angular and View are starting to adopt as well. So I'm thankful for that as well. And if we want to define our data, we can just define them as properties on this class. Then Angular allows us to write our templates like they're regular HTML with some additional magic on top. So instead of writing a JavaScript loop, we can just use the NG 4 directive to loop over the items in our array. So we can write out our template with a lot less code and a way that's more readable in my opinion, assuming that you know what ng4 does. So the idea that Angular is more complex than React or Vue is really just kind of nonsense. If you've watched my channel for a while, you've seen me build All kinds of different demos with Angular, which would just generally not be possible with React because there's additional configuration to get through. Again, I'm not saying one's better than the but really just wanted to highlight some of the best parts of Angular in this video. Let me know whether you agree or disagree in the comments. And again, make to be critical of data that's floating out around there on the interwebs, whether it supports or goes against your worldview. I'm gonna go ahead and wrap things up there. I'm wishing everybody a happy Thanksgiving, and I'll See you next week.
The speakers discuss the benefits of Angular in front end frameworks, including flawed data and the need for React developers to prioritize their decisions. They also discuss the success of Angular in React, including its use of router and CLI tool, and the importance of dependency injection in creating app with multiple components. The success of Angular is highlighted, including its use of a router and CLI tool, and the creation of a React app with multiple components. The process of creating a React app with multiple components is also discussed, along with the use of Angular and TypeScript.