Overview of UI frameworks in 201911 min read

Last blog post I announced I’ll be writing about a new Javascript framework.
In the meantime (while I was preparing that new blog post) I got asked by PMF Split university to do some presentation. I said yes, of course.
That’s why my new blog post, about the new Javascript framework, is on hold.
So I decided, instead, to write a blog post about a presentation I held for PMF Split.

Intro

A presentation I held, was about giving my overview and some insight’s, using my own experience, on:

• do we need frameworks
• best Javascript framework for building SPA
• most popular framework
• pros and cons of each
  

Attendees were presented with options for building SPAs (single page applications), some history regarding frameworks and market statistics.
There is no debate regarding if we need to use a framework or not.
The main debate is regarding which one to use!

If you are in the web development business, you probably know what is the defacto standard for building UI’s. It’s Javascript by far.

Javascript was introduced in 1994. Since then it became standard for building web UI’s.
It has given us the possibility to enhance the user experience when using web applications/sites.
As web apps/sites became more and more complex there was a need for easier DOM manipulation. Soon enough we did gett new libraries which eased developers work.
By far the most popular one was/is JQuery. It solved most of the user interaction without the need to write plain Javascript code over and over again.

To put it simply, we could and still can, develop web apps without any framework but…

.. so we came to our first question: WHY USE FRAMEWORKS?

WHY USE FRAMEWORKS?

There are bunch of benefits when using framework.
We increase our productivity, speed up development process, work smarter NOT harder, create less…WELL..

Yes, we all do it sometimes. That sh**y code we are not proud of. But using framework, which has it’s own standards, we are guided by best practices which in return minimize quantity of poop(y) code.

And after all, using framework, we, our employeer and our customer generally tend to be…

WHICH FRAMEWORK?

Since there are bunch of options, I’ll name the most popular ones and the one I’m finding as a great potential.

Those are (starting from the left to the right) SvelteJS, React (library), Angular, VueJS.

As visible in the above picture, not only frameworks are listed, but also library and compiler.

So let’s make the first step in differentiating what FRAMEWORK, LIBRARY AND COMPILER is!?

⦁ Library is a collection of reusable code to solve common problems. It’s a subset of Framework.

⦁ Framework is a set of libraries and provides structure for building applications.

⦁ Compiler – compiles our code and produces production ready, optimized, code.

Types of a framework?

⦁ opinionated
⦁ unopinionated (i.e. express)

OPINIONATED

They have:

As stated above, these types of frameworks are well defined.
They have defined an architecture, way of component communication and the way application is started.
Most of these frameworks come with CLI (command line interfaces) which ease working with the framework and does a bunch of boilerplate code for us. These Implement the best ways of creating components etc..
This way framework is guiding us while developing.

UNOPINIONATED

As you probably assume, are missing the way the application is structured.
It’s all up to us, to use the framework as we see it’s suitable for us. So this type of framework is only for pros. Because, if your app is becoming larger and you are not that experienced, soon your app might hit the wall.
And you easily become lost into your own code-forest.

HISTORY

But let’s go back a little. The main idea behind these SPA frameworks, is to give desktop app experience to a web app. Since the web was/is generally slow and not very user-friendly.

FIRST CONTACT

These new types of frameworks started popping around 2010.
With Google AngularJS being the first one to hit the market. As soon as I came in contact with AngularJS I literally fell in love with it! Though I needed some time to grasp it, benefits were great. Enjoyment skyrocketed, productivity boosted.

Later in 2013 React was introduced by Facebook. Right from the start, it took the market by storm. It was much easier to learn than AngularJS, created smaller footprint when building the final app and was much faster than AngularJS. As it introduced virtual DOM. But the concept building UI with only a library (not full blown framework) was odious for me. I wanted AllInOne solution.

Google tried to fix AngularJS as much as possible regarding its own limitations. But soon they realized the need for completely new AngularJS.

In the meantime, Evan You, one of the developers from Google team, created VueJS framework. So 2014 VueJS also hit the market.

Around 2016 Google announced it’s own and brand new Angular framework. Since it was completely redesigned from scratch they dropped JS from AngularJS. Since then, we know new AngularJS 2 just as Angular.

Because I was completely into AngularJS, and did a bunch of projects with it, I gave Angular the advantage above every other framework/library.
I worked with Angular while it was still in beta. But due to constant changes and little things it had in common with AngularJS I ditched it.
I was disappointed. Any app written in AngularJS should have been completely rewritten with Angular. No backward compatibility whatsoever. On top of that, Angular learning curve, for hardcore AngularJS user, is far greater than switching to VueJS.
So i switched when doing some personal projects. But I have to say nowadays, due to company policy, I use Angular in enterprise projects.

PROS AND CONS

Although Angular, React and VueJS share common, component architecture, have a plenty of similar stuff. They are pretty different. All of these 3 are quite fast with small footprint of final app build. You could use any of these to create mobile app. But I will state some differences when choosing one over another.

Angular

Is a full blown framework. Backed by Google. Which means, at least it should mean, stability and longevity of a framework.
It gives you everything out-of-the-box. The http client, routes, validation, etc. It’s all there waiting for us. You use Typescript for writing apps.
Which has its own goods and bads. Good is that your code is more typesafe. Bad is it needs to be compiled. Every change you make IS NOT instantly visible onto web page. There is some compile time to be done. That means more time spent during development.
And in my experience, we had a lot of issues on different machines with compile time of a project during code-debugging. Bad is also that it has steep learning curve. Especially for the newcomers.

React

Backed and baked by Facebook. If you use apps like Facebook, Instagram, Whatsapp, Netflix.. you already are user of a React library.
It’s fast, easier to learn than Angular, smaller footprint of final build compared to Angular app. Has a strong community and great React Native framework for building native apps.
But in the end, it’s only a library. So if you want to use it, you have overwhelming options of 3rd party plugins for each functionality (i.e. http client, routing, validation…). Some might be discontinued by their creators. Which is a huge minus (at least for me!). Nativescript over Typescript (is an option) is a plus for me.

VueJS

Full-blown framework created by one guy, supported by group of people. Which is, in my humble opinion, bad thing. Although it has great popularity and exponential growth in community. Who can rest assured it won’t be abandoned in two years from now? And it surely wouldn’t be the first case of some popular JS framework/library which would become unsupported. So think what would happen if it became unsupported from today!?
And you have some pretty big projects created with it. Though you are able to create mobile apps with it, it’s still not good enough to produce great mobile apps as it is with Angular or Reactive.
Good thing is it’s easiest to learn from these 3. Has a great popularity especially in last year and a half! Although it’s core is rewritten with Typescript you code with Nativescript. But as with React, you could also use Typescript.

STATISTICS

As you can see in picture above, VueJS and React have stormed the market. Why is that the case? Mostly due to ease of use, speed, learning curve etc., these two took large share of the market.
Much of AngularJS developers I know, switched to React or VueJS due to the fact they needed to shift-delete their knowledge of AngularJS when going to Angular.

Here is another interesting statistics:

Mostly loved framework

Interest over time

Job opportunities

As you can see, mostly is React and then Angular oriented.
I would say this is pretty logical. Since these frameworks/libraries are backed by big names/companies.
I see VueJS more oriented to startups, smaller agencies.
From my perspective and experience, in my community (Split/Croatia) I would say that React is dominant. Angular and VueJS are balanced.

SvelteJS

Before giving my final thoughts, I need to say something about SvelteJS.
It’s a new kid on the block. though it is not a framework, I find it the most beneficial of all of these. It’s simply my own impression. I tried working and worked with all of these. But SvelteJS woke up emotions just like AngularJS did. Love at first sight.
Although the community is small and it’s in early phases (3rd iteration/version – not so new as you would say) the ability to dramatically increase the speed of application and overall joy while using it, is the biggest advantage point for me.

FINAL THOUGHT

WHICH LIBRARY TO LEARN IN 2019?

TRY ALL!! Take the one which FEELS best for YOU!!!

If you want a fast comparison between frameworks take a look at:

ToDoMVC is a website which has ToDo app written in all sort of frameworks. This is the fastest way to see how each framework/library is used and if that suits you.

Thanks for reading.