Angular, React, Vue? Which framework?
Which is the right framework for developing Single Page Applications?
As we discussed in my previous article, 'SPA's' - single page applications - are becoming increasingly popular.
A Single Page Application (SPA) is a web site/application where only one page is delivered to the browser. Instead of the 'web-server' delivering a new 'web-page' each time the browser make a request, an SPA (Single page application) dynamically changes its content 'client-side' (in the browser) thanks to a set of code libraries based upon the evolution of Javascript. All the necessary HTML, Javascript and CSS is delivered to the browser just the one time. Then the browser changes the content of that page according to user actions. There is just one hit the to web-server.
The idea is that this provides a seamless 'application' type experience which works well on any device, be it traditional computer, laptop, tablet or smart phone.
It is a 'framework' which underpins the Single Page Application.
The most popular frameworks.
Here is a list of the most popular frameworks.
1) Angular JS
2) React JS
3) Ember JS
4) Backbone JS
5) Meteor JS
6) Vue JS
Let's look at each one in a bit more detail.
Angular JS
Angular JS is a Javascript based framework and very popular for creating the client-side code for SAP's (single page applications). Developed by Google, it is used by themselves, Microsoft, Paypal and many more.
Angular JS can integrate automatically (data-bind) with back-end components and works well with MVC architecture. An Angular JS framework will allow an SPA to work on any platform.
React JS
ReactJS is one of the most popular frameworks for building an SPA. It uses a library of components to create good User Interfaces and is perhaps more flexible than Angular JS. It was created by Jordan Walke, a Facebook engineer. Because React is a JavaScript framework using it is simply a case of including a JavaScript file in our HTML and using the React exports in our application's JavaScript.
For those of you who know a bit about web development and the MVC pattern (Model-View-Controller) - 'React' can be used as the V (view) in MVC. Generally, it is used as the 'View' component of an MVC application where the user interface can be updated without the need to refresh the view (or page) from the server. React includes a 'virtualDOM' which allows developers to more easily update and then track changes.
Ember JS
Another popular open-source framework, Ember JS uses a 'widget-based' approach called 'Ember Components'.
The templates incorporated with Handlebars update automatically when the data changes. It's popular with the likes of Microsoft, Netflix, LinkedIn, Live, Vine and many more. It works on the MVVM pattern and follows the Convention over Configuration (CoC) model. The data library offered by EmberJS is good and the user friendly API is a bonus that makes it popular. Named in 2015 as “the best JavaScript framework”.
Backbone JS
Lightweight and flexible, Backbone works on an MVP-based architecture. Backbone does the communication via events which prevents messing up with the application. Used by the likes of Sony Entertainment Network, Airbnb, and SoundCloud.
Meteor JS
An open-source, full-stack Javascript framework which uses Node.JS. Rapid build times for reactive applications which use the NodeJS platform. With Meteor, data is sent by the server, rather than HTML. Used by Mazda, Honeywell, Qualcomm and others.
Vue JS
Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.
So which is best?
Which framework is the correct one for your project depends entirely upon what it is you are trying to achieve. You will need to sit down and look at the merits of each framework in far greater detail than it is possible in this short article. In recent years AngularJS and ReactJS have been at the front of the pack of the most popular frameworks. However, VueJS has recently been catching up fast. So, it pays do do your homework and choose the framework that best suits your project requirements.
For further information, there are a couple of useful links here:
5 Key Factors for Choosing Your Single Page Application Framework
Frameworks for Developing Single Page Applications
Vue.JS Review: Can It Beat React.JS?
Angular vs React vs Vue: Which Framework to Choose in 2020
Finally 'Webpack' it all!
If you are building a Javascript application, you will want to take a look at 'Webpack'. Webpack is a module builder for JS applications. It takes all your JS application code and compiles it into something that is compatible with a web browser. The Webpack modules are reusable chunks of code built from your JS app’s code, node_modules, images, CSS styles, everything. They are packaged so that you can easily used them in your website.
For further information, there are a couple of useful links here:
