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 frameworks. The virtual policemen that keep nerds in check by easing the access to best practices.
Explaining 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.
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.
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.
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, 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 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 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). Communication between components is realised with Flux, Redux or similar JS libraries. 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 can quickly turn into the same downward spiral of being burdened by freedom of choice. 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.
Angular was released on October 20, 2010 by Google and a devoted community of individuals and corporations with the intent to address arising 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.
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. The communication between components is also realised by using props and state objects.
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 will require 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 is reduced popularity, which in return means fewer contributions and plug-and-ready solutions. Therefore, some issues will need to be dealt with by writing your own code.
Backbone is the good old granddad of Front End 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.
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.
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: