HTML means hyper text markup language and it’s a language for adding markup elements (Tags) necessary for making the structure of the document.
The HTML is processed by the HTTP client (Browser) for showing the web pages.
An evolution of the HTML document is the XML (eXtended markup language) which allows to convert any object to this type of data and make the communication between different systems or storing configuration.
The HTML pages can have different color, style, font so it was necessary one more language for split the structure of the page from his style and CSS were born. CSS is Cascade Style Sheet because it works in cascade from the root of the HTML document to the leaf.
The HTML pages have a logic inside about how to populate it, how to validate the choice of the user and about its behavior, how to communicate with the back end using SOAP (REST). The way for making this logic is using Javascript
Javascript is a language for making dynamic HTML document adding nodes, making conditions, check if the input of the user is correct.
Initially we had the first three technologies:
- HTML: structure of the page, its skeleton
- CSS: style of the page
- Javascript: make HTML and CSS dynamic
One Next library useful for making Javascript easier to use is JQuery, JQuery allows also to create plugins easy to embed in your web page for instance if you need a table with fixed header you can download the Jquery plugin and embed in your web page
Another step forward was making the front end framework which contains already written component made of HTML,CSS, Javascript in this way the developer shouldn’t make one menu from the scratch but it’s enough using the component.
These frameworks are the Twitter Bootstrap and Foundation
Another improvement is making CSS “Object oriented” with the possibility of making inheritance and reuse of styles and they were born LESS, SASS and all CSS preprocessors
Another idea was to make a Javascript server in this way the Javascript developer can work back end side and it was born NodeJS.
I was able to integrate NodeJS with Mongodb, Rest services and SQL database. it’s a real back end server made of Javascript
There are many Javascript libraries and write a huge HTML file with many imports on its head is bad for this reason NodeJS allows to execute the build like Maven and Gradle for Java using NPM (Node Package Manager) and the evolute building tools like GruntJS and GulpJS.
At this time we had many already built plugins:
- Javascript pure: allows to do everything but it’s complex
- Foundation and Bootstrap with components already built which are mobile first
- Jquery: with plugin already built
Instead of building a HTML page from the scratch it’s enough to find the component and embed it in your page.
Another challenge was making Javascript more object oriented and the first framework which allows to do that is RequireJS
var messages = require('./messages');
var print = require('print');
print(messages.getHello());
Messages:
define(function () {
return {
getHello: function () {
return 'Hello World';
}
};
});
so now Javascript is object Oriented.
Then Google invented its AngularJS which is very powerful.
Now Javascript is an hybrid between functions for navigating HTML document and Object oriented.
A huge step forward was made by ReactJS and EXTJS because both these languages are fully object oriented: you don’t need to make HTML tag of the div but just to use the “Div” object which will be rendered as DIV.
The developer doesn’t need to write HTML tags but just using an object provided by the technology which will be rendered as the necessary tags.
And now there is the monster AngularJS2 which is fully object oriented like ReactJS and EXTJs and needs to write a perfect Javascript code:
Javascript is a language without rules so you can do something like this:
var a=0; //a is a number
a="hello";//now a is a string
a.color="red";//now a is an object
a=function (){}; //now a is a function
if you embed this code in your html page with the script tag it works.
If you use AngularJS2 it doesn’t work because you should compile the code with the Angular framework and then build it in a HTML file.
So the tag script doesn’t work anymore
Comparison between all technologies
- Using only HTML, CSS, Javascript for making an HTML page is difficult even because the most of the site are responsive etc. Why build one component from the scratch when there is one already built and tested carefully?
- Bootstrap,Foundation, Jquery: made plugins for extending the old version of Javascript not fully object oriented but made of functions for make dynamic a HTML/ CSS document
- AngularJS, ReactJS, AngularJS2, ExtJS, RequireJS: made a new way of using Javascript Object oriented making a conversion from their objects in HTML tags. You don’t need to write HTML tags anymore but just the object using your framework and it will be converted in HTML tag automatically
- SASS LESS and all CSS preprocessors make object oriented CSS styles
- NodeJS with NPM, Grunt and Gulp is an evolute Javascript web server
- AngularJS2: is not only a object oriented framework but also it requires to use NodeJS for validating the web page and for building it. AngularJS2 is a little bit more complex than the other front end frameworks but it’s better structured.
Integration of technologies
If you work with HTML file you can use all technologies together: HTML, CSS, Javascript, JQuery plugin together with a Foundation component and a Bootstrap component. That’s easy to do it’s just enough to import the js file in your HTML document
If you work in an Object Oriented Domain the integration with the technologies is very hard because an ReactJS class is finally converted in HTML tags so you don’t have the fully control of the final HTML document.
Fortunately there are ReactJS classes which produce Bootstrap components etc.
So if you choose to use ReactJS your web application it should be built using only ReactJS, the same for AngularJs2 and ExtJs.
AngulatJS1 is an hybrid so it uses html tag with special attributes such as ng-app, ng-if, ng-switch so it’s easily integrable with Bootstrap Foundation and other frameworks.
Finally which technology should I choose?
It’s necessary to choose one technology fully tested and with a plenty of components already built
AngularJS is great even if it’s not fully object oriented it can used with JQuery, Bootstrap Foundation and all plugins. I believe it’s the best technology to use.
ReactJS has been built since a long time and if it’s not possible to use with all JQUERY / Bootstrap /Foundation components, there are many libraries and many components already built and it’s fully object oriented
AngularJS2 it’s the best framework but it has been built two months ago and I believe there are few components already built and since it’s object oriented it cannot be integrated with Jquery plugins bootstrap foundation. If needed to do something and it’s not available any component already built you should make it on your own. Is it worthy?
I believe we should wait a little bit more for using Angular2 in real important big projects
