Finally! Someone who actually knows angular. Tired of seeing react plebs who studied a 1week angular course and then started posting about how "bad" angular is.
As a back-end developer with years of experience in OOP who has tried a bit of both, the angular application structure makes so much sense. The structure helps me to relate and carry over the OO Design principles that I am used to following when I build APIs and Server-Side Web Applications to the Client side. Angular definitely feels like the more professional framework that enterprises would use. On the other hand, React does have this "coolness factor" that might work in a startup environment.
I have read around 50 blogs/articles seen around 50 videos on this topic in past 6 months or so... and This is hands down the best discussion on this topic I have ever heard. Thanks for this wise talk. I pushes me towards angular more
Great video thanks! IMO, after using both technologies for a while. I personally think Angular is much more intuitive and feature rich than React. If you're a backend developer you will really appreciate what Angular is trying to do. But if you started off with Javascript as your principle programming language then you might like the react approach more. When you have team with mixed expertise its hard to enforce best practise because each project has its own way doing things. (Imagine the painful discussions that you will have to explain while code reviewing). Where as Angular on the other hand doesn't matter if you worked in company A or Company B. The moment you open a Angular project you feel like you are at home.
Best video I found which focuses on the real differences between React and Angular, from a neutral point of view. While many discuss about the differences between the 2 by focusing on who made these technologies and what companies are using them... Thank you for this in depth analysis!
I am a react developer, and I learned the basics of angular. I would be very happy if someone who is an angular developer and who likes angular could respond to my reasons for for preferring react. I'm not trying to debate on which is better. I would be grateful if I was proven wrong if I'm wrong on any of my points. Why I prefer react, compared to angular: 1. I feel working in react makes me a better vanilla JS developer, which makes the skills I gain more transferable to other technologies in the JS world. As an example, instead of using *ngFor, a directive specific for angular, in react we use .map(), a method that is part of vanilla JS! 2. React is suitable for enterprise projects if the team implements good architecture and strict conventions. TypeScript has became a norm. 3. Apparently one advantage of angular is it comes with "everything you need". However, how true is that? Angular comes with the basic things you need, like routing. Even though routing is not provided by react, it is a convention that 90% of projects use the same tool (react-router-dom) for routing. If you are using SSR, you can specialize in a framework like Next.js and then, again, you only use routing built into that framework. It is not like 10 react projects use 10 different tools for routing. When we talk about more complex things, like graph visualization, angular, of course, does not come with a built in solution for this. In fact, angular does not even have its own state management - NgRx is not maintained by the angular team (just as redux is not maintained by the react team). 4. For more complex things (e.g. graph visualization) react has a greater amount of 3rd party tools available. 5. React has a stronger community (more tutorials, youtube channels, easier to find answers, etc.) 6. Angular is named exceptionally similar to angular.js, which makes googling for answers more frustrating. 7. Functional components make code cleaner and easier to debug (because of immutable state and pure functions). 8. Angular seemed as an overkill in some ways. As example, if we want to output a string to the html, and uppercase it, angular includes an "upperacse" pipe. Why does a pipe exist, when vanilla JS has a built in .toUpperCase method? One more thing I need to learn that is not reusable outside angular. 9. React Native 10. React has less breaking changes (I am not referring to transition from angular.js to angular2, but to transition from angular 2 to higher).
i know both and i agree with you at most of points you indecated .. Angular has its own syntax.. i was laughing about this with a friend and i said ironically "angular is a programming language" .. but there are things angular do better imo: 1- forms .. forms are a disaster in react and you will end up use external library such as react hook form .. comparing with Angular which has strong two types of forms ( Template driven forms & Reactive forms ) which fits almost all your use cases. 2- you don't need a state management mainly in angular because you simply can use services to share data between components without respecting the nesting level of child/parent .. and services i found it smater and easier than context api ( useContext hook IMO ) and fits perfectly all my needs ( if you use mobX in react it is the closest approach to angular services ) 3- after changing react to the new syntax.. we lost many of components states during initializing and destroyong .. we rely on usaEffect hook and this is only what we get .. on the other hand in angular you can control every single state change of component life cycle using (constructor .. ngOnInit .. and other stuff mentioned in the docs ) and this leads to better security and better routing guard 4- angular local state is auto handled without hooks .. just make a variable and bind it to html and that's it .. u don't have to deal with rerendring component cycle and decide between useRef or useState .. it smartly change without performance drops 5- modules and lazy loading in angular helps big application to initial load faster and perfectly separating some parts of application to others ( think of admin panel & normal user panel & public pages .. for example ) .. and next.js solved most of this actually .. but i talk about react itself. 6- angular cli and speedness of creating parts of angular.. it really speeds the process IMO
From a Angular Devs perspective - MO, after using both technologies for a while. I personally think Angular is much more intuitive and feature rich than React. If you're a backend developer you will really appreciate what Angular is trying to do. But if you started off with Javascript as your principle programming language then you might like the react approach more. When you have team with mixed expertise its hard to enforce best practise because each project has its own way doing things. (Imagine the painful discussions that you will have to go thru while code reviewing). Where as Angular on the other hand doesn't matter if you worked in company A or Company B. The moment you open a Angular project you feel like you are at home.
Great content... I am right now at certain stage learning Angular and it has been an amazing experience. The knowledge base is great and When learning it is awesome for it gives you defined structures supported on the beautiful Typescript. I would say that Angular, more than a framework is a platform with all the "toys" included... React is just a Lybrary and it's hard to define things with it
Great talk especially on the Angular side. Nevertheless, I feel like React is not treated for what it is: just a "UI library". As such, comparing it to Angular, a full frontend framework, makes it look pointless for any large-scale project. And yet, many big web applications are built with it. I think it makes much more sense now to compare Angular with Nextjs and understand when to choose one over the other. They both come with many features such as routing, internationalisation, SSR, SSG, environment variables etc. Not here to criticize Angular, I appreciate the framework a lot, and I really resonated with what was said about it in this discussion ! :)
No, react is not a "UI Library". Please enough with this garbage argument. React is a library, created with the sole intention to build other libraries on top of it, witch tougether will be turned in to a framework. So it's not a simple as comparing a library to a framework. We are comparing a predefined library stack (angular/cor, angular/router etc..) to a couple of libraries that work together like a framework that are build with the intention of working together as a framework,
@@ylioo You get my point though. If i remember correctly, in their talk they discuss the fact that the core React library doesn't have many built-in features which Angular has (routing, SSR, http client ...), and that these React features can be found in other libraries built by the open-source community and not necessarily by React's core team. So if you strictly take the core React library, then yes that is "just" a UI library and it wouldn't make much sense to compare it to Angular. If you take React with external libraries to pretty much have a feature-rich framework, then i agree with you, you could more meaningfully compare both. But i still believe that it's even more interesting to compare Angular and Nextjs since both directly provide us with similar built-in features, and these will be part of the core library, and wouldn't require external libraries.
It lacks a very important point, i.e what kind of applications should use what technology? Or How do i decide on a technology purely from the kind of app i am going to develop.
what kind of applications should use what technology? They both do same things, it's just where are you more comfortable. How do I decide on a technology purely from the kind of app I am going to develop? Based on what you are more comfortable with.
@@TD-sh6wd That cannot be just 1 factor for deciding the technology. Just comfort cannot be overlooked by the stability, maintainability of a particular technology.
The Angular mug on the table gave me the initial impression that this video was gonna be biased toward Angular, but it's not. (You should have also a React mug there!) I consider myself primarily an Angular dev, but almost 2 years ago had to switch to React for a large project. I went in with basic experience with React, but I picked up stuff quickly. After a short time I thought I was an expert!.... but then realize "oh crap", how can I do advanced forms. So I had to choose a forms library (Formik) and learn that. Then I thought I was good until I realized that I need advanced form validation. So then searched around for a library for that. I guess that's not a huge deal since there is a learning curve with Angular forms and validation (built-in). But it could be a big deal if devs join the project and they're not familiar with the additional libraries that we're using. Or if I move to a different company and they're not using the extra libraries that I know. Currently at work I'm using React, but in my free time I keep up to date and practice Angular. It took me a while to learn it all so I don't want forget it all! 😅 Also playing around a lot with Vue, which has many similarities with Angular, in the way you conditionally bind and loop stuff in the template, with *ngIf, and *ngFor. So much cleaner than how you do that in React.
Definitely pro Angular here, the architecture is great and it is organized, separate the view from business logic, I dont like having html on my javascript, it is just an abomination.
Maybe Thomas has Nx Framework of Nrwl.io in the back of his mind when he is sharing his technologies advice: - - Monorepo (sharing code with building Libraries and using them in Apps) - Angular or React - Typescript ( to "not build a readonly Javascript Application" - Anders Hejlsberg) - RxJs - Reactive Architecture ( build Rxjs-pipelines like you have on your background wall behind Thomas and Jesse) - Jest (modern Unit Testing) - Cypress (Angular leaves Protractor in favor of Cypress ) StencilJs is the Outlier but I agree should be done this way, but hardly anybody does it
Well, the monorepo pattern did initially come from NX. BUT, since Angular CLI v6 added support for libraries, you can still do that without NX (with just a bit of manual tweaking when it comes to import paths). Sure, NX comes with more benefits regarding the monorepo pattern, but in a simpler (structural) form, you can also achieve that using only the Angular CLI. That being said, for a while now NX supports multiple technologies/frameworks (front-end and back-end), including React. I think they're doing an awesome job! And that's how I'd start a React project right now (if I'll finally manage to allocate some time to get into React - at least I'm planning to). Without having a look yet, I'm just hoping that NX enforces some structure and a more rigid/best practice oriented styleguide for React as well. Because, in my opinion, that's the major downside of React (and it's not React's fault necessarily, of course). From what I've heard from colleagues/friends from the React world, if they look at N different projects, each of them can look completely different - and I don't mean the obvious, like "well, each project is different, d'oh!", but in terms of a base structure and enforced/opinionated way of doing the common things at least, so the project looks as clean as possible and also when a new dev comes into a new project, they can get up to speed quicker, things are more familiar because we would all do at least some base/common things roughly the same way, following the same style guide, structure and some enforced (or at least strongly suggested) practices/way of doing things. I'm not saying that with Angular you can't go out of your way to have a bad structure and do things against bad practices and against the style-guide, and have a messy project, but it's a bit harder to do so, and at any point someone can simply point at the styleguide and/or universally adopted best-practices, structure and so on, and say "look, this is not how this should be done, it's wrong" without having to convince them that it's not just a personal preference and spend time explaining a bunch of things. I, for example, am not that great when it comes to explain stuff :) P. S. right about Cypress and Jest, of course (and if I'd start a new Angular project right now, without NX, the first thing I'd do is to switch to Jest before anythign else). As for RxJs & TypeScript, Angular comes with those out of the box, they're not NX specific. Or maybe I misunderstood, and the only thing you wanted to point out coming from the NX world was the first (double-dashed --) item in the list, regarding the Monorepo pattern. P.P.S. After having watched the entire video, I think Thomas didn't actually have NX in the back of his mind when he said "Monorepo", but rather the simple fact that "if you have multiple apps, even some in Angular some in React, it would be recommended for them to live inside of the same repository, in order to easily reuse as much code as possible between them" (even without NX), so not just between Angular apps/libs, but between React and Angular. Would NX help greatly with that? Sure :D
@@MStoica Thank' s a lot for the detailed answer. I think you are right. Angular itself can be setup with a workspace and then add projects (apps in Angular) and Libraries. Thomas for sure is aware of Nx. Nx is just a good practice for enterprise practices. Since Angular is loosing attractivity in the public , it would be interesting to hear from Thomas who is an Angular Expert what the similarities and what the differencies are. Angular is what I concentrate on: My saying is: Angular is 5D - Directives - Data Binding - Decorators - Dependency Injection - Dirty Checking These are the most basic concepts even in today Angular 12 (2021). All rest is sugarified syntax, Angular Compiler and Webpack. ( brad green and misko hevery 2013: Angular is 3D, th-cam.com/video/HCR7i5F5L8c/w-d-xo.html)
Finally! Someone who actually knows angular. Tired of seeing react plebs who studied a 1week angular course and then started posting about how "bad" angular is.
As a back-end developer with years of experience in OOP who has tried a bit of both, the angular application structure makes so much sense. The structure helps me to relate and carry over the OO Design principles that I am used to following when I build APIs and Server-Side Web Applications to the Client side. Angular definitely feels like the more professional framework that enterprises would use. On the other hand, React does have this "coolness factor" that might work in a startup environment.
I have read around 50 blogs/articles seen around 50 videos on this topic in past 6 months or so... and This is hands down the best discussion on this topic I have ever heard.
Thanks for this wise talk.
I pushes me towards angular more
Great video thanks! IMO, after using both technologies for a while. I personally think Angular is much more intuitive and feature rich than React. If you're a backend developer you will really appreciate what Angular is trying to do. But if you started off with Javascript as your principle programming language then you might like the react approach more. When you have team with mixed expertise its hard to enforce best practise because each project has its own way doing things. (Imagine the painful discussions that you will have to explain while code reviewing). Where as Angular on the other hand doesn't matter if you worked in company A or Company B. The moment you open a Angular project you feel like you are at home.
Best video I found which focuses on the real differences between React and Angular, from a neutral point of view.
While many discuss about the differences between the 2 by focusing on who made these technologies and what companies are using them... Thank you for this in depth analysis!
I am a react developer, and I learned the basics of angular. I would be very happy if someone who is an angular developer and who likes angular could respond to my reasons for for preferring react. I'm not trying to debate on which is better. I would be grateful if I was proven wrong if I'm wrong on any of my points.
Why I prefer react, compared to angular:
1. I feel working in react makes me a better vanilla JS developer, which makes the skills I gain more transferable to other technologies in the JS world. As an example, instead of using *ngFor, a directive specific for angular, in react we use .map(), a method that is part of vanilla JS!
2. React is suitable for enterprise projects if the team implements good architecture and strict conventions. TypeScript has became a norm.
3. Apparently one advantage of angular is it comes with "everything you need". However, how true is that? Angular comes with the basic things you need, like routing. Even though routing is not provided by react, it is a convention that 90% of projects use the same tool (react-router-dom) for routing. If you are using SSR, you can specialize in a framework like Next.js and then, again, you only use routing built into that framework. It is not like 10 react projects use 10 different tools for routing. When we talk about more complex things, like graph visualization, angular, of course, does not come with a built in solution for this. In fact, angular does not even have its own state management - NgRx is not maintained by the angular team (just as redux is not maintained by the react team).
4. For more complex things (e.g. graph visualization) react has a greater amount of 3rd party tools available.
5. React has a stronger community (more tutorials, youtube channels, easier to find answers, etc.)
6. Angular is named exceptionally similar to angular.js, which makes googling for answers more frustrating.
7. Functional components make code cleaner and easier to debug (because of immutable state and pure functions).
8. Angular seemed as an overkill in some ways. As example, if we want to output a string to the html, and uppercase it, angular includes an "upperacse" pipe. Why does a pipe exist, when vanilla JS has a built in .toUpperCase method? One more thing I need to learn that is not reusable outside angular.
9. React Native
10. React has less breaking changes (I am not referring to transition from angular.js to angular2, but to transition from angular 2 to higher).
i know both and i agree with you at most of points you indecated .. Angular has its own syntax.. i was laughing about this with a friend and i said ironically "angular is a programming language" .. but there are things angular do better imo:
1- forms .. forms are a disaster in react and you will end up use external library such as react hook form .. comparing with Angular which has strong two types of forms ( Template driven forms & Reactive forms ) which fits almost all your use cases.
2- you don't need a state management mainly in angular because you simply can use services to share data between components without respecting the nesting level of child/parent .. and services i found it smater and easier than context api ( useContext hook IMO ) and fits perfectly all my needs ( if you use mobX in react it is the closest approach to angular services )
3- after changing react to the new syntax.. we lost many of components states during initializing and destroyong .. we rely on usaEffect hook and this is only what we get .. on the other hand in angular you can control every single state change of component life cycle using (constructor .. ngOnInit .. and other stuff mentioned in the docs ) and this leads to better security and better routing guard
4- angular local state is auto handled without hooks .. just make a variable and bind it to html and that's it .. u don't have to deal with rerendring component cycle and decide between useRef or useState .. it smartly change without performance drops
5- modules and lazy loading in angular helps big application to initial load faster and perfectly separating some parts of application to others ( think of admin panel & normal user panel & public pages .. for example ) .. and next.js solved most of this actually .. but i talk about react itself.
6- angular cli and speedness of creating parts of angular.. it really speeds the process IMO
From a Angular Devs perspective - MO, after using both technologies for a while. I personally think Angular is much more intuitive and feature rich than React. If you're a backend developer you will really appreciate what Angular is trying to do. But if you started off with Javascript as your principle programming language then you might like the react approach more. When you have team with mixed expertise its hard to enforce best practise because each project has its own way doing things. (Imagine the painful discussions that you will have to go thru while code reviewing). Where as Angular on the other hand doesn't matter if you worked in company A or Company B. The moment you open a Angular project you feel like you are at home.
Great content... I am right now at certain stage learning Angular and it has been an amazing experience. The knowledge base is great and When learning it is awesome for it gives you defined structures supported on the beautiful Typescript. I would say that Angular, more than a framework is a platform with all the "toys" included... React is just a Lybrary and it's hard to define things with it
In Angular your application can exist without the UI. I get it
Great talk especially on the Angular side. Nevertheless, I feel like React is not treated for what it is: just a "UI library". As such, comparing it to Angular, a full frontend framework, makes it look pointless for any large-scale project. And yet, many big web applications are built with it.
I think it makes much more sense now to compare Angular with Nextjs and understand when to choose one over the other. They both come with many features such as routing, internationalisation, SSR, SSG, environment variables etc.
Not here to criticize Angular, I appreciate the framework a lot, and I really resonated with what was said about it in this discussion ! :)
No, react is not a "UI Library". Please enough with this garbage argument. React is a library, created with the sole intention to build other libraries on top of it, witch tougether will be turned in to a framework.
So it's not a simple as comparing a library to a framework. We are comparing a predefined library stack (angular/cor, angular/router etc..) to a couple of libraries that work together like a framework that are build with the intention of working together as a framework,
@@ylioo You get my point though. If i remember correctly, in their talk they discuss the fact that the core React library doesn't have many built-in features which Angular has (routing, SSR, http client ...), and that these React features can be found in other libraries built by the open-source community and not necessarily by React's core team.
So if you strictly take the core React library, then yes that is "just" a UI library and it wouldn't make much sense to compare it to Angular. If you take React with external libraries to pretty much have a feature-rich framework, then i agree with you, you could more meaningfully compare both.
But i still believe that it's even more interesting to compare Angular and Nextjs since both directly provide us with similar built-in features, and these will be part of the core library, and wouldn't require external libraries.
There are few online contents to learn Angular compare to React. And that is pretty bad for a framework that has a steep learning curve.
To the point!!! Great content
Nice and informative video.
Very good talk, thanks
Great video! Very good point!
It lacks a very important point, i.e what kind of applications should use what technology? Or How do i decide on a technology purely from the kind of app i am going to develop.
what kind of applications should use what technology?
They both do same things,
it's just where are you more comfortable.
How do I decide on a technology purely from the kind of app I am going to develop?
Based on what you are more comfortable with.
@@TD-sh6wd That cannot be just 1 factor for deciding the technology. Just comfort cannot be overlooked by the stability, maintainability of a particular technology.
The Angular mug on the table gave me the initial impression that this video was gonna be biased toward Angular, but it's not. (You should have also a React mug there!)
I consider myself primarily an Angular dev, but almost 2 years ago had to switch to React for a large project. I went in with basic experience with React, but I picked up stuff quickly. After a short time I thought I was an expert!.... but then realize "oh crap", how can I do advanced forms. So I had to choose a forms library (Formik) and learn that. Then I thought I was good until I realized that I need advanced form validation. So then searched around for a library for that. I guess that's not a huge deal since there is a learning curve with Angular forms and validation (built-in). But it could be a big deal if devs join the project and they're not familiar with the additional libraries that we're using. Or if I move to a different company and they're not using the extra libraries that I know.
Currently at work I'm using React, but in my free time I keep up to date and practice Angular. It took me a while to learn it all so I don't want forget it all! 😅 Also playing around a lot with Vue, which has many similarities with Angular, in the way you conditionally bind and loop stuff in the template, with *ngIf, and *ngFor. So much cleaner than how you do that in React.
The Best explanation...
The electrician secretly wanted to be a plumber, or vice versa.
I wish more architects would choose Angular. Resume-based development with React has put all of the jobs in a less than ideal choice.
this guy is a GOAT
Big love for React
Angular always
Pretty much.... React brought web development back to the stone age
Definitely pro Angular here, the architecture is great and it is organized, separate the view from business logic, I dont like having html on my javascript, it is just an abomination.
Maybe Thomas has Nx Framework of Nrwl.io in the back of his mind when he is sharing his technologies advice:
- - Monorepo (sharing code with building Libraries and using them in Apps)
- Angular or React
- Typescript ( to "not build a readonly Javascript Application" - Anders Hejlsberg)
- RxJs - Reactive Architecture ( build Rxjs-pipelines like you have on your background wall behind Thomas and Jesse)
- Jest (modern Unit Testing)
- Cypress (Angular leaves Protractor in favor of Cypress )
StencilJs is the Outlier but I agree should be done this way, but hardly anybody does it
Well, the monorepo pattern did initially come from NX. BUT, since Angular CLI v6 added support for libraries, you can still do that without NX (with just a bit of manual tweaking when it comes to import paths). Sure, NX comes with more benefits regarding the monorepo pattern, but in a simpler (structural) form, you can also achieve that using only the Angular CLI.
That being said, for a while now NX supports multiple technologies/frameworks (front-end and back-end), including React. I think they're doing an awesome job! And that's how I'd start a React project right now (if I'll finally manage to allocate some time to get into React - at least I'm planning to). Without having a look yet, I'm just hoping that NX enforces some structure and a more rigid/best practice oriented styleguide for React as well. Because, in my opinion, that's the major downside of React (and it's not React's fault necessarily, of course). From what I've heard from colleagues/friends from the React world, if they look at N different projects, each of them can look completely different - and I don't mean the obvious, like "well, each project is different, d'oh!", but in terms of a base structure and enforced/opinionated way of doing the common things at least, so the project looks as clean as possible and also when a new dev comes into a new project, they can get up to speed quicker, things are more familiar because we would all do at least some base/common things roughly the same way, following the same style guide, structure and some enforced (or at least strongly suggested) practices/way of doing things.
I'm not saying that with Angular you can't go out of your way to have a bad structure and do things against bad practices and against the style-guide, and have a messy project, but it's a bit harder to do so, and at any point someone can simply point at the styleguide and/or universally adopted best-practices, structure and so on, and say "look, this is not how this should be done, it's wrong" without having to convince them that it's not just a personal preference and spend time explaining a bunch of things. I, for example, am not that great when it comes to explain stuff :)
P. S. right about Cypress and Jest, of course (and if I'd start a new Angular project right now, without NX, the first thing I'd do is to switch to Jest before anythign else). As for RxJs & TypeScript, Angular comes with those out of the box, they're not NX specific. Or maybe I misunderstood, and the only thing you wanted to point out coming from the NX world was the first (double-dashed --) item in the list, regarding the Monorepo pattern.
P.P.S. After having watched the entire video, I think Thomas didn't actually have NX in the back of his mind when he said "Monorepo", but rather the simple fact that "if you have multiple apps, even some in Angular some in React, it would be recommended for them to live inside of the same repository, in order to easily reuse as much code as possible between them" (even without NX), so not just between Angular apps/libs, but between React and Angular.
Would NX help greatly with that? Sure :D
@@MStoica Thank' s a lot for the detailed answer.
I think you are right. Angular itself can be setup with a workspace and then add projects (apps in Angular) and Libraries.
Thomas for sure is aware of Nx. Nx is just a good practice for enterprise practices.
Since Angular is loosing attractivity in the public , it would be interesting to hear from Thomas who is an Angular Expert what the similarities and what the differencies are.
Angular is what I concentrate on:
My saying is: Angular is 5D
- Directives
- Data Binding
- Decorators
- Dependency Injection
- Dirty Checking
These are the most basic concepts even in today Angular 12 (2021). All rest is sugarified syntax, Angular Compiler and Webpack.
( brad green and misko hevery 2013: Angular is 3D, th-cam.com/video/HCR7i5F5L8c/w-d-xo.html)
To sum up what he said, basically it depends on you. But contact us and we will help you use either.
lol, choose none of those.
I can tell he doesnt program 😒