You are here

You are here

The 5 best web application frameworks: How to choose

public://pictures/Matthew-David-Senior-Manager-Kimberly-Clarke.jpg
Matthew David Senior Manager of Mobility Center of Excellence, Kimberly-Clarke
 

As application development continues to evolve, the demand for teams to rapidly deliver software that can scale and evolve to meet customer needs has never been higher. Front-end development frameworks are key to making that happen.

These frameworks are where the work for the layout, logic, and application is executed. These browser-based systems require JavaScript, CSS, HTML, and other web-standard technologies.

So how do you choose which framework is best for you? Here are the top five frameworks that development teams are using, based on my opinion and experiences, and what you need to know about them.

Top front-end frameworks

Web browsers all compete to have the best support for open standards such as HTML, CSS, and JavaScript. There is much less work needed to test if technologies work across different web browsers. The five frameworks you should consider are:

  • Angular
  • React
  • Vue
  • Ember
  • Svelte

The reviews that follow are based on my experience and that of my teams. (I encourage you to leave any thoughts based on your own experiences in the comments below.)

1. Angular

Angular arguably has the most extended history of any on this list. Initially developed by Google in 2010, it was subsequently released as an open-source project. The framework consistently receives updates with significant releases typically delivered every six to nine months. The current major release is version 9.1. 

Pros

There is strong developer support for Angular. The documentation on the site supporting Angular development is excellent and, as a developer, you will find a lot of great how-to videos on YouTube to get you started.

Also, Angular continues to evolve and meet the needs of web developers. To this end, the framework supports the TypeScript language (a superset of JavaScript), a progressive web app architecture for multi-format solutions, and the M-V-C (model view controller) architecture.

Angular is also a critical component of the MEAN development stack consisting of MongoDB, ExpressJS, Angular, and NodeJS.

Cons

Angular's age can present a problem. In 2010, developers weren't building mobile web apps, so for several years, additions were shoehorned into Angular to accommodate them. In 2016, Angular was rewritten with TypeScript and released as Angular 4. The original version, AngularJS, was renamed as Angular.

Unfortunately, previous versions of Angular aren't compatible with the new TypeScript version in Angular 4. That's important to know if any part of your organizations has used Angular and you're thinking of going this direction for compatibility reasons.

Bottom line

Angular has grown and adapted to modern development needs. If you go this route, use the newer Angular 4 and later versions for building Angular apps. And be sure to keep a close eye on the Angular blog to keep up with the latest improvements to the framework.

2. React

Many development groups will choose either Angular or React as the base foundation for their web applications. The logic makes sense, and both are mature. Both deliver applications that can run massive web apps, and both have strong communities where developers can share information.

But where Angular went with TypeScript, React leverages JavaScript extensively. Facebook, along with individual contributors and other companies, maintain React.

Pros

Some very large companies—including Facebook, Netflix, Dropbox, Airbnb, and Reddit—use React as their front-end framework. These sites receive millions of views per day. React has proved itself to be able to scale and meet the needs of the most demanding web apps.

Additionally, the skills you learn for React also apply to ReactNative, a framework that developers can use to build native applications that run on the iOS and Android mobile operating systems.

Cons

React is not easy to learn. The entire architecture is built in JavaScript, so you must be an experienced developer to start with React. 

Bottom line

The learning curve with React is steep, but the result is a modular architecture that can support the most demanding websites. Facebook and the open-source community continue to invest in the growth of React, which ensures that investing in React will reward you for years into the future.

3. Vue

The selling point for Vue is the size of the framework. At only 20KB, this is one of the most lightweight frameworks on the list. The inspiration for Vue came from work the original developer completed on Angular. In 2014, Vue was released as a slimmed-down alternative to Angular and has maintained a cult following ever since.

Pros

Much like Angular, getting up to speed with Vue is not difficult. You can leverage your skills with HTML, CSS, and JavaScript. You can also build templates and components in Vue, much as you would with ReactJS. 

Cons

Many developers rank Vue as a third-choice framework, behind Angular and React. To this end, the community supporting Vue is much smaller, and the development of the framework is not as robust as other, more popular frameworks.

Bottom line

Vue is an excellent alternative framework to learn and leverage as you need. It is a contending framework and could potentially be a smart alternative to Angular.

4. Ember

Ember is one of the younger frameworks on this list. Released in 2011, its focus is on helping you build complex web applications. It offers:

  • More productivity right out of the box when compared to others on this list
  • Stability without stagnation
  • Support for HTML5

With these principles and continuous development, Ember is now in use for many large and popular applications, such as Apple Music, LinkedIn, and Square.

Pros

The modular architecture and many hundreds of plugins make Ember a framework that gives you a lot right out of the starting gate. Also, solutions built with Ember can be converted into native applications such as Apple Music.

Cons

Ember leverages modules to extend the framework. The challenge as a developer is knowing which modules you should be using. Besides, there is a learning curve required to get started with Ember.

Bottom line

Ember is evolving quickly into a mature and stable alternative for building web apps and native apps when compared to React.Native and Angular.

Svelte

Svelte is the anti-framework framework. There are issues with some frameworks, such as a large codebase required to run scripts. Svelte, released in 2016, is driving the campaign to reduce the challenges of some traditional frameworks.

For instance, a simple To Do MVP application written with Svelte will weigh in at 3.6KB, whereas the same app written for React tops 45KB—10 times bigger. 

Svelte can create tiny apps because of the model it uses for building applications. Other frameworks, included the ones listed above, rely on the web browser do the bulk of the work.

With Svelte, you write components with CSS, HTML, and JavaScript, and then Svelte compiles the code into JavaScript modules. The result is that the browser does not have to do as much work. Which, in turn, means you can write more complex applications.

Pros

JavaScript modules are an effective way of speeding up any JavaScript application. The approach Svelte brings is to increase the efficiency of your apps.

Cons

Many web developers have not worked with JavaScript modules. The whole approach Svelte offers is very different, and, because Svelte is the new kid on the block, the developer community is still growing.

Bottom line

Svelte offers an interesting approach to Web app development. There is merit in working with JavaScript modules, and the model Svelte offers is one that developers should experiment with. With that said, Svelte is thin on documentation. So, for the foreseeable future, treat Svelte as experimental.

Go beyond web apps

The focus of these frameworks is web apps, but that is no longer the world we live in. Back-end frameworks and accelerators also play a huge role in app development these days. (Those are topics go beyond the scope of this article, but need to be mentioned.)

Important accelerators include cloud, open-source tools, DevOps methodologies and security. But in many ways, the most critical accelerator is your mindset. As a modern developer, you must adopt a mindset of constant learning to continually improve the delivery model to meet the ever-increasing demands of your customers.

You must be able to effectively deliver solutions that can scale across all of the platforms your customers use. The combined power of front-end, back-end, and accelerators will give you the edge you need.

Keep learning