This story begins when our development team started working on a new web-based system. We needed tools to help build a smooth solution and boost the development process, where possible. Upfront, we had to answer the following questions:
– What should we choose for quick UI development and, at the same time, help HTML/CSS and PHP/JS developers work more efficiently?
– Should we create modular front-end applications for external systems/websites using already-existing functionality?
After some research and discussion, we made a list of candidate frameworks. It wasn’t long before we had two finalists: ReactJS (or simply React) and Angular.
Certainly, it is not an easy task to compare React JS and Angular. Both of them have very relevant features. Both of them deserve to be used for our single-app applications (SPA). But as soon as we had to choose only one, we created a list of benefits and drawbacks for both possible workflows and compared the results.
We targeted speed of coding, overall friendliness and learning time with respect to our previous skills and experience. We expected the framework would allow us to:
- change app structure with relative ease
- make code refactoring quickly and easily
- adapt the app codebase to constant changes as per client’s requirements
Here is the list of pros and cons relevant to our development team when we compared these two tools based on the reasons above.
Speed of coding and general friendliness
TypeScript with Angular. In our opinion, TypeScript provides the best intellisenseCode autocomplete developer experience available in the world today. Static types are great primarily for developer tooling. You save time when you get inline documentation about things like function call signature when you code. There is something satisfying about building a typed function interface and knowing that the next developer who comes along will know how to invoke the function without having to read docs or look at the source code.
There is also an abundance of Angular things like forms & validators, etc., which are available for React users. The major difference between Angular and React is that Angular offers architecture as part of the package, but React is solely a library for app display management, not a complete framework. React users will not always find the best solutions in obvious places. Instead, React users rely more on community best practices, blog articles, and other learning resources to identify the best choices. When you develop an SPA with React, you must build an entire app architecture or find something similar. Not when using Angular.
The drawback using Angular is the size of application. An Angular production bundle is 2-3 times bigger than a React-based one. This affects loading time and page rendering when the user opens a web page for the first time. All other page renderings, React included, load very quickly.
Angular templates are basically an enhanced form of standard HTML. HTML developers do not have to spend precious time on learning something completely new instead of working on the project. But they still have to know a bit of Angular DSL stuff like ‘*ngIf’ and ‘*ngFor’.
On the other hand, React has no templates. Developers have to build modules from scratch; whereas, they can just take an Angular-based template and start modifying it according to project requirements.
One great feature found in React, but not in Angular, is that React has JSX, an XML-like JavaScript extension combining the best features of JavaScript and HTML. Its compiling time is comparable with JavaScript compile time.
Learning time, skills and experience
One great thing about JSX format (and React!): you can target more than just HTML with it. You can transfer a Web app code to a mobile platform relatively easily. You can compile a mobile app using web app source code while React transforms it into mobile native elements (React Native) making fast apps.
However, the disadvantage using JSX is that it does not exactly line up 1:1 with HTML tags. It’s a Frankenstein hybrid of JavaScript APIs and markup language. As the result, HTML/CSS developers have to learn its quirks, such as using ‘className’ instead of ‘class‘ , ‘<Link>’ instead of ‘<a>’ and other non-standard HTML features. It can affect the time of UI development. Alternatively, when using React, PHP/JS developers will have to spend part of their time helping HTML/CSS developers do their work.
Our development team had some experience in using AngularJS. Therefore, the previous experience will boost the learning of Angular.
In summary
Both ReactJS and Angular frameworks support development of custom components. Both exist to build UIs on the front end of the application stack. Angular has a few extra things under the hood; it simply has “batteries-included” philosophy.
As a result, we opted for Angular. Our department spent less time building an Angular app than we would have with React (certainly, this depends on the skill set of the existing team). Because of this, we not only could start product development earlier, but also finish it earlier while creating more readable and maintainable source code.
