What is all the fuss about with front-end development?

Evolution of Front-end Development

Many enterprise software developers still wonder why everyone is so concerned with client-side applications, HTML 5, Javascript, and front-end related “stuff.” Such skills are very notable on job postings nowadays, even for enterprise development based on Java, .NET, and Rails (which are server-side technologies). A developer might ask: Why does nobody seem to care anymore that I have a Java architect certification if I don’t know about RequireJS, AngularJS or whateverJS (front-end development tools)?

The truth is that pretty much every enterprise software developer from the last decade should expect an evolution boom on the server-side development instead of the client-side. Just look at how Java, .NET, and Rails have developed across MVC frameworks, web services, cloud connectivity, security, multi-threading, and persistence. As if this wasn’t enough, server-side development trends towards SOA, ESB, EAI and clusterization are very notable as well. So what is going on?

About a decade ago, web applications started overtaking desktop applications (usually developed in Java Swing or VB.NET) in order to improve compatibility with the user’s computers. By adopting HTML for the user interface (UI), we no longer need to worry about the user’s operational system, as long as the user can access a web browser. This way, our software can even support mobile devices!

Now, let’s get back to the server-side enterprise development. While it is continuously evolving, it is still part of a web application bound to the same known limitations for the web such as request, response, session, cookies, and so on.

Buddy, you gotta trust me when I say the end user doesn’t care that the server-side is perfectly engineered when the client-side is sluggish — all that the user sees is the web application as a whole concept. This means that the user experience (UX) must be prioritized as well, otherwise this user might switch to another vendor with a more effective UI.

With the web browser as the ultimate UI software, we need to overcome its limitations and provide the best possible UX in order to attract more users. And all they want are fully featured applications that are fast, responsive, and stable — as desktop applications have been in the past.

This, buddy, is what this fuss is all about — providing the desktop experience to the web user. This is the ultimate goal of every web application. This is the key to win the market.

All in all, it comes down to a few line items:

  1. Reducing the page load time. This can be achieved with a few optimization techniques such as compiling all JS files and CSS files to a single JS file and CSS file, minifying those files, compressing the response using gzip, and adopting a CDN (Content Distribution Network) to deliver such files from a server closer to the end user. All of this can be automatized using a task runner such as Grunt or Gulp.js.
  2. Reducing the response time from seconds to milliseconds. This can be achieved by using more AJAX to fetch only the data and leave the rendering to the browser. For this rendering we have Javascript template engines such as Mustache, Handlebars.js, dust.js, or Jade.
  3. Improving the navigation experience. This can be achieved by getting rid of page reloads, so the user would see the site as a SPA (Single-Page Application). For that we have Javascript MV* frameworks such as Backbone.js, AngularJS, Ember.js, or React.
  4. Reducing the Javascript processing time. This can be achieved by adopting an asynchronous Javascript module loader such as RequireJS or YepNope. Favoring native browser features instead of depending on plugins such as Flash to render animations, audio, and video. This can now be achieved with HTML 5, CSS 3, SVG, and OpenGL.
  5. Adopting reusable components to improve semantics and save in downloaded content. A new universe of Web Components is coming out soon, and currently can be achieved with libraries such as Polymer and X-Tag.
  6. There is much more about optimizing web pages, so do your own research about other techniques available. Make sure you look at HTTP2 & SPDY, WebSockets for transmitting binary data, localStorage, and offline mode.

My final advice is that every type of software developer needs to learn more about all these new libraries and stay tuned to the front-end technologies. You won’t regret it — and nor will your resume!

Originally published at www.avenuecode.com/code-highway on August 25th, 2014.