Overview of Web Technologies - For beginners

The target audience for this post is folks who are trying to step into the world of web technologies. When I stepped into web application development, it was a really bumpy ride for few weeks. I wouldn't say it was because of the complexities, but mainly because of the plethora of technologies I came across. I started my learnings by talking to folks who are actively working in this space. They threw new terms at me every time I talked to them. I had to do lot of Google searches on each and every new word I heard and finally connected everything I learnt. I am attempting to write what I learned hoping that it would help someone out there who is a beginner in Web Application development. Experts can ignore as this article has nothing to offer them. I would also like to give a disclaimer that web technologies change in the speed of light and the technologies discussed in this post might get outdated as time goes by. The intent of this article is to describe some of the common jargon you hear and help you move forward.  Being said that let me share what I learnt so far.

If you look at the history, web technologies evolved over years. The moment you enter the world of web technologies, you will start hearing terms like HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and Java Script. HTML was introduced in 1990 and evolved over years. HTML is at version 5 at this moment. Web Browsers interpret HTML tags and in turn display the contents.   CSS is a language use for describing the presentation semantics of a Web page. It tells a browser how to render a page. CSS provides many selectors which can be used for locating the HTML elements you want to provide a specific style. Examples of selectors are the id selector, the class selector and the type selector. Every CSS rule set consists of a selector and a declaration block. The contents of the declaration block specifies the style that should be applied to the element pointed to by the selector. For instance, the CSS rule p {color: green; text-align: left ;} tells the browser to show all the paragraphs to be left aligned with green font color.

When I heard the name Cascading Style Sheets I wondered why it is called “Cascading”. Here is the answer. CSS allows us to specify the style sheet for a particular HTML page in different ways. For instance, an external Style Sheets can be specified using the HTML LINK element or by specifying an embedded style sheet using the HTML Style element. Another way is to import a style sheet using @import too. Now the question is which style rule would be taken if a style rule is specified for the p element, using both the external and the embedded style sheet? The term cascading comes into picture during this scenario. CSS generates a single virtual style sheet looking at all the style rules specified using different methods mentioned above. During that process if it finds a conflict between style rules, it uses a weighted scale to find out the winning style. Each style rule has a specific weight and the rule with highest weight will win if a conflict arise between rules. For example if a style sheet rule is present for an element in the “Linked Style Sheet”, “Embedded Style Sheet” and in the “Inline Style Sheet”, the “Inline Style Sheet” rule would win the race. The method of finding the weightage is a bit more complicated but that is not in scope for this article. So far we saw how HTML and CSS work hand in hand to provide a rich user experience. Next comes Java Script!

JavaScript is used to program the behavior of the web pages. It was developed at Netscape and was originally called LiveScript. The most interesting thing about Java Script is that it has no relation to Java. After its release in 1995, Netscape submitted JavaScript to ECMA International for consideration as an industry standard. ECMA International developed a standard based on it and is named as ECMAScript. ECMAScript evolved over years and the most recent version is 6.0. Different vendors implemented their own Java Script engines based on the ECMAScript specification. Few examples being, the V8 engine used by Chrome and Jscript engine developed by Microsoft and is used by IE.
Web programming today is way different from how it was in the initial years when HTML1 was released around 1992. Those days web was just a bunch of static pages. When Java Script was introduced around 1995, developers used plain Java Script along with HTML to create interactive Web Pages. Java Script was mainly used for validating user inputs before submitting the request to server. As main computation always happened at the Server, web sites always used the Request Response pattern. Web started becoming more and more popular and this Request-Response pattern was not able to provide great user experience.

So the next big thing in the market surfaced. It was “Asynchronous Java Script and XML” a.k.a AJAX.  AJAX enabled Web Pages to behave more like Applications. With AJAX, Web applications were able to send request and get response from the Server asynchronously which eliminated the need of posting the whole page to server. As data interchange layer is separated from the presentation layer AJAX allowed Web Applications to update portions of Web Pages dynamically. In addition to the evolution of new technologies, a set of java script libraries also evolved over time. One of them is jQuery. jQuery is a lightweight client side scripting library which is used for modifying the data on the page dynamically. Another important thing to know about jQuery is that it was built to abstract away the various browser idiosyncrasies. It works with the DOM without having to add browser checks and so on. So with the combination of jQuery and AJAX, web pages gave way to Web Applications, the new revolution.  As it is possible to load a single HTML page and dynamically update the page based on user interactions, they are named as Single Page Applications (SPAs). The main advantage of SPA is that it reduces the load time of pages and the amount of data transfer from server to client.

So to summarize, in the case of traditional web pages, whenever a request is made, the server responds with a new HTML page which triggers a page refresh in the browser. But in the case of SPA, after the first page loads all the interactions happens through AJAX calls. The AJAX calls returns data, either XML or JSON and client side script would update the UI without reloading the entire page. Even though AJAX and jQuery solved many problems, developing a complex web application was still a challenge as they suffered from issues such as lack of modularity, strong coupling between data and DOM. Those paved way to the introduction of Client Side Java Script frameworks like Angular JS, Ember, Backbone etc. Angular JS is developed and supported by Google. Another client side framework is React JS by Facebook. It is a highly performant view renderer made by the Facebook team. When Facebook developed React, they also developed an architecture for building User Interface applications with React. It is called Flux. There are multiple open source libraries available that follows Flux architecture which can be used along with React JS. But you would need to mix and match. Frameworks like Angular JS is a complete package and you need not mix and match. Each of these frameworks has their own strengths and there are many articles in the net comparing those.

In addition to the java script frameworks mentioned above, you would come across so many useful java script frameworks and libraries when you start working in the field of Web Application development like bootstrap.js, D3.js, Grunt.js, Underscore.js and many more. Every library serves a distinct purpose and every web application is unique. So, based on the needs of your application you choose the right library based on a research.

All the best for a great start in Web Application development!

This article is copied from my own blog http://securityunlimited.blogspot.in/