Modern technologies and tools for Front end development

Introduction

HTML5 is emerging fast and growth of frontend technologies are evolving day by day. Now HTML5 is not only used for web app development but also used for the other areas like mobile development etc.

A few years ago, it is web developer’s headache to maintain the browser compatibility on different OS / Browsers. Development time was too large and it is tough to maintain the browser compatibility especially IE. Gradually Microsoft starts following the W3C standards. But now a days who is using Internet Explorer? (If you are working in a corporate environment you might forcefully use the Internet Explorer. That is a rare case!). Microsoft is late to start following the standards. So now IE is almost out of the market (?) and this place is handled by Chrome, Firefox etc. The raise of chrome is another reason for Internet Explorer’s present stage.

As we all know, HTML is the base of webpages. In the earlier stages, we were using the HTML table tag for web page designing. And we placed the image slices for a better look. Later it has been changed and we were using XHTML with CSS. It eliminates unwanted images, better compatibility, and speed. But at that time also, we couldn’t use good fonts. We were using some image replacement techniques using CSS and SIFR (https://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement). We used flash for the animations, audio, and video.

But now things changed. Below is a brief summary to share the various frontend tools/technologies used today:

HTML5

The development of HTML5 had a big impact on the web industry. Now we can make use of HTML5 for Geolocation, local storage etc. I think, more built in HTML5 APIs will be released soon like vehicle information APIs, Vehicle data interfaces etc. I am really excited to read the documentation about the future of the web in the w3.org. Seems it is about to conquer in our daily life as in the form of digital publishing, TV industry, Telecommunication, Web of things, web payments, web security, ioT etc.

CSS3

CSS3 is the latest evolution of CSS. CSS help to build beautiful and intuitive websites. Now a lot of devices start supporting HTML5 and CSS. Now we can start use of CSS styling for TV, watches etc

Javascript

Also, the development of JavaScript is impressive and every day you might be hearing about a new JavaScript framework or library. The development of jQuery, AngularJS, Node.js etc (and many more ) help the developer to build rich internet applications and it helps to maintain the browser compatibility.

Building and maintaining native mobile apps vs HTML enabled apps

The other impact of the html5 is its ability to develop the mobile apps using different frameworks available in the industry. Most of them are open source too. Apaches Cordova, Adobes PhoneGap and Ionic frame work, React Native are some examples.

Use of task runners & bundlers.

Most UI developers are using task runners. If you are building 20 or more HTML templates from the PSD, it is very useful. But for a small project, it is not necessary to use the task runners. Here is the highlight of the task runners.

• Task runners help to achieve a common standard across the project.
• Use of task runner help the project to maintain at the optimum level (By using image optimization tasks, css compression, js compression etc)
• Task runner help to maintain common coding standard across the project.

Grunt and Gulp are popular task runners.

Bundling is also playing an important role in big projects. It helps to stitch together a group of modules into a single file. Most of the JavaScript frameworks are supporting module. Eg: In angular 2, webpack can be used for the module bundling. Here is the list of popular module bundlers.

• CommonJs
• Bundling AMD
• Webpack

Editors

Editors playing an important role while coding. The choosing right editor will help to build the application in a right way. It will help to code much faster, well formatted and well organized. Now a day most of the web developers are using sublime text and brackets. Both are enough simple to handle and light weight.

Versioning technologies

There is 2 type of versioning systems are widely used. Subversion and Git. Both of them have their own advantages.SVN is much simpler to learn. Git is really good when your team decentralized. Git is perfectly suited for open source projects. You can fork it, commit to your own fork and the original user can pull your changes. For a complex bigger projects, you can use the gitflow utility.

Browsers

Modern browsers are shipped with debuggers and developer friendly tools. A good example is chrome’s development toolbar. A few years back, web developers were using firebug and this time chromes development toolbar. It will help you to build a responsive website in a better and faster way. Also, you can toggle between devices, throttle network speed etc.

Final thoughts

The web development came through a lot of transformations. Now, most of the desktop software and apps are collaborating with the internet. Most of the traditional standalone applications (eg. Accounting and finance tools) are transformed to web based applications. In future, more applications will be developing as cross-platforms applications using JavaScript, HTML, and CSS.(Eg: http://electron.atom.io/). I believe JavaScript will be playing a major role in the development of future software tools. We expect a lot of new and exciting JavaScript frameworks / libraries may come in the near future.

Finally front end developers are getting recognized and will play a key role in making a better web experience to users.