5 JS frameworks that serve you well

Gather 5 programmers in one room and give them the same task. You’ll be quite surprised that each will submit a diverse tree of thought […] because of numerous gaps in skill, knowledge and practice.

Yet, when you click run, the result will be the same. So how do you bundle these internet troublemakers together? Even if you establish laws and limit their creativity, there will still be trouble, cue JS frameworks. The virtual policemen that keep nerds in check by easing the access to best practices.

Explaining JS frameworks and libraries

The line between frameworks and libraries is fleeting. Yet, some guidelines must be put in place for the assiduous developers and curious non-techies alike. The former has been labelled a buzzword and the later self-explanatory: a library is a collection.

According to our almighty programmers […] a software framework is a re-usable design for a software system that may include support programs, code libraries, a scripting language and other forms of software which contribute to the development and overall structure.

JS Frameworks have three principles that distinguish it from other collections such as a library:

• Inversion of control: A framework’s flow of control, unlike other applications, is dictated not by a caller, but by the framework itself.
• Extensibility: A user can extend the framework with specific functionality by adding bits of code.
• Non-modifiable framework code: The framework code, most of the time, is off-limits. A user can extend functionalities of the framework, but cannot change its core code.

Inversion of control or what makes JS Frameworks

Those are quite the principles and may appear unclear at first, but it seems inversion of control(IoC) takes the spotlight. In programming, the flow of control is the order of things […] statements, instructions and function calls – are executed or evaluated by the machine.

When I was studying IT, the first programs that were required of us involved simple tasks […] collect a name and print it on screen. A few lines of code put a smile on the teacher’s face as he hoped someday one of us will be able to code on paper and every first run would be without errors. The programs, yet again, quite simple – add name, age, sex –  halt every other line.

The flow of control was dictated by the machine in front of me; it decided when to proceed onto my next coded line. After that era was over, following software displayed several graphical options, each attached to event handlers, thus inverting the flow of control and allowing me to take control over the hunk of metal; I decided what options I would fulfil.

The library difference

A library, on the other hand, is a collection of objects, functions and methods. You link your application and library so that you may use the coded functionalities. In essence, it’s reusable code that can be shared among applications without having to rewrite it each time. Kinda close to the whole framework shebang, which often causes concern over how vague the term is.

Companies release just a normal library and call it “The EDSEL framework” because it sounds lavish. No matter how sob my story is, JS frameworks/libraries do indeed add value to the development cycle of web-enabled software […] however, with so many of them available and new ones coming in; the main question arises “Which one?’ To aid you with such uncertainties that can keep a man awake through the night, we have narrowed down the top-dogs: React, Angular, Vue, Backbone and Ember. Are these really textbook JS frameworks?

Nah, otherwise I wouldn’t have to revisit this, after getting my tech-savvy review from our front-end developers. Though, with some libraries here and there, they sure will feel like real ones. Consequently, the term framework will be used loosely when talking about these 5 prospects. Now, Before we initiate this bloodbath, let’s introduce our contestants properly.

React – a JS Library

React has slowly crept to the top of the ladder and is maintaining its spot, encouraging the use of reactive approaches and a functional development paradigm. It has also initiated self-defined concepts, consequently creating an uncommon approach. In order to be proficient with React, you or your team will have to get accustomed to component-based architecture, JSX, and unidirectional data flow applied by Flux either Redux.

React applications encompass multiple components. A component file incorporates the business logic and HTML markup (JSX markup -> JS functions).

Flux, Redux or similar JS libraries provide communication between components.  And it is also React that coined special objects: state and props.

There is an exhaustive list of libraries which can extend React’s flexibility. Yet, this advantage spirals downward into a freedom of choice conundrum. Since, you might spend unnecessary time choosing what’s best as min-maxing is quite the hobby […] thus disrupting development workflow and wasting valuable time. Again, consider React part of JS frameworks or a JS Library – you’re still right. We don’t want to kick-off the III-rd WW though, so […] within this article, since this one does not feature IoC is a JS Library.

JS Frameworks: Angular

Angular, released on October 20, 2010 by Google aby a devoted community of individuals […] and corporations  […] pursuits the intent of addressing common issues in the development cycle of single-page applications. However, with several other popular tools making their way through the market […] the Angular.js team has decided to shift their focus. So, in 2016 the bright minds at Google came up with a new and improved version called simply Angular.

An important change that occurred is the transition from an MVC/MV* […] depends on what your hired developer wants to hear – to a component-based architecture. You can assume everything as component-like directories, services and so on.

Angular has quite some challenges to its name. Empelled to use TypeScript – the superset of Javascript? If you are familiar with Angular v1.X then you can scrap the knowledge as you have to relearn everything […] except some tiny leftover bits. Angular v2.x has yet to achieve the maturity and popularity of its former brother […] but together they have managed to conquer the hearts of many developers. This one though … widely as a JS Framework.

Vue – a JS Library

Evan You, a prominent Google employee […] no surprise here,- made his Frankenstein framework by combining the best of two worlds: Angular and React. Vue stores component logic, layouts and stylesheets in one file, which is similar to how React doest without the stylesheets. Also, uses props and state objects to enable communication between components.

As for what Mr. Evan managed to grab out of Angular; combining HTML layouts with Javascript.

Why consider this amalgam of goodies? First, Vue is worth considering over React when taking into account the usage in large-scale applications. React+Redux requires small changes being done in several files. In contrast, Vuex library is a less hassle experience.

In the case of Vue over Angular it boils down to:

Angular is more restrictive, while Vue loosens your leash.

The main problem of Vue == reduced popularity. Which in return means fewer contributions and plug-and-ready solutions. Therefore, some issues  need to be dealt with by writing your own code. Now, despite the fact Vue advertises itself as a framework […] no IOC is embedded (a common traint of JS Frameworks), so Vue == JS Library.

JS Frameworks: Ember

Ember started the journey in 2011 and was crowned the best Javascript framework in 2015. Times have obviously changed but that does not mean Ember cannot challenge the dominating players of the market. It provides the same component-based approach similar to Angular, React and Vue. Out of them all, Ember is considered the most difficult as it involves a convoluted architecture […] however, it is the same complexity that lessens the task of developing massive applications. Again, This one handles IoC on it’s own, so it’s safe to say == JS Framework.

JS Frameworks: Backbone

Backbone is the good old granddad of Front End or JS frameworks. Jeremy Ashkenas created this library and published it in 2010. Compact, organized and efficient – doesn’t seem like the qualities of a granddad.  Backbone implements a MV* framework and the idea of acting as a literal “backbone”. It will be wise to not treat it as an all-in-one tool.

Hammer Time

Since we’ve introduces all of our contestants, let’s check on their popularity pulse. To make it fair for everyone, we’ve defined the following contest margins:

It doesn’t take a trained eye to see that React here, comes in first, followed by Angular and Vue. It appears we might have 3 fighters in the tournament after all – regardless if we’re talking JS Frameworks or Libraries.

At the #stackoverflow’s end the trend appears to be steady. React is leading leaving Angular and Vue quite far behind:

Amongst NMP Trends, React leads again with an average of over 6 million downloads in June 2020:

Ember comes right out of the box with a fantastic fully-fledged data module which eases integration with RESTful JSON API. Moreover, the Run Loop […] a most effective and efficient work queue, alongside other useful programming goodies […] aids the overall performance and loading speeds. The community has spoken: React, Angular and Vue seem to be the hotties of front-end scripting […] though we’ll hold our horses and pair first-runners against their strongest opponents and eliminate each framework, in a Mortal-Kombat style. Don’t worry, we’ll arrange a fight between those coming in last too.

Angular vs React – JS Libraries VS JS Frameworks

React is a UI development framework, as such apps written in React will require additional libraries to be used. On the other hand, Angular is a full-fledged JS framework, so functions  […] data binding, component-based routing, project generation, form validation, and dependency injection – are implemented with the help of Angular package.

React is minimalistic and is quite easy to pick up if you are having a breeze applying JavaScript. However, due to the non-existence of a predefined project structure, it may take some time to get started. Moreover, taking up React would also mean learning the Redux library (mainly used for state management).

Angular is not minimalistic by any means […] it is huge and it is going to take time getting accustomed to the best practices and concepts. There is a lot of complex and intricate programming design embedded right into the framework core. Meaning the developer has no way around it. Also, don’t forget the necessity of knowing TypeScript if you plan on using the newer version of Angular

React is one of the most popular JS frameworks, consequently, the community behind it is enormous. Even if there are frequent updates, issues can be solved by asking on programming forums.

Version 1.0 Angular was not so successful and put a lot of strain on going forward. It was used to be dismissed due to the needless overly complicated style – looking at you Prototypal Inheritance, […] but being developed by Google and frequent updates have put it back on track falling just short of being the first place in terms of popularity.

And the winner is: React* advancing to its next opponent.

Vue vs React – a JavaScript libraries fight

Vue and React are both great tools for building a web-enabled software, […] however, it all boils down to a number of factors you must take into account as you choose. Specific use case, business needs, developer availability, budget are all serious concerns that must be addressed […] beside somebody saying: “Let’s do it in Vue, it’s fresher.”

Vue is lightweight, easy to learn, and considered pleasant to write in. Thanks to the familiar templating syntax and use of components, developers can migrate their existing work […] or integrate it step-by-step to Vue. That is why Vue is steps out of the startups area joining large-scale application stage as well.

Vue has official packages for state management, routing, or server-side rendering. Thus saving you the trouble of figuring out a third-party plugin posted on a questionable forum. Moreover, Vue CLI and UI make setting up a project a real breeze.

React is somewhat of a veteran. Boasting corporate support, large community, and an active ecosystem, React is a good choice when considering enterprise-grade applications. In addition, the job market has more available and experienced React developers due to its maturity.

Yet again the now absolute winner is: React** –  so basically we can move on to our junior league.

Ember vs Backbone – a JS Frameworks battle

Ember does without a lot of boilerplate code thanks to the ability of self-inferring […] automatically determining the name of the route and the controller when defining a router resource. Should you forget creating a controller, Ember will do it for you.

Loads of outdated content still lives, posted on developer forums due to the influx of API changes Ember experienced. The Ember Data Changelog has gone through many iterations,  which might confuse both knowledgeable developers and beginners alike. Backbone is lightweight, fast, and is the smallest sized framework, consequently […] there are just a few simple concepts when starting out. Funny enough, you can skim through the entire source code in less than an hour.

Documentation == on point. + a fully commented version that explains in detail the whats and hows. Backbone, as the name implies, is a good foundation to start building your framework. While other JS frameworks – Ember included – impose their programming choices on you […] Backbone gives you freedom wings that come at the price of uncertainty. Since Backbone provides no structure, it is up to the developer to take care of the blanks. Memory management and careful route/state changes are amongst the important things. Indeed, you can add a lot of functionality through third-party plugins[…] but that poses the danger of making the right choice. One functionality might require various alternative plugins. And you must research them all which takes time.

Summing-up

You might be wondering how in the world Backbone came in last!? After all, it passed the benchmarks with flying greens and you would be right considering the package size […] just a measly 7kb. As you are aware the browser will request the framework package in order to render the page. Therefore, a lower size is faster and better for the user. It is true, If being fast and furious is your aim, then, by all means, choose backbone and laden it with other libraries for your cause […] keep in mind though: this will eventually add to its size, rendering the lightweight scope right down to irrelevancy.

The crown goes to React. I wager this decision on the popularity of the framework. You have more people in the React field, consequently more plug-and-ready solutions available now and in the future. Truth be told is that most modern frameworks & libraries are fast and maintainable if the developers understand how to use them to their capacity. If your team is invested in a framework/library/stack it makes no sense to switch to another one, […] unless there is a strong justification for the benefits it may provide, opportunity costs considered.

Every framework is built on the idea that: “in the making of such types of applications […] we have encountered X, so here’s some code to make that easier”. After all, Angular is basically why Javascript isn’t Java and why Ember isn’t Ruby.