My Experience: Learning Angular 5 as a long time react developer
April 3, 2018I started with frontend programming 8 years back with jQuery and AngularJS. I later learned React. For project requirement, I recently learned Angular 5.
Update: I opted for library “ngxs” instead of ngrx for state management. It is much more elegant (IMO) and have very less boilerplate. I feel much more productive with ngxs than with ngrx. Now Angular has grown on me and I feel very productive!
Here is my opinion on how these frameworks fare in comparison:
Angular 2+ vs React
* Learning curve
Angular: Huge learning curve. There are many of new concepts to learn which are simply non-existent in react world. React: Relatively small learning curve.
* Time required to be productive Angular: 4 Days
React: 1.5 Days
* Coding language
Angular: Typescript - took 0.5 day to learn. Editor shows type errors upfront, it saves time. It definitely has advantages, but those come at an overhead of all the extra code and thinking you have to do.
React: Es6+. No brainer. Coding is faster as compared to typescript. Editor will not show type errors due to lack of types. You can enjoy all the cutting edge ES Next features with babel, which may not be possible with typescript.
* Boilerplate
Angular: Needs more boilerplate code than react. Ngrx needs less boilerplate code than redux. React: There is boilerplate, but not as much as Angular. Functional components can be one liners.
* State Management
Angular: Ngrx (Ng-Redux), even if I knew most of the state management concepts, took me 1 Day to learn. Learning material was not as qualitative as redux. React: Redux took approx. 0.5 day to learn.
-- Both of above are identical in many ways.
* Form Handling
Angular: Angular reactive forms - official angular package - is highly productive thing. Json extraction, async validation - everything is there. I am loving it - it makes life so much easier without getting in way.
React: Plain react form handling is PITA. I have tried redux-form and it felt strange. But there are other form handling libs I have not tried yet - they may be good.
* UI Component libraries
Angular: Official Material component library is fast and polished, but lot of components are missing from it (e.g. breadcrumbs). There are some really nice 3rd party libraries like Clarity. Overall average components ecosystem.
React: There are large number of polished component libraries - Ant UI is one of the best.
* Third party individual, specialized UI components
Angular: Lots of 3rd party components, but variety is little disappointing. React: Rich components system, you will find components for every imaginable thing.
* Dev tools
Angular: Augury is main dev tool. Its powerful but not sure if its official. Ngrx uses redux devtools. Apart from these, not many devtools. Overall disappointing tools ecosystem. React: React devtools are powerful and official. There are many 3rd party ones like "Reselect devtools" and "Storybook". Even redux has its own many 3rd party dev tools.
* Command line tools
Angular: Has powerful cli tools. It can generate components, directives etc. on the fly. It is huge time saver. React: lacks any cli tool (apart from create react app, which is covered separately and can't generate individual components).
* Project bootstrapping
Angular: Angular cli generates basic project. Its good enough and cli tool gets updated frequently. It supports SCSS. React: create-react-app is the bootstrapping tool that generates basic project. Its pretty good. It does not support SCSS.
* How productive I felt after learning?
Angular: All the extra angular things - made me less productive than React. I felt overwhelmed with these new but not-so-productive concepts. React: I felt much more productive instantly. Writing components is pleasure.
* Unit testing
Angular: Protractor - angular testing tool was a nightmare in angular 1.x. I haven't tries it's modern Angular avatar, so cat say if it is any good. React: Jest and enzyme is a pleasure to work with. Unit testing is effortless.
* Community
Angular: I found there is good dev community around angular, but smaller than React. React: has gigantic dev community. You can easily find multiple solutions, advices on problems and approaches.
* My overall experience
Angular: Good, but not great. I must mention that in some areas like form handling, it is much better than react though. React: Development experience in React is delightful. With each new version, it becomes even more wonderful.