If you have been involved in frontend development in the past couple of years or even if you are just starting out, you must have come across the huge number of available frameworks that are out there and evolving. New frameworks and libraries are popping up every so often. Companies all over the world are facing the daunting task of choosing the right stack for their digital implementation.
Until the early 2000s, browsers were nothing like they are today. They did not have much power back then. They were a lot less powerful, and building complex applications inside them was not feasible performance-wise. And people had not even given a thought to something like tooling.
Typescript is an extension of ES6. Some features that are additionally included in Typescript are:
While we do that, we will also have a look at the popularity and probable growth of these frameworks, the work the developers are doing currently and the performance grades the framework is scoring.
Angular is a modern MVVC framework and platform that is used to build enterprise Single-page Web Applications (or SPAs) using HTML and TypeScript. Angular is written in TypeScript.
Angular is an opinionated framework which means that it specifies a certain style and certain rules that developers need to follow and adhere to while developing apps with Angular, therefore you need to learn Angular and the various components that make up an Angular app. Angular comes with its own CLI that allows developers to create resources and sources files within the project without having to create all the files manually. It also has features to test and debug the application locally using a development server.
A lot of beginners get confused with so many different versions out there for the same framework. You must have heard AngularJS, Angular 2, Angular 4, Angular 5, Angular 6 and now Angular 7. Well, in reality, there are two different frameworks - AngularJS and Angular.
Since modern browsers (as of now) do not understand TypeScript, a TS compiler or transpiler is required to convert the TS code to regular JS code.
According to the StateOfJS Survey 2018, the most loved feature of the Angular and probably the reason behind Angular’s tremendous success and popularity is it being fully-features and powerful. Since it is backed by Google and a team that has been resolutely working to make the framework better for years, developers trust Angular.
While we have so many reasons to love Angular, others believe that it is bloated and has a steep learning curve making is harder to learn for beginners. Here are the results of the Survey that show the growth in popularity of the framework over a period of the last 2 years.
One major issue that I have noticed while talking to beginners and budding developers is the trust. Let’s have a look at the version history of Angular so far.
|AngularJS||Released in October 2010|
|Angular 2||Released in October 2014|
|Angular 4||Released in December 2016|
|Angular 5||Released in November 2017|
|Angular 6||Released in May 2018|
|Angular 7||Released in October 2018|
Quick releases causes budding developers to have trust issues with the framework.
Although each version is expected to be backward-compatible with the prior release & Google pledged to do twice-a-year upgrades, developers feel that if they choose Angular as the framework for their app, there app will soon be using an outdated version of the framework. Updating all the dependencies in a project can also be a pain. This has been a major issue causing distrust in the budding developer’s community.
All the major releases are supported for 18 months. This consists of 6 months of active support, during which regularly-scheduled updates and patches are released. It is then followed by 12 months of long-term support (LTS), during which only critical fixes and security patches are released.
React was developed by Facebook in 2011 and given open-source status in 2013 under the controversial BSD3 license. Since its first release, React’s Github repository has generated 125000+ stars from developers and has amassed a community of almost 1200+ active contributors, regularly pushing updates to enrich the library.
To put things in perspective, before we learn more about ReactJS, let’s have a look at the results obtained by React in the same StateOfJS 2018 Survey.
Let’s look at a high-level overview of what React is capable of and for that, we need to understand the core concepts and features associated with the library. There are 3 primary ones, which are summarized as follows:
React enables the creation of module-like pieces of code called “Components” - very similar to components in Angular. These code snippets reflect a particular part of the user-interface, which can be repeated across several web pages. This is what we meant by reusability, which is a great way to save valuable time on development.
Considered the next biggest leap in web development since AJAX, the virtual DOM (short for Document Object Model) is the core reason why React enables the creation of fast, scalable web apps. Through React’s memory reconciliation algorithm, the library constructs a representation of the page in a virtual memory, where it performs the necessary updates before rendering the final web-page into the browser.
Some reasons why developers do not like React as much is lack of documentation and the clumsy programming style. They find the available information either not adequate or not useful.
Using JSX, you have to sacrifice a lot on the already existing features that HTML and CSS offer you and learn the syntaxes that JSX support. Some developers do not like the whole idea of mixing everything in JSX and instead stay organized and keep all aspects of the application in respectives files.
It feels like wanna-be HTML. It is still popular though after-all it all comes down to personal preferences.
Vue was created by Evan You when he was working at Google on AngularJS (Angular 1.0) apps. It was born out of a need to create more performant applications. Vue picked some of the Angular templating syntax, but removed the opinionated, complex stack that Angular required, and made it very performant.
While VueJS does not enforce developers to use a new syntactic language like JSX which allows developers to use all the regular features that are offered by HTML and CSS, it is also lean library that can be used within your already existing project to add new features. This sure cannot be done with Angular or even if it can be, it can cost a lot.
Here is what the StateOfJS Survey 2018 has to say about VueJS.
Vue.js is probably the most approachable front-end framework around. Some people call Vue the new jQuery, because it easily gets in the application via a script tag, and gradually gains space from there. Think of it as a compliment, since jQuery dominated the Web in the past few years, and it still does its job on a huge number of sites.
One factor responsible for the success of VueJS is that it is a progressive framework. It means that you can drop it in your app, or just add the functionality to one of your divs in the web app that you already have and you are good to go. You do not need to get your head around Babel or NPM or Webpack or even TypeScript. This makes Vue the first choice for beginners and budding developers.
One thing that makes Vue stand out compared to React and Angular is that Vue is an indie project: it’s not backed by a huge corporation like Facebook or Google.
Instead, it’s completely backed by the community, which fosters development through donations and sponsors. This makes sure the roadmap of Vue is not driven by a single company’s agenda.
Like Angular, a lot of the power of EmberJS comes from its command line interface (CLI). This tool – known as ember-cli powers much of the development lifecycle of an EmberJS application, starting from creating the application, through adding functionality into it all the way to running the test suites and starting the actual project in development mode.
Almost everything that you do whilst developing an EmberJS application will involve this tool at some level, so it is important to understand how best to use it.
Using EmberJS greatly improves on the efficiency of developing your frontend. Unlike libraries such as React, you do not need any extra tools to build your application. Ember gives you the entire suite of functionality necessary to build a fully functional application. Then there is the ember-cli and the out-of-the-box setup then takes this to the next level. It makes the process incredibly simple and painless from beginning to end. The community support for EmberJS is also great.
Unfortunately, it can be difficult for you if you are planning to improvise on your existing projects by adding EmberJS. It works best when you plan on starting a new project. Fitting it into an existing one can be difficult or impossible. Ember also works out of the box with a very specific way of working with backends, and if your existing backend does not comply with this then you could end up spending a lot of time and effort either re-working the backend or finding/writing plugins to talk to the existing one.
Here is what the StateOfJS Survey 2018 says about the framework.
Evidently, nothing major has changed in the last two years. EmberJS has maintained its standing and the people loving it have been using it. However there is not much growth in terms of popularity but with the advent of frameworks like Angular, this is still an achievement.
Ember has a lot of power and can allow you to very quickly create full-featured application frontends. It does impose a lot of structure on how you must design your code, but this is often less restrictive than it first seems since this structure is necessary anyway.
The Polymer library is a pary of the Polymer Project.
Modern design principles are implemented as a separate project using Google's Material Design design principles.
Polymer lets you build encapsulated, reusable Web Components that work just like standard HTML elements, to use in building web applications. Using a Web Component built with Polymer is as simple as importing its definition then using it like any other HTML element.
Web components are an incredibly powerful new set of primitives baked into the web platform, and open up a whole new world of possibilities when it comes to componentizing front-end code and easily creating powerful, immersive, app-like experiences on the web.
Polymer is a lightweight library built on top of the web standards-based Web Components APIs, and it makes it easier to build your own custom HTML elements that you can distribute and use across applications and even across frameworks. Creating reusable custom elements - and using elements built by others - can make building complex web applications easier and more efficient.
By being based on the Web Components APIs built in the browser (or polyfilled where needed), elements built with Polymer are:
One particularly useful way of leveraging the advantage of custom elements is that they can be particularly useful for building reusable UI components. Instead of continually re-building a specific piece of UI or button in different frameworks and for different projects, you can define this element once using Polymer (and you get a web component), and then reuse it throughout your project or in any future project.
Polymer also provides optional two-way data-binding which is very similar to Angular.
Polymer is designed to be lightweight, flexible and close to the web platform - the library doesn't invent complex new abstractions and magic, but uses the best features of the web platform in straightforward ways to simply sugar the creation of custom elements.
Let’s have a look at the StateOfJS Survey of 2018 to gauge the popularity of Polymer.
As you can see, the popularity has declined a little bit in the last one year and the credit goes to new and more comprehensive “frameworks”. Developers tend to use a framework rather than a library. People who love Polymer love the fact that it is lightweight and simple to use.
JQuery is not hard and it is not going to take a lot of time in understanding how it works, if you have some experience. If you are a beginner, I think you should learn JQuery. Chances are that you will end up using it in some projects every now and then. Even if you are working on a cutting-edge startup project that uses the latest technology, you may end up using JQuery in another project or a simple and personal side project.
However, most things you would do using JQuery 5 years ago, can now be done using the standardised Web Browser API.
My ten cents? Avoid using it in a new project. And also, JQuery is not a framework. It is more of a library.
You might also not have the luxury of using the latest cool tech (like React or Vue) because you are required to support old browsers, that have an older set of standards. In this case, jQuery is still hugely relevant for you.
JQuery is still being used particularly to support legacy projects - But it is time, we move on.
BackboneJS allows you to give structure to web applications by providing models with key-value binding. It provides custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects all of it to your existing API over a RESTful JSON interface.
With Backbone, we represent the data as Models, which can be created, validated, destroyed, and saved to the server. The model triggers a "change" event whenever a UI action causes an attribute of a model to change. And as a result, all the Views that display the model's state can be notified of the change, so that they are able to update accordingly, re-rendering themselves with the new information.
ANd you do not have to worry about anything. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.
The single most important thing that Backbone can help you with is keeping your business logic separate from your user interface. When the two are entangled, change is hard; when logic doesn't depend on UI, your interface becomes easier to work with.
|Orchestrates data and business logic.||Listens for changes and renders UI.|
|Loads and saves data from the server.||Handles user input and interactivity.|
|Emits events when data changes.||Sends captured input to the model.|
Unlike its competitors React, AngularJS, and EmberJS, Meteor has successfully monetized its user base: In 2016, Meteor beat its own revenue goals by 30% by offering web hosting for Meteor apps through Galaxy.
From 2016 the Meteor Development Group (the open source organisation powering Meteor) started working on a new backend layer based on GraphQL to gradually replace their pub/sub system, largely isolated in the whole NodeJS ecosystem: the Apollo framework.
Once again, in the front-end area, only React and VueJS. The story of Vue is particularly exciting here: 2 years ago, 27% of participants had never heard of this library before. Today it is only 1.3%! While React still has the larger market share, the meteoric rise of Vue shows no signs of weakening. Vue has even outdated its opponent in some points, such as GitHub stars.
The descent of Angular is another story of the last few years. While it still performs very well in terms of pure usage, it has a rather disappointing 41% satisfaction rate. Although Angular will not disappear because of its usage rate, one can not assume that the framework will ever rise back to the frontend throne.
Angular has lost its dominance over the last couple of years, but it could be that it comes back as soon as the confusion (between AngularJS and Angular) is resolved.