Let’s try to understand which are the main javascript frameworks and which resources to consult to better understand and choose an MVC javascript framework.
The contents of the article
- Before we start, why javascript?
- The javascript framework MVC
- Let’s understand better how they work
- The most popular frameworks
- AngularJS
- js
- js
- js
In this article we will try to understand which are the main javascript frameworks and above all which are the resources to consult to better understand (and therefore choose) an MVC (model-view-controller) javascript framework.
Don’t know what the MVC design pattern is ?
Then I suggest you take a look at my article in which I talk about the anatomy of a webapp based on mongodb, node.js and backbone.js as an MVC framework:
https://www.pensando.it/wp/2014/06/tech/anatomia-di-una-node-js-webapp-realizzata-con-mongodb-node-js-e-backbone-js
Before we start, why javascript?
Because javascript has a number of significant advantages that make it very interesting in the panorama of current programming languages, such as:
- Full stack development:possibility of using the same programming language for the entire application chain: client (e.g. backbone.js, Angular.js, jquery), server (node.js) and database (e.g. mongoDB)
- It’sportable : simple portability of a javascript webapp on mobile devices (smartphone / tablet / desktop) through the use of frameworks such as phonegap and cordova
- It is Popular: it is one of the most known and widespread programming languages in the world (if not the most popular), this makes it very “attractive” for the computer industry of the moment and ensures that there is a continuous interest around it from the worldwide developer community.
- It is Responsive: perfectly integrated with HTML5, it is an integral part of web 2.0
- It’s Fast: by its nature javascript is a fast and performing language, event-oriented or even event-driven, natively in its server version (node.js) but also in the client version if well structured (e.g. jquery)
These are just some of the advantages of javascript, I could mention many others as well as I could also mention some defects, first of all the fact that not being compiled, if badly used, it could really cause damage and be unsafe.
Having made this brief premise, let’s go back to the various javascript frameworks in circulation.
The javascript framework MVC
To the question: “ how many javascript frameworks are there in circulation? ”
The answer we could give is: “ many, perhaps too many! ”
These are just some of the main ones:
- js – http://backbonejs.org/
- AngularJS – https://angularjs.org/
- js – http://emberjs.com/
- KnockoutJS – http://knockoutjs.com/
- React – https://reactjs.org/
- Dojo – http://dojotoolkit.org/
- YUI – http://yuilibrary.com/
- js – http://agilityjs.com/
- js – http://kmalakoff.github.io/knockback/
- CanJS – http://canjs.com/
- Maria – http://peter.michaux.ca/maria/
- Polymer – https://www.polymer-project.org/
- Mithril – http://lhorie.github.io/mithril/
- Ampersand – https://ampersandjs.com/
- Flight – https://flightjs.github.io/
- js – http://vuejs.org/
As you can well imagine the answer on ” which one to choose ” is not simple, it depends on many factors that we could summarize in this way:
- Choice based on the know-howof the development team
- Choice according to the affinity(preference) that a programmer could have towards a framework
- Choice on the basis of the most successful on the market
- Choice based on online documentation
- Choice on the basis of the robustnessand completeness of the framework
In short, we could choose the framework using one (or more) of the criteria just mentioned, the fact is that it is important to choose and choose well.
Let’s understand better how they work
If you want to get an idea of how each of the frameworks just described “works” on the same application (ToDo app) then you can’t not consult the following link:
http://todomvc.com/
A collection of code, documentation and examples in relation to numerous javascript frameworks all based on the same application, precisely an app that manages the “to do” (ToDo)
Examples are collected for:
- framework in pure javascript
- frameworks that compile in javascript
- beta framework in pure javascript
In all three cases they are further divided by framework:
- mvc
- realtime
- server side (node.js)
- applications created with “non-framework” implementations
It is therefore a useful tool for comparison and analysis between frameworks.
The most popular frameworks
Having said that, I cannot fail to mention the main ones, i.e. the most used and known among those listed and on which, in my opinion, it is good to pay particular attention:
- AngularJS – https://angularjs.org/
- js – http://backbonejs.org/
- js – http://emberjs.com/
- js – https://reactjs.org/
This is the trend of google searches in relation to these three frameworks
AngularJS
The first is the framework from Google , probably (to date) still the framework with the best appeal among the four, certainly the one that has a higher learning curve but certainly the most requested, together with react.js, to date on the market and also the most complete and documented.
It has no dependencies on other libraries and is licensed under MIT, these are some references:
Google official documentation
https://docs.angularjs.org/guide
Three great tutorials on Angular best practices
http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/
http://www.artandlogic.com/blog/2013/05/ angularjs-best-practices-ive-been-doing-it-wrong-part-2-of-3 /
http://www.artandlogic.com/blog/2013/05/angularjs-best-practices-ive-been- doing-it-wrong-part-3-of-3 /
Another interesting tutorial on how to build a webapp starting from a standard template
http://code.tutsplus.com/tutorials/building-a-web-app-from-scratch-in-angularjs–net-32944
React.js
React.js is a javascript library developed by the creators of facebook that allows you to create Single Page Applications (SPAs) in a simple and intuitive way.
To date it is most likely, together with Angular, the most used and known javascript framework in the world.
Every single react component is a javascript class that extends the Component class provided by react. Each component represents a ” snippet ” or ” widget ” that is an independent and self-consistent piece of HTML code that implements a specific application functionality on the client side. The writing of the code is based on the JSX syntax specially created to facilitate the interaction between javascript and html.
Find all the documentation at the link: https://reactjs.org/
Backbone.js
The framework, of the four, that I know best and of which I can therefore speak with knowledge of the facts.
Many do not consider it a real framework but more an excellent tool for modeling and structuring the code.
This is (partly) true even if, in my opinion, it is precisely this feature that makes backbone an interesting choice precisely because it leaves more space for the programmer and less for the framework.
I like this, but mine are only personal opinions and “affinities”.
The fact is that Backbone , unlike Angular, by itself is not much use, it must necessarily be combined with underscore.js and jquery , moreover it is recommended to combine other small libraries to “customize” it and make it actually a good product.
As mentioned it depends on underscore.js although it is recommended to include jquery to support some features, it is licensed by MIT and these are some references:
Documentation
http://backbonejs.org/#introduction
Some tutorials
http://backbonetutorials.com
One of my articles
https://www.pensando.it/wp/2014/06/tech/anatomia-di-una-node-js-webapp-realizzata-con-mongodb-node-js-e-backbone-js
Ember.js
Of the four, it is the framework that I know least, formally known as Sproutcore 2.0 was created to make it as easy as possible to build webapps in javascript.
Relatively young, you can approach it if you don’t know any framework and don’t have the time to learn Angular.js.
It just depends on jquery and Handlebars for templating, it is licensed by MIT and these are some references:
Official documentation
http://emberjs.com/guides/
References to some tutorials
http://emberjs.com/community/#footer
As we have seen, the choice of an MVC javascript framework is not easy due to a series of factors including the number of options available, the characteristics of the framework itself, the peculiarities of the development team and much more.
