Angular / React / Vue pros and cons.
A question most developers will ask themselves in 2018.
For the last 2,5 years I’ve been working for a consultancy company developing Angular Applications (AngularJS, Angular 1.5, and finally Angular 4!), and I got a nanodegree in React / Redux / React Native. All of the above, gave me a good understanding of both frameworks.
I’ve recently joined a new company, and I’ve been challenged to propose a new alternative to an existing Angular 1.5 Application. The API will be upgraded to a second version and with that comes the need of rewriting it. Also, the app needs to be upgraded either to angular 4 or another framework. The stable version will stay live.
Please keep in mind that this article is only my personal opinion, inspired by some articles I read, and based on my personal experience working with these three frameworks.
I resisted the urge to immediately suggest the one I’m more comfortable and experienced with (Angular) and decided to do some research, while trying to compile as much information around the pros and cons of these three trendy frameworks.
This is not about what best suits me, but what is the most adequate for a startup company setting up a new team with different profiles (ui design, frontend and backend), with the ambition to keep on growing.
Other issues to be taken into consideration: “how easily can we find qualified talent?”, and “how fast a new team member can start being productive?”.
The Challenge:
- Rewrite an Angular 1.5 application
- Use Micro-frontends concepts and reusable components
- Easily maintainable
- Easily scalable
- Allow visual customisation
- Short training window before project starts
- Tight deadline
Quick wins:
- Possible fully/partial integration with third party systems (they could be another React, Angular or Vue PWA or simple Websites)
- Easy enough for a team with members of different levels of experience and to involve designers.
#1 — Angular
Angular is a “all-in-one” Framework, that provides developers almost everything out of the box. Everything is setup from routing to http requests handling. I believe that adopting Typescript was a huge improvement. The learning curve is now also smaller than it was in previous versions thanks to its robust CLI, that removes the need to know many of the low level details for simple apps. The fact that there are already setup conventions and predefined implementation methodologies, is a huge plus.
Pros:
- Big community and code owned and maintained by Google.
- Typescript and intelisense.
- Existing community conventions. Defined implementation methodology.
- Is a MVC framework.
- Reusing the legacy code from the current Angular 1.5 app will be faster.
Cons:
- Steep learning curve.
- Is verbose and complex.
- Requires learning Typescript and is more programmer-oriented.
#2 — React
React is the most famous javascript library with the biggest community and ecosystem. In React, everything is pure JavaScript. All components express their UI within render functions using JSX (declarative XML-like syntax that works within JavaScript) to merge HTML structures with logic. It focuses on rendering Views but still allows your projects to scale, adding extra packages.
Pros:
- Biggest community and code owned and maintained by Facebook.
- Big ecosystem
- Flexibility
- Scalable
- Can be used for native and web apps
- Medium learning curve
- Fast rendering with Virtual-DOM
Cons:
- Requires to learn JSX and is more programmer-oriented.
- It’s kind of verbose. Writing components isn’t as straight forward as pure HTML & JS
- Being too flexible in structure can be problematic
- Community conventions are still developing. So far there is no defined methodology on how to implement React.
- In React, everything is just JavaScript
- Legacy code from the current Angular 1.5 needs a total rewrite in JSX
#3 — Vue
Vue (pronounced /vjuː/, like view) is one of the fastest growing libraries. Its high-speed rendering, efficient component operation and simplicity of code are some of its core strengths. Like React, Vue is designed from the ground up to be incrementally adoptable meaning that the core library is focused on the view layer only but still allows your projects to scale, by adding extra packages. What distinguishes Vue is its simplicity.
Pros:
- Backed by Laravel and Alibaba. Big players are starting to adopt the framework.
- Simplicity of the syntax and short learning curve for newcomers
- Uncomplicated structure
- Features a lot of concepts from Angular 1 and React
- Flexibility. Can be easily setup with Typescript, JSX, …
- Fast rendering with Virtual-DOM
Cons:
- Owned by one person, maintained by a small team. https://www.patreon.com/evanyou
- Being too flexible in structure can be problematic
- Legacy code from the current Angular 1.5 will need some convertion.
Comparative Table
Usage examples
So how about a small test to compare the way the same feature looks in each of these frameworks?
A simple todo component with a material design theme: An input, an add button and a list of tasks with mark as complete and delete options.
Angular
React
Vue
Conclusion:
All three frameworks are capable of delivering top notch Websites or PWA (Progressive Web Apps) . In the end it all comes to personal taste and programming style... But, wait, what?! Did you see these examples?!
I value simplicity a lot. I’m a KISS (Keep It Simple, Stupid!) principle defender. Based on that…
Vue has won my attention! I’m actually surprised with the outcome!
Just by looking at the structure in Vue I was able to recognise both Angular and React influences. What actually blew me away is how simple it looks, how easy it is to build something, and how I’ve immediately felt able to code. Even better, the core ‘business’ logic is isolated and easy to maintain.
I will miss Angular (never easy to leave your comfort zone!), but I cannot ignore all the advantages of Vue: learning curve, coding speed and maintenance, flexible setup (being able to upgrade in the future to Typescript, or to be able to use JSX for example) and its simplicity (improving the collaboration among the UI, FE and BE teams).
All of the above made me change my mindset and got me super excited for this new chapter: Learning a new framework, growing a team, and launch a challenging new modular and reactive WPA application.
