In the last four or so years, front-end web development has become a lot more complicated. In 2010 to install a new Javascript library the instructions went along the lines of, “add this script tag to the head of your site to use” – now the instructions always mostly begin with, “Install Node.js then run npm install”
It is easy to get caught up in the new way of doing things, we often forget that not everyone is sure what to use or what they should be using to improve their front-end workflow.
Here is what the current landscape looks like. I haven’t included all tools, just the popular ones, same goes for things like syntax and whatnot. The reality is we are spoilt for choice, it is all about betting on what particular tool or way of doing things has the most longevity.
Automation / Task Runners / Build Tools
GruntJS
Up until recently and still for many, Grunt is the task-running/build system tool of choice. Basically Grunt allows you to do things like minify your CSS, lint your Javascript, combine and minify your Javascript files, compress images, combine image sprites, compile Sass, integrate with pre-existing deployment systems (like GIT, Capistrano).
Gulp.js
Gulp is the new kid on the block. It is very similar to that of Grunt, except it requires significantly less typing to configure and through its daily-growing list of plugins, is starting to become a viable replacement for Grunt. It does lack some build system features, but it is quickly catching up and becoming a favourite of many.
Yeoman
Yeoman is one of those tools you’ve probably heard about, seen used a couple of times, but never truly understood what it is used for. Essentially what Yeoman does is gives you a scaffolding tool using generators which allows you to generate components and complete starting structures for things like AngularJS or BackboneJS.
If you’ve worked with Ruby on Rails or Laravel before, you’re probably familiar with the premise of command-line scaffolding/generators to speed up the development of your projects. Learn more about Yeoman here.
Package Management
Bower
For package management on the front-end for installing things, Bower has become the favourite. Developed in-house at Twitter, Bower allows you to manage front-end dependencies like jQuery, Bootstrap and anything else front-end related with support for versioning without having to download a zip file, extract the contents and link it up.
If you are familiar with NPM (Node.js’ package manager) then Bower is basically the same, except aimed at front-end development dependencies. Read more about Bower here.
Component
Another popular choice is Component, which is pretty much the same as Bower. It all comes down to personal preference, one does not really offer any advantage over another.
Client-side Application frameworks
When it comes to client-side frameworks, there are more to choose from than you can poke a stick at. However, deciding which is the better framework to learn can be rather difficult. Below are the most popular ones with one opinions (mostly my own) about which one is the better choice.
AngularJS
AngularJS is a client-side application framework built by Google. It is currently the fastest rising framework for the client side and thus most likely the ideal choice for newbies. The community is rapidly growing and Google seems committed to maintaining this thing for the long-haul.
The way you do certain things is different to that of other frameworks, but some argue AngularJS is the first framework to get client-side MVC right, even though the separation and strict methodology of what MVC is in the sense of the word isn’t really there as Angular requires you to learn scope and directives instead of models and view files.
AngularJS will be a highly in-demand skill in the next couple of years and it probably wouldn’t hurt to learn it now. Although keep in mind version 2.0 estimated to be out within a year or two is a dramatic rewrite from the ground.
BackboneJS
Before AngularJS was all the rage, BackboneJS was the defacto choice. Used by the likes of Soundcloud and numerous other large-scale web applications, BackboneJS is still a viable choice and has a great community behind it. There are tonnes of tutorials, example code on Github and you can get up-to-scratch fairly quickly.
EmberJS
I see EmberJS being compared to AngularJS quite a lot. More times than I can count in-fact. The truth of the matter is while the end goal is the same, EmberJS is completely different and in my experience, a very good framework.
The way you build EmberJS applications feels clean and more true to the MVC philosophy of separating logic from the presentation layer. If you were to choose EmberJS, you probably wouldn’t regret it, the likes of Zendesk use EmberJS.
ReactJS
Often seen being explained as the “V” in MVC, ReactJS is a creation straight out of Facebook. It is used on Facebook itself as well as Instagram’s mobile and desktop web applications.
What ReactJS allows you to do is render views very quickly thanks to its virtual dom-diffing where it handles everything in memory and does the occasional DOM update instead of constantly changing the DOM.
Already on the rise, ReactJS will be another in-demand skill in the next 12 months. Start learning, because it works well when used with AngularJS as well.
Front-end CSS Frameworks
Bootstrap
Probably the most popular choice in the front-end style framework wars thus far. Bootstrap is an opinionated mobile-first responsive set of styles and components for speeding up front-end development, especially during the conceptual/prototyping phase of development. It has a powerful grid system and out-of-the-box offers a lot of functionality.
Foundation by Zurb
Even though Bootstrap gets most of the limelight, Foundation is probably the best choice for a helping hand in the front-end side of things. It is arguably less opinionated in what it enforces upon you out-of-the-box and is mobile-first responsive ready as well complete with a powerful grid system and set of helpful utilities/components.
I have started using Foundation for all new projects I start as I believe it is a much better CSS framework and will undeniably take Bootstrap’s place in the next couple of years as it grows.
Pre-processors
Sass/Compass
In 2014, you’ll be hard-pressed to find a developer that writes straight-up CSS any more. CSS pre-processors like Sass, LESS and Stylus are now the preferred way of writing CSS with their support for variables, nesting and cleaning separation.
While the playing field is pretty much open, Sass in combination with Compass has become the developer favourite, in part for its power and syntax as well as large community.
LESS
Still popular with many and just as powerful in most aspects as Sass, LESS offers; variables, functions, nested styles and more. While Sass is undeniably more powerful, sometimes LESS is all you need, especially if you’re not a fan of having to install Ruby and then subsequent Gems to compile your Sass files. While LESS is pretty great, I think Sass is the number #1 choice for most developers.
Stylus
You often see SASS and LESS getting the limelight, but Stylus is lurking in the shadows plotting the demise of other CSS pre-processors.
It allows you to write in a more Python-like syntax using space, no colons or semicolons as well as standard CSS. It is highly flexible, clean and a great alternative to SASS or LESS, even though the end-goal is the same.
Syntax/Methodologies
BEM
When it comes to CSS, there has been a surge of support behind the method of organising CSS pioneered over at Yandex called BEM (Block Element Modifier). Even though BEM isn’t necessarily new, the advent of CSS pre-processors like Sass have revealed some annoying caveats mostly related to that of nested rules.
Nobody likes to override CSS selectors generated by Sass compilation that look like this .header .header-container .branding .logo – if you wanted to change that logo in your media query file, you’d have to copy that entire line, which would just be a nightmare. What BEM does is simplifies the process of naming your styles using aliases and a syntax based on underscores and hyphen. You can read about BEM here.
how about http://semantic-ui.com
Great article! I’ve started using Grunt, Bower, SASS and Git over the last few years, and I’m so glad I did. These tools help make my programming life much easier.
Awesome.. you have covered pretty much everything.. Thank You.
very interesting coverage as of front end development. Thank u.
Hello, yup this post is truly pleasant and I have learned lot of things from it on the topic of blogging.
thanks.