Front-end Web development is no longer an obscure Internet discipline. Bhavesh Vora, captures the rise, fall, and the powerful comeback of front-end technologies, from a perspective of none other than a front-end developer.

A few days ago, I watched Life of Pi. The key protagonist in the movie, Pi Patel, battled various odds to survive in a lifeboat that went adrift in the middle of nowhere and thereafter lived on to share his epic journey. Days later, while at work, I was reminded of the same movie. As a front- end developer, currently working on the MEAN (MongoDB, ExpressJS, AngularJS, NodeJS) Stack, I could draw parallels to it. I too faced the odds, experienced the ups and downs of front-end Web development and witnessed the resurgence of front-end development technologies. Like Pi, I survived and so did the front-end technologies. How the front-end technologies evolved, despite losing ground in between and how they grew to be more nuanced and continue to be increasingly relevant is a story that needs to be shared. I call it Life of FED (front-end developer).

Flashback

Initially, when front-end developers started working on HTML version 1.0 to 4.0 and XHTML 1.0, there were many browser specifications for rendering layouts, images and animations on the web page. The specifications made the development of a web application difficult. In 2004, new standards arrived which helped to develop a rich internet application (RIA) using the trio of HTML, CSS and JavaScript. In this environment (pre-XHTML 1.0), most of the animation requirements were fulfilled by using Adobe Flash.

Front-end developers until a few years ago also had to battle the challenges that came with WYSIWYG software and Flash Technology. Flash Technology enabled the front-end developers to build interactive and animated experiences but it did not support Search Engine Optimization (SEO) within Flash websites. It also required additional browser plugins, which many users were not willing to download or update. Though considered as good solutions for font end development, PHP, Java and .NET also required special hosting and additional browser plugins.

Frustrated with incompatible browser implementations and fractured standards, there came a time when professional developers started losing hope in HTML. And that is when JavaScript Libraries and a new version HTML5, a superset of HTML came in and lent a new lease of life to the dying front-end technologies. Libraries like jQuery, MooTools, and Prototype made developing sophisticated user interfaces across browsers much easier, and freed up web developers to apply their creativity to new forms of interaction. The parallel development and popularization of AJAX ensured that web applications could now change with evolving data and not just based on the user interaction.

(Also on Ness SES: JavaScript Frameworks in the Digital Economy)

The new HTML5 also provided an array of new features while supporting backward compatibility and giving front-end developers robust, faster and capable browsers. Some of these features included the following:

• Simple Semantic Markup
• Javascript API’s (Geolocation, Canvas, Web Storage, Web Workers, Web Sockets, File API)
• Local SQL Database
• CSS3 layout techniques
• Support for Audio, Video & 3D rendering
• Form controls

The Story Today

Front-end Web development is now well into rich client-side web applications enabled by fast JavaScript engines in browsers like Firefox and Chrome and have tools like HTML5, and JavaScript application frameworks like Angular.js, Backbone.js, Knockout.js, Sencha ExtJS, among others. The pace of innovation in Web experiences is still accelerating, and has created a specialized set of front-end developers who are sophisticated at design patterns like MVC and MVVM, event-driven programming, and RESTful APIs, and are constantly prototyping and learning to stay ahead of the curve.

The current front-end Web development environment is nothing like it was in the past. The computers have become faster, the browsers have become more capable, the Web has been transformed from a notice board into a real business place, and both customers and companies have taken notice of it. This has created a new demand for a reliable, functional, and a fast Web experience. And this is exactly what has happened: the Internet is overflowing with useful open-source tools. The production flow can be fully automated, deprived of unnecessary redundancy, with the chance of errors reduced to a minimum. For nearly each part of the development process there is a choice of top quality tools. Just to list the basic ones, included in our development stack:

• Bower for managing dependencies
• Gulp for build automation
• Jasmine for unit testing
• Modernizr for feature detection and thus graceful degradation
• Sass for dry and effective stylesheets production
• JSHint for JavaScript correctness
• Twitter Bootstrap for fast development of responsive layouts
• Assetic for backend assets management
• js as a platform
• Chrome Canary Developer Tools for debugging and analysis
• GIT for collaboration

The Story Continues…

In the days to follow, front-end Web development will continue to be driven by increased efficiency, greater customization and ease of use. JavaScript is already expanding into areas beyond the Web, even beyond the “front-end.”  Front-end Web development is no longer an obscure Internet discipline. Unlike the movie Life of Pi where the story ends, Life of FED, certainly promises to have a sequel. After all front-end developers are evolving into “JavaScript Developers” and are using their skills for a variety of devices and platforms.