The modern front-end development landscape

Adam Jaggard, Lead Front End Developer
19 April 2017

Keeping up with the zeitgeist of front end web development is not for the faint of heart. Tools, frameworks, libraries, editors and methodologies appear and disappear before you realise they existed. Despite all of this chaos we’ve managed to keep track of what’s going on and have compiled a list of what’s considered modern (for now…)

Build tools

TL;DR Our preferred setup uses Gulp for regular websites & Webpack for web apps.

Developers used to be able to write a small snippet of javascript, include it on the page and you called it a day. If you wanted to really impress people you included jQuery and made a spinning clock follow the cursor around the screen. Nowadays we build our Javascript using task runners, compress it to download faster, concatenate it to download it in one go, transpile it to use language features that don’t exist yet or bundle it together like an app.

First we had Grunt, unwieldy but got the job done. Grunt popularised task runners to people that weren’t used to the idea. Next came Gulp. It did everything Grunt did except it was simpler, easier to setup and surpassed Grunt quite quickly. Gulp is still going strong despite newer tools popping up occasionally (Broccoli et al). Next came task runners that had a distinct focus on web apps. These tools strived to help you build web app bundles (as opposed to writing unrelated tasks) Webpack is the leader of this bunch. Despite being as unwieldy as Grunt was it’s a very powerful tool. Also to watch in this space: Next.js

Frameworks and Libraries

TL;DR We prefer React and minimal single purpose css libraries such as grid frameworks. Evaluating the specific needs of your project should come first though.

jQuery is great, it helped us make websites interactive at a time when supporting Internet Explorer was a work hazard. Back when websites were predominantly static and you just wanted to add some polish, you reached for jQuery. Nowadays websites are looking and behave more and more like apps than static documents so we’ve had to rethink how we make them interactive.

There’s plenty of options in this space but the two that are far ahead of everyone else is Angular and React (with a respectful nod to Vue). Angular (backed by Google) is all guns blazing, include every feature you might need by default and give you multiple ways of achieving the same thing. For a beginner Angular is a good choice precisely because it makes a lot of choices for you, however it’s also large and complex. React (made by Facebook) on the other hand is much more paired down concerning itself only with how to render your app to the screen. Everything from how to handle data, URL routing, forms and so on is a choice for you to make, very daunting if you’re new these kinds of frameworks but also gives it a nice learning curve in the beginning as it’s a much smaller api to wrap your head around. React and Angular are both very mature and likely here to stay for the foreseeable future, a welcome stability.

When it comes to CSS there’s a plethora of frameworks offering to simplify your styling workflow. Bootstrap easily occupies the top spot with Foundation following behind. Both offer help with structure and style. If you’re in a rapid prototyping stage or building a website for your in-house documentation then having elements pre-styled can be a blessing and makes it very quick to put together a convincing website. On the other hand when building something more bespoke there’s nothing fun about overwriting every default Bootstrap style to match the design so it should be used cautiously. We prefer to use simple structural libraries that we can style ourselves. A lot of the time all you need is a simple grid framework, allowing the flexibility to build in more bespoke ways.

If you want something slick and don’t mind that it will look like Google built your product then opt for any of the popular material design frameworks.

Dependency Management

TL;DR NPM just works.

Dependency management used to mean googling a jQuery plugin and just downloading the latest version into your JS folder. These days we rely on NPM (Node Package Manager) or tools like Bower to fetch libraries for us and track which version we use. Bower seems to be falling out of favour opting instead to just use NPM for everything, or Yarn if you like to live on the edge. We quite like to use NPM for everything approach. Tools like Webpack work very well this way too.

Going forward

This post could go on for a very long time if we covered every possible option out there. Use what’s right for your project and try not to be too dogmatic about what you use, re-evaluate your choices when it makes sense to. If you’re feeling dizzy from the amount of choice then use what’s proven even if it’s not the latest fad. Your product will benefit from launching more than it will from being unfinished because you opted to use the bleeding edge ObscureShinyNewFrameworks.js.