Angular vs React
It’s a matter of preference
Aside from the speed at which these tools are being released, it has sparked a war between developers. Angular Vs React! This eventually leads us to the million dollar question.
What’s the best javascript framework? Which one should I use?
Well… there is no “best” one. IMHO.
One day it feels like React is the cool thing to do, then Angular comes out and wows us with something equally impressive. What’s that? You’re using VueJS now? It’s everything Angular and React are not?! Hot damn!
I’ll give my pros and cons of each framework and offer some suggestions depending on team size and goals.
Angular
Angular is a full fledged framework. Its built on TypeScript which can be great or terrible depending who you ask. It gives web developers java/c# like features (+ es6) and compiles code down into compatible javascript to run in the browser. Those who like strongly typed languages should love TS!
Overall I really enjoy working with TypeScript. It can be a bit rough at first, but then you dust off the rust from your C# days your like “OMG yes! Where has this structure & error checking been my whole life?!”. (FWIW TypeScript can be used anywhere … not really an “Angular” thing).
The big sell with Angular is that it provides a whole toolkit and box to operate in. This is great for large teams without knowing where to start. Everything is right there for you.
It also helps provide consistency through strict contracts of your methods and data. It feels, dare I say, like a real object oriented language. The structure can give those who are not JavaScript rockstars a nice environment to work in with a path to follow.
Yes we can have a style guide, yes we could lint the hell out of it … but it feels like a ton of effort to wire these tools together just to ensure we don’t piss all over the project.
While Angular doesn’t work with a Virtual Dom, it does have concepts of optimizing code for increased performance within the browser. Angular utilizes a run-time compiler that optimizes our js/templates for friendlier javascript vms. Developers can even perform this compilation ahead of time (AOT) to reduce code allowing for huge leaps in performance as well.
An Angular app can be bootstrapped with a variety of platform bindings to enable it to run in different environments. Fear not Angular devs, you too can write truly native mobile apps.
The Good
- No need to go shopping for groceries. Everything is there for you minus any third party library might need.(routing, networking, components, utility services all there out of the box)
- Utilizes a strongly typed language (TypeScript). Gives all devs a path to follow and contracts to abide by.
- Provides platform optimizations for different environments to our code (web, native, etc) via AoT & JiT Compilation.
- Easy Inheritance model to follow. Everything flows down from the top node within a component tree.
The Bad
- Big pill to swallow. It felt like I needed a good understanding of a lot of pieces/concepts to start to going.
- Integrating a normal JS library with the TypeScript can be really annoying
- Everything requires wrapping into the way Angular likes it. Importing a JS/TS file requires you to wrap or re-write it in something like an Angular service to then use of “Inject” into components.
- Can feel overkill for small projects
React
React is a piece of the puzzle. An impressive piece that provides components in a Virtual Dom. React’s big thing is abstraction from the DOM and application state.
We’ve heard it before, the Document Object Model or “DOM” was never built for the dynamic web apps of today. It just flat out sucks when it comes to performance. So React went about solving this with by abstracting itself away from the DOM.
In React you work with an object representation of the DOM. React maintains two snapshots, one original and one of your updated changes. It then compares the two to find the difference.
Once it identifies the differences, it makes the change in the real DOM to be as efficient as possible. This results in a high performing web app that touches the DOM as little as possible. Super slick.
This abstraction of the DOM also allows React to run in different environments like native mobile and virtual headsets.
In React, there is a huge emphasis on “State”. Application state is for the mutations that happen within a component, like your data. Only the component that owns that state can modify it directly. You can open up methods to change that state to other components, kind of like a class with public methods on it. This keeps your components and data super laser focused. We always know who changed the state of our component or where the “single point of truth” lives.
The Good
- Easy to get started and become productive quickly.
- Integration with other JS modules is a breeze. Just import/require and boom.
- Emphasis on component state.
- Everything (JSX/JS) in one file can be pretty sweet. It helped keep everything super isolated and compact.
- Abstraction away from the DOM allows it to operate more efficiently and in other environments.
The Bad
- A lot of moving parts. You never really use just “React” alone and tend to rely on a lot of other little packages for this and that. It can be a little annoying/confusing.
- You’re always working against the diffing algorithm in the virtual dom. To get the most juice out of our squeeze we need to do little things here and there like marking repeated elements with IDs. Sometimes the code we write can have negative impacts on how React does this.
- JSX Syntax is not 1 for 1 like HTML … (class=’ ‘ vs className=’’).
- Not a lot of structure to go off. Someone new to JavaScript/FrontEnd dev could get into a mess or easily lost.
- Everything (JSX/JS) in one file can be pretty nasty sometimes. If you work in a large team and designers need to modify templates, they are in for a treat when they see a ton of code littered throughout the markup.
Conclusion
All these frameworks are great and build upon very similar (if not identical) core concepts. Everything is moving towards a component based architecture where logic is encapsulated and reusable throughout one or more applications. Either Angular, React, or Vue will get you from A to B.
I think if you are a cross functional team doing lots of development (frontend, backend, middleware) or have a large project, then check out Angular.
If your group is highly skilled in JavaScript and like the idea of templates and logic being self contained in a single file, give React a try. React is also great to use in a variety of ways … a piece of the project or the whole project!
While comparing Angular and React you might have noticed how similar they are. They both offer the same benefits but go about different ways of doing it.
- Browser optimizations (Virtual DOM vs AOT compilation)
- Mobile apps with Native UI (React Native vs NativeScript)
- Developer tools for rapid development (create-react-app vs angular-cli)
- Data Types/Strict Typing (Flow vs TypeScript)
Ultimately I think React is easier for a developer to get started in and integrate with third party libraries. The React community has largely benefited from not going through the big re-write Angular did from 1 → 2. Tons and tons of tools/components out there for you to utilize in your React apps.
Angular really starts to shine in large scale applications when you have multiple developers with their hand in the cookie jar. The new way of Angular on TypeScript has been out for a couple years now and momentum looks like its really starting to pick up.
