Front-end development

Developing the user facing part of websites has become increasingly complex by becoming highly interactive and offloading traditional server-side tasks to the front-end. It was once unfathomable that we’ll be running the likes of Google Maps, Spotify or YouTube in our web browsers but here we are, with a varied toolset to make complex web applications.

Front-end web development has grown exponentially in the last few years and I’ll offer just a glimpse of that here.

The basics of front-end web development

For a long time, JavaScript has been used solely for DOM manipulation with the odd animation thrown in for good measure. Since the beginnings, there was a big discrepancy between browser features.

jQuery started a revolution with abstracting the aforementioned browser features and making DOM manipulation easy while also bringing quite a few utilities to the table.

Nowadays, it’s quite easy to manipulate the DOM with pure JavaScript and there’s a very nice cheat sheet just for that purpose.

Efficiency through frameworks

With the growing complexity of websites and websites growing to web applications, there was a need to address the complex issues of web applications (state handling, data binding, view rendering, etc.). Many frameworks rose to that challenge and two that are probably most popular today are AngularJS and React.

It’s clear that Angular and React gained such traction since the former is backed by Google and the latter by Facebook. While Angular contains the whole MVC paradigm, React is somewhat leaner and mostly considered the V of MVC.

New frameworks show up all the time and time will only tell which one will reign supreme (of course, if something like that even happens).

What’s in a name?

There’s a good chance that you won’t be using JavaScript any more, but any of the languages that transpile to JavaScript like:

EcmaScript 6 — the newest spec of JavaScript

TypeScript — Microsoft’s superset of JavaScript featuring types

Apart from just adding new features to a language, there’s a good chance you’ll be modularising your application by using ES6 native modules or CommonJS (mostly for Node.js development) or RequireJS (async module loading mostly for websites).

Transpilation and connecting of modularised applications is done via build tools (Gulp and Grunt, mentioned in detail later), using transpile tools (like Babel or Traceur) and module builders (like Browserify or Webpack). You’ll most likely transpile and build your modules in every aspect of JavaScript development.

There is a boatload of tools that weren’t mentioned. It is left to the reader to explore them and a good starting place is the awesome list of front-end development.