A practical comparison of React and Angular 2, as we select a front-end framework for the Ascent app.
Why A Front-End Framework?
Our javascript is well-organized so far, but consists only of jQuery and plain javascript. This works great for small one-off scripts, but makes it difficult to create larger more complex applications. We have some intensive front-end projects coming up that will require a more robust front-end framework to guide our work and encourage consistency.
Starting Point
Our comparison began with the selection of React and Angular 2 as our top candidates for evaluation. There are certainly other valuable front-end frameworks, and our choice here is purely anecdotal. I’ve been hearing good things about both React and Angular for a number of years. Vue.js has been getting some buzz more recently but I think it’s too soon to go all-in. Ember has been panned for being too complicated and/or prescriptive, and while I could get past that it’s also been end-of-life’d in favor of Glimmer. Sounds like they’re moving in the right direction but I don’t want to get caught up in that churn.
Ultimately we narrowed the initial field by listening to the parts of our communities that have been writing a lot of javascript the last few years. Seems as good a way as any!
But how to choose between React and Angular? Since any choice comes with the risk of being wrong, we evaluated not only how well a solution solves our problems, but also actively sought to anticipate fatal flaws. I like to begin with the former, and all along the way keep my eyes closely peeled for the latter.
Similarities
React and Angular share many similar concepts, for example both use actions and reducers as fundamental organizing principles. If you can write in one framework, you’d need some time to ramp up on the other but it wouldn’t be entirely foreign. Maybe akin to a ruby/python transition. Both have smart/dumb components - dumb components are more modular and generic, smart components have more messy business logic.
Both frameworks support automated testing, though React might have a slight edge.
Both frameworks are supported across major browsers. You might need a polyfill here and there but in general devs aren’t spending a lot of time on browser-specific issues.
Code and Developer Experience Comparison
Data Binding
React doesn’t include any state management but is commonly used with redux or mobx, which provide state management. The dominant approach is one-way data binding. You can use redux with Angular as well, but it’ll probably feel like overkill since Angular already has two-way data binding build in. Angular is most often used with two-way data binding.
This is one of the biggest distinctions between the two frameworks. If you’re looking for one-way data binding, go with React. If you want two-way data binding, Angular is going to be a more natural fit. If you don’t have a strong preference, read on!
Build Process
React is easier to get up and running, the Angular build process has a bit of a learning curve.
Opinionation
There’s usually a “right” way to do something in Angular, React is more open-ended. Both will be able to grow with you for a long time and support large projects. If you haven’t been doing a ton of front-end you might prefer having the guidance Angular provides. If you’re a seasoned front-end dev you might prefer the flexibility of React.
Libraries
React uses a LOT of libraries, but the library ecosystem is mature and there’s usually one available to do what you need. Angular has many important use cases already built into the framework, leveraging maybe as many libraries as rails. When you do happen to need something the framework hasn’t considered, the Angular library ecosystem is comparable to React.
Files and Languages
React uses a single combined jsx file for logic and display. This file contains javascript, some HTML, and React “components” which are a vaguely XML-ish syntax. It’s nice to see everything compactly related to each other in this manner, but can sometimes be difficult to envision the resulting page. The generated HTML might be significantly different than the original jsx source code.
Angular uses separate HTML and typescript files, though there’s some javascript in the HTML too. Javascript inside the HTML is often written inside a string (e.g. an onchange handler). This spreads your code out a little more, but you’re able to directly edit the HTML of your page instead of relying on an intermediary.
Documentation
Neither framework has a heavy advantage when it comes to documentation, both have relatively consistent official docs. Both also have a similar volume of questions and responses on StackOverflow.
Other Considerations
Native
This isn’t part of our evaluation criteria at Ascent so I didn’t dive deeply here, but for what it’s worth everyone seems to love React Native. Angular’s competitor, Ionic, isn’t as well regarded.
Hiring
I’ve heard from recruiters that many Angular devs are looking to get into React, not many React devs are looking to get into Angular. There are people who will only take React jobs, not many people who make Angular a condition of employment. Most rails shops are using React on the frontend. A quick review of major job sites shows equal demand.
ThoughtWorks Radar
React is listed as “adopt”, Angular 2 is listed as “assess”. There’s a middle stage called “trial” which Angular 2 has not yet reached. Angular 1 never reached “adopt” status and is now marked as “hold”.
Decision
Both frameworks would be a reasonable choice for a new front-end project. Neither has obvious deal-breakers for standard projects, nor any super-strong opinions that might cause undue friction for mainstream use cases.
Between the ThoughtWorks evaluation, strong advocacy from our networks, and the hiring climate, React has a small edge over Angular 2 and we’re adopting React here at Ascent.
Are you a React dev? Join us!