July 30, 2017
At work we recently switched from angular 1.6 to react 15 and I have been frequently asked how would I compare the two frameworks. Everyone can read up the technical differences between the two frameworks themselves, but I want to offer my subjective thoughts on the matter, what comes to my daily work. Disclaimer: I have used angular for roughly 3 years and react for only a few months.
To be honest, I think both of the frameworks are extremely similar and don’t notice a huge difference when developing apps. Both of the frameworks promote that you should have reusable UI components. This usually means JS, HMTL and CSS in a separated folder under components folder. Or however you want to structure your project. To develop these components you use the same attribute passing, life cycle events and you “bind” values to the HTML. In one case with ng-repeat and ng-bind in the other case through map and {}. This is the bread and butter. Different syntax same concept. Angular is already older, but it has adopted a lot of best practices and features from the rest of the frameworks. Some might say speed, but in all honesty I don’t notice any difference yet. All my angular projects have been fast and the limiting factor has always been REST calls and not whether a list took 0.001s longer to render. So for me the difference is minimal, if you know how to develop with angular then switching to react won’t be an issue.
The Syntax
There is however one thing that actually makes angular and VueJS more appealing to me than React. It is the syntax, I really like that in Angular HTML is kind of the central point. With the help of directives and filters you can pretty much write some components in just HTML and it makes the output so clear to me. I know instantly what is generated by this component, this could be called HTML-centric. React on the other hand reminds me of JSP. I never liked the idea of writing Java and HTML alternatively. It just looks damn ugly and weird, and JSX fits into the same category. And I am not hating on the having it in the same file or close to each other. VueJS has JS, HTML and CSS all in the same file, it is beautiful, I love it. What I don’t like in React components is the mess of render functions, split up HTML everywhere in the JS code, that seems to happen every time. I find it hard to follow and understand what is the component even supposed to do. You could split it up, but then you end up searching 10 files instead of 2 and half of it is boilerplate and import statements.
The switch
The frameworks are so similar that there really is no reason to worry if your team is thinking of switching. We developed projects with angular now we do with react and at the end of the day what it comes down is not whether you picked the right framework, but rather are you following the best practices and what you develop.