Angular 4 compared to React/Redux
Our company often does Angular projects so I’ve done a number of Angular 4 projects already and, currently, it’s a love/hate relationship. I wanted to try React so I wrote a side-project that uses React with Redux. This is my high-level comparison between the two.
Angular Requires a Lot of Ceremony
When adding a component in Angular, there’s a number of files that must be added. There’s a module file, html file, main ts file, and routing file (and possibly scss & spec files). I use the Angular CLI, which helps, but it’s still a lot. Also, if my component needs to use another component then things get interesting. Do I need to add it to my module file? If so, under imports or declarations? How about providers? Also, I might need to add it to the app’s module file (for things like ng-bootstrap, etc).
This is quite a bit of overhead.
React Requires Very Little Ceremony
In React, if you create a component, you create that file and that’s all (maybe you want an scss file too). And, if you need to include the component, then you import it and use it directly in your JSX. Simple.
Now, I’m not talking about external components that make changes to the store. These are definitely on another level. However, for something like react-bootstrap, the user would just import the components he needs and use.
Angular Requires Typescript & RXJS
When learning new frameworks, it’s expected that you’ll go down the path of “how does this work” for a bit. Angular adds to that trip with needing to know Typescript and RXJS. As a software developer, it’s normal to be continually learning and Angular definitely kicks that up a notch.
React Requires JSX
JSX is a the “HTML” returned by any component and it definitely takes some getting used to. There’s special ways to do ‘if’ statements, and foreach’s are pretty much all performed via the ‘map’ function. More than once, I’d get stuck wondering how I was to implement something in JSX and it’s not always obvious by the error as what’s wrong. Stack Overflow could usually help but not always.
React’s Store Reminds Me of an Angular Service
React (with Redux) has something called a Store and it’s used to keep shared data. By default, it doesn’t survive a page reload, and you wouldn’t expect it to. With Redux, there’s only one store, but you can place anything that you’d like to in it.
An Angular service is a singleton, and as such, you could use it to store shared data as well. It’s most common use is for api calls, but definitely not the only use.
Angular’s CLI is Amazing
The CLI is great. It handles live-reload, setting up web pack, copying over specific environment files, you name it. This thing makes it so you rarely have to mess with WebPack or any other build component. It will also stub out your components/directives for you. I only have good things to say about the CLI and I wish React had something like this.
This is a small aside that I wanted to add.
Using ES2015 seems to be the way to go, and I like having classes. However, I dislike having to use source-maps. To debug something, you must add debugger flags in your code and you eventually have them sprinkled all through your code base. Will there ever be a day that we don’t have to do this? That would be quite nice.
There’s definitely more that I can talk about and I will probably make a part two to this article. At this point, I’m frustrated at Angular for completely rewriting the code-base, but it’s done and there’s nothing I can do about it. The framework is a lot faster than version 1 and I suppose it would scale better with large projects.
That being said, creating a project with React was breath of fresh air. There’s a lot of freedoms that it allows for the developer because it doesn’t do everything. It’s a solid baseline and that is all. Is it better than Angular? Nah.
So which should you use? At this point, it comes down to personal preference vs the application needs. React is made to be really fast, and for apps in which different views need to share data, it’s great.
However, if you have an app that has a lot of form data, you may want to use Angular. It handles forms & inputs really well.