Which frontend framework is right for me?
On March 6th of 2018 Qualtrics, a software company used by 75% of today’s fortune 500 companies, opened their conference with the following sentence:
“Turn customers into fanatics. Employees into ambassadors. Products into obsessions. And brands into religions.”
They were acquired by SAP for $8 billion directly after this conference.
How do we turn our products into obsessions?
When it comes to building apps, having an incredible user experience for our users is the most consumer centric thing we can do. That process starts with choosing the right technology stack for our company. This article focuses on the front end portion of that — specifically answering the question, which frontend framework should we use? There are many frontend frameworks: React, Vue, Angular, jQuery, Ember, and Backbone are all popular frameworks used at a wide variety of companies.
Throughout the rest of this article I’m going to focus in on the top three, their tradeoffs and use cases. I hope I am able to provide some valuable insight for you:
Enter React, Vue, and Angular
21.5% of the technology sector uses react.js, making it the most popular frontend web development framework. It was created by Facebook as a declarative, component based, super fast framework for building out seamless UI’s.
What makes React so special?
- It’s fast. Really fast. React.js has a reconciliation engine called React Fiber which uses a virtual DOM to improve performance and responsiveness
- It’s organized which helps us mitigate tech debt. React.js utilizes composition (as opposed to inheritance). This lets us makes use of reusable declarative components, each of which has their own encapsulated state
- It’s more efficient & easier to debug. React’s unidirectional data flow, or one-way data binding, makes it less error-prone because we always know where our data is coming from
- It’s an open-source language owned by Facebook so it’s on the cutting edge of the tech sector and it’s constantly improving. The dev tools are very advanced and the react.js community is constantly expanding
Everything has its tradeoffs.. so what’s the downside to React?
- The React ecosystems high pace of improvement means that you and/or your developers are going to constantly have to evolve. I’ve been coding in React.js for four years at the time of writing this article. I learn something new about the ecosystem every.. single.. day. During the v16.8 update react hooks came & made react class components obsolete (or at least tech-debt heavy by comparison due to its underlying boilerplate code). React router and reach router are currently merging which will completely change react routers current API. This trend will continue into the future, so if you’re using this framework be prepared to refactor code. It’s the ABL (always be learning) lifestyle
16.1% of the market uses Vue.js making it the next most popular frontend framework. It was built by Evan You, who was a Google engineer at the time. His goal was to take his favorite parts of angular and built a lightweight library with them!
So what makes Vue.js so popular?
- It’s lightweight. Really lightweight! A production ready project only weighs 20kb — making it super performant
- It has two way data binding, so when you make changes to data the DOM updates.. oh and like react, it uses a virtual DOM!
- It’s makes use of re-useable components
- It has great documentation and even comes with official Vue.js courses, making it learner friendly
What are the downsides?
- Vue’s two way data binding leads to Reactivity issues. Straight from the change detection caveats section of their documentation:
Due to limitations in JavaScript, there are types of changes that Vue cannot detect. However, there are ways to circumvent them to preserve reactivity.
- Because it’s so lightweight, it’s used in mostly small scale projects. This is beginning to change though: Grammarly, Buzzfeed, and IBM have recently adapted the technology… which seems promising for it’s future
The third most popular frontend framework is Angular coming in at 12.2% of the frontend market share. Angular 1 was created by Google as an MVC framework, but in 2016 Google released Angular 2 which transitioned the language into a component-based framework. Angular 11 was released on November 11, 2020 (so lots of product iterations).
So what’s all the hype about?
- It utilizes reusable components like React and Vue
- It’s maintained by Google which means that it has a large community/ecosystem. This means issues get resolved and there’s lot of support
- Two way data binding allows parent and child components to listen to events and update values simultaneously
- Angular makes use of dependency injection, which increases the apps efficiency and modularity. You can read more about this in angular’s official documentation.
Why shouldn’t I use it?
- Lot’s of boilerplate code
- Complexity and steep learning curve.
- You’re forced to use Typescript. I hesitate to add this in as a negative attribute because it’s not necessarily a bad thing. In large-scale enterprise applications introducing a type system may be a positive thing. That being said, a small to mid-size company might not want the increased overhead
- Angular uses dirty checking which slows down the application if there are a lot of watchers because every time a value in scope changes, Angular has to re-evaluate all it’s watchers. Engineers use techniques to get around this but sometimes it’s impossible to optimize a scope with many watchers.
In closing, all three languages have compelling use cases. They’ve collectively become more similar over time, all converting to reusable components, but still have some unique attributes & important tradeoffs. I wanted to keep my first technical piece relatively short-winded so I left out some things
- JSX vs. templating
- How each language changes with scale
- Their native counterparts
Still, I hope this has been helpful. If you’re yearning for a more in-depth analysis I’d definitely recommend checking out this comparison done by the official Vue team.
Happy Holidays!
