Organizations are increasingly relying on open source software to run their businesses, with 78% of companies utilizing it and 65% contributing to open source projects. JavaScript is certainly the most popular open source software used today, leveraged by an astounding 95% of all websites. If your organization is using open source software, then you’re probably using JavaScript in some fashion.
JavaScript developers use frameworks to build their apps in the same way construction workers use a wooden or metal structure to solidify a building. However, while houses have been made with similar wooden skeletons for centuries, new JavaScript frameworks appear almost daily and existing frameworks are continually updated in the open source world.
When it comes to JavaScript frameworks, one size does not fit all. It’s vital to continually evaluate your business and technology goals to determine the most suitable framework for your environment in order to increase development and budget efficiency. To help organizations keep up with the relentless change in JavaScript frameworks, we’ve created a guide to three of the most popular options: Angular, React, and Vue.js, as well as one lesser-known framework that has seen some recent traction—Riot.js. We’ll review these four frameworks from both technology and business perspectives as well as some use-case scenarios.
Angular
Angular is a modern framework updated by Google from its predecessor, AngularJS. It’s the oldest of the four frameworks reviewed in this article and its recent overhaul was fairly massive, putting it on par with other modern frameworks like React. Angular has a structure and approach that feels more familiar to back-end web developers or anyone versed in tiered development.
React
React is a framework developed by Facebook, debuting in 2011 and introduced to open source in 2013. It was one of the first frameworks to introduce the concept of nesting components within each other and sharing data between them, with a virtual DOM that produces fast rendering speeds (quicker updating of the UI). It shares many of Angular’s pros and cons, so only the differences will be noted here.
Vue.js
Vue.js is a newer framework and is chiefly concerned with the view layer (the UI). It offloads the responsibility of getting data from backend systems to other frameworks.
Riot.js
Riot.js is similar to Vue.js. It is also fairly new and is chiefly concerned with the view layer. It shares Vue.js pros but there are different cons for Riot.js.
Choosing the Right Framework
With so many frameworks to choose from, it can be difficult to determine the most suitable one for your company or development team. It’s wise to consider your needs from both the technical and business perspectives.
The “Best versus Right” paradigm plays strongly in this decision. It’s not always the case that the best or most powerful tool is the right one for an organization, although sometimes the two aspects align well. The top considerations normally follow these themes:
For technical leads:
- Development cycle (long vs. short — or maybe none)
- Long vs. short-term project (iterate over many versions vs. one version and complete)
- Full-time staff vs. contract staff (is this a new product or just a temporary initiative?)
- Training (will staff need retraining?)
- Support (once the project is finished, what level of support will it require?)
For business leads:
- Budget (what will be available for development and infrastructure?)
- Project timeline (when is the desired release date?)
- Infrastructure (datacenter, cloud, or on-site)
- Staff (available vs. needed)
- Business plan (is the project ready for development to begin?)
Analyzing your strategy in accordance to these factors will allow you to evaluate whether having the best performing framework is the right choice for your company. For a large company looking to make an investment in its web space, it might be easy to choose React or Vue.js based on reading a few technical reviews with performance graphs. They’re exciting frameworks that are generating a lot of buzz. For medium or smaller sized companies, it could also be easy to just choose the framework that fits your current skillsets or allows you to go to market fastest. What’s critical to understand is how decisions made early can potentially have negative long-term effects on resources and budget. Switching between frameworks can involve very time-consuming and expensive rewrites and the possibility of having to bring in special staff to support new projects.
Use Cases
Let’s look at two hypothetical scenarios and determine which framework might be the right fit for each of them. The companies in both scenarios have very different goals for their online presence, as well as different user types. It should be noted that any one of the above frameworks could be used for either of these scenarios, so this is a discussion about Best vs. Right.
Scenario 1: Content-Reliant Company
Imagine a company that publishes content for people or businesses to consume, with little to no user-generated content or much of an e-commerce component. The company’s website structure does not change, but content may be changed or added to. Examples might include an online news media hub or a B2B company that produce industrial machinery that is sold through a sales force rather than online, but engages in content marketing.
For companies like these, the focus falls largely on the UI and less on the middle- or back-end, with a need for fast rendering of content to users. A strong team of UX workers collaborate closely with content workers and developers to produce media-rich pages.
Given this focus, Angular might not be the right choice because it’s a framework that’s built out with layers in mind. React also has a component-driven approach where a page is composed of many parts interacting with each other, so perhaps this is also not the right choice. Vue.js is largely built for fast rendering of pages to users, and given the importance of delivering static content quickly, this could be the right choice. Ditto for Riot.js, as it’s built for similar use cases as Vue.js.
Scenario 2: Startup Social Media Company
Now imagine a fledgling social media company where most site content is user generated and very fluid in nature. There might be a tiny e-commerce capability to support its content generation, as well as the ability to partner with or browse other users of the system. Examples might include clones or near-clones of Snapchat, Instagram, or Patreon.
A website like this involves a complex UI that is meant for generating content that not only interacts with a user, but potentially with other users as well. This could lead to a very complex middle- and back-end. The site pages are living pages that react to events that may not even be happening on the current page.
Angular’s approach fits into this model very well. Components can be built for sharing between pages. Angular comes with robust built-in utility in the framework that can reduce development time and resources for this system. React also might be the right choice for this scenario because of its component-based nature. Flux provides a blueprint to build out the high interactivity of pages and the site as a whole. Vue.js and Riot.js may not be the correct fit because both are concerned primarily with the UI. While they certainly could be built out to support the site, they are probably not the right choice.
Ultimately: Right Beats Best
Your framework decision will depend on many factors: company or development team size, use cases, internal skillsets and training requirements, the perceived life of a given framework, and much more. Take the time to view your development environment and projects from both the technical and business perspectives, and choose the framework that best fits your current and future vision. Ultimately, your framework choice should not be based on the best available or hottest framework at the moment, but about what is right for your company and development team.
