Javascript Frameworks: Angular vs React vs Vue vs Riot

Angular vs. React vs. Vue vs. Riot: Choosing the Right JavaScript Framework for Your Organization

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.

Pros Technical Perspective Business Perspective
Component-based development
  • Promotes testability
  • Reusable code
  • Organized structure
  • Consistency
  • Development time gradually decreases
  • System stability — happy customers
  • Focus on features and business value
Large mature community
  • External support
  • Access to community-made components
  • Access to expertise
  • Potential B2B opportunities
  • Potential reduced development time
Structured approach
  • Familiar approach for developers means less time learning nuances
  • System stability — happy customers
Large utility library
  • Reduced development time and code consistency
  • Focus on features and business value
Data binding
  • Simplifies linking data and user interface (UI)
  • Reduced development time
  • System stability

 

Cons Technical Perspective Business Perspective
Potential learning curve
  • Pure front-end developers might have a learning curve
  • Existing staff may need time to get familiar
Component-based development
  • Sometimes too much architecture can be bad
  • Application infrastructure development can be costly
Difficult to pivot away from
  • Abandoning Angular may require a rewrite to a different framework
  • Similar concept to vendor lock-in or switching costs

 

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.

Pros Technical Perspective Business Perspective
Fast rendering
  • Good performance in the browser
  • Good customer experience
Flux
  • Allows for rendering elaborate pages that work well
  • Allows you to envision very rich pages of dynamic content
No data binding
  • Data binding can cause trouble when aligning UX with data
  • Reduced page render (update) times, which can provide a better customer experience
React Native
  • Port your web experience into a native mobile app
  • Minimal, cost-effective effort to port your experience as a mobile app

 

Cons Technical Perspective Business Perspective
JSX
  • Non-React developers will need to learn it
  • May need to train or hire staff
Specific Tool Chains
  • Risk that the ecosystem doesn’t fit with existing tools or processes
  • Not vendor lock-in, but close to it
Flux
  • Flux can easily be done incorrectly / poorly
  • Complicated code can be reflected in the UI to customers and lead to a poor experience
No data binding
  • Data binding will need to be done manually
  • Increased development / support cost to build this

 

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.

Pros Technical Perspective Business Perspective
Lightweight
  • Mobile friendly and fast
  • Mobile device friendly — which means a better experience
Fast
  • Performs very well in production, leading to fewer issues
  • Statistics show that users will abandon pages that don’t render quickly, so the speed is good.
Easy to learn
  • Minimal special nuances
  • Existing staff should suffice

 

Cons Technical Perspective Business Perspective
UI level only
  • A layer that speaks to the back end will need to be built
  • Potentially longer development time
Testability
  • Development team will need to decide how to handle testing
  • Lack of testability can lead to an unstable product as major features get released

 

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.

Pros Technical Perspective Business Perspective
Similar to Vue.js
  • Same as for Vue.js
  • Same as for Vue.js

 

Cons Technical Perspective Business Perspective
Small community
  • Development will need to discover and solve its own issues
  • Bugs and issues can linger until they are resolved
  • Flaws within Riot.js itself may also linger, compounded by a small amount of available documentation

 

Slower release cycle
  • Smaller community supporting it in its early stages
Backward compatibility
  • Versions of Riot.js are not always backward compatible

 

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.

 

Leave a Comment