Front-End Technology Stack Round-Up

An experiment to understand the usage, relationships and trends in the massive jungle of modern front-end technologies.


Ever Wondered How Other People Develop Their Front-End?

My initial goal was to build a solid template for documenting front-end technology stacks. Why is this important? If you plan to define standards for your company, partner agencies and freelancers, you might need a boilerplate for documenting the used technologies. Therefore I did a survey about the front-end technology stack people are using. I tried to provide the questions and answering options I thought would be enough to describe most of the basic front-end stacks. I’ve got 170 responses mainly via Twitter in about a day from a good mix of front-end devs working for agencies, enterprises and startups. It’s not that much, but an acceptable start. Maybe @smashingmag wants to repeat the survey with a little more people☺

In addition, I tried to add some more insights using Google Trends. Those trends don’t seem to be a very reliable source for representative results here, but they give you an additional idea of the general trends and time relations. Please don’t take it too serious, it’s not a scientific research. Thanks to all who took part in the survey, I really appreciate your help. You can find the complete report with some more questions in the full Report.

Identified Building Blocks

A front-end stack takes a lot of effort to build and can be detailed and complex as hell. I tried to limit on the topics, that are common and used in most projects. I came up with the following list of question groups for my survey. I know, that the text editor is generally not really important for the stack, but I wondered if it has an impact on something else.

  • Editor / IDE (not essential for standards)
  • Version Control System
  • CSS Reset / Normalize
  • CSS Pre-Processor
  • CSS Pre-Processor Add-Ons
  • CSS Framework
  • Templating
  • JS Core Libraries
  • JS Framework
  • Package Manager
  • Build System

Sublime Text is huge

In the target group, the simple, but extendable editors like Sublime Text win over complete IDEs like WebStorm. The “Other” group contains no major set of votes for a specific editor, only minorities for Coda or VisualStudio. You can see a similar picture when looking at the Google Trends. I wonder what happens with the recently released Atom (led by Github) or Brackets (led by Adobe), once they grow up.

Which is your editor or IDE of choice for editing JS, CSS and HTML?
Interest on front-end editors over time, by Google Trends

Just because I was curious, I added Eclipse in comparison to the newer or fancier editors. As you can see, there is still a huge, but also dramatically sinking usage of the popular IDE.

Interest on front-end editors over time (compared to Eclipse), by Google Trends

Git is every modern developer’s friend

Well, this is a boring and expected one… Git is running towards the domination of the version control market, especially with open source projects (thanks to Github).

Which version control system do you prefer to use?
Interest on version control systems over time, by Google Trends

CSS Reset vs Normalize

Not a very important question, but interesting anyway. Just as a refresher — a CSS reset removes all basic styling and a “normalize” just makes them look the same across all browser, but doesn’t remove them entirely.

Do you use a CSS reset or normalize snippet?

With the rise of the HTML5 Boilerplate project, the normalize.css started to become a good alternative to the classic CSS reset method (Eric Meyer and YUI).

Interest on version control systems over time for css reset/normalize, by Google Trends

SASS/SCSS clearly wins over LESS

This is probably a political question, but my opinion is that the existence of Compass gives Sass/SCSS a boost in popularity over LESS.

Which CSS pre-compiler do you prefer to use?
Interest on css pre-processors over time, by Google Trends

Compass guides you through the darkness

With the rise of CSS pre-processors, the need for mixin libraries and best practices has grown. Compass does a great job by providing a complete set of mixins and more for Sass developers, there is nothing comparably popular for LESS or Stylus so far.

Which CSS pre-compiler addons do you prefer to use?

The only growing pre-processor add-on seems to be Compass for Sass so far.

Interest on css pre-processors add-ons over time, by Google Trends

No CSS framework or if so, then Bootstrap

This is quite interesting, the majority of the developers said they don’t prefer to use a CSS or pattern library like Bootstrap, but if so, Bootstrap takes the major stake.

Which CSS framework do you prefer to use?

Wow, this is impressive, @mdo and all the others folks building Boostrap are doing an amazing job. Thankfully, they made pattern libraries and front-end style guides a real thing.

Interest on css frameworks over time, by Google Trends

Templating

Templating (client-side) is still a relatively new topic, therefore more than a third said they don’t use it currently. I think the question was misleading, because I actually wanted to filter on client-side templates. But some great insights anyway. Jade takes the largest stake in the “Other” category.

Which templating engine or syntax do you prefer to use?

Since this question was a little misleading, the following is just for your amusement ☺

Interest on web related template engines over time, by Google Trends

But hey, it’s time to give another template language a high five. Markdown. Mainly used for authoring, it has the potential to become more important for HTML templating in general.

Interest on web related template engines over time (including Markdown), by Google Trends

jQuery is still essential

I thought there would be more impact of libraries like zepto, but in the end, people want to use all those plugins out there and therefore use jQuery, with an acceptable loss in performance or bandwidth.

Which core JS library do you prefer to use?
Interest on core js libraries over time, by Google Trends

Angular on the rise, Backbone suffers

Another incredible piece of software is Angular, it’s really a huge step forward and with the power of Google behind it, it has the potential to become the clear number one in JS frameworks. But, as you can see in the survey results, many developers are still not using a large framework like Angular.

Which JS framework do you prefer to use?

Backbone looses some attention, while the popularity of Angular grows constantly. Ember is steady where it is and dojo doesn’t seem to play a role in this game.

Interest on js frameworks over time, by Google Trends

Package Management

This wasn’t a very useful question, it should have been more a question about if someone uses bower or not. But anyways it shows that both, npm and bower, therefore package management in general is growing in interest. npm because of node and bower for managing front-end packages.

Which package manager do you prefer to use?
Interest on package managers over time, by Google Trends

Grunt vs Gulp

Build systems for the web are still relatively new, but they really help you setting up a professional build of your code (Minification, Concatention, Testing, just to name a few). Grunt made the jump start on the topic and has gathered a large community so far. Gulp is the fancy newcomer in the space and also got a lot of attention recently. Grunt still has way more plugins, but Gulp is catching up.

Which build system do you prefer to use?
Interest on build systems over time, by Google Trends

What happens if we compare the front-end build tools grunt and gulp to classic build tools like ant and maven? Like we’ve seen with Eclipse, Java and related technologies are still very popular. What’s interesting here is, that Ant is very similar to Grunt and Gulp in general and Maven is more like a combination of bower/npm and grunt/gulp because it’s strong in managing the dependencies for the actual code as well. I wonder what the future will look like here.

Interest on build systems over time (including ant and maven), by Google Trends

Build Tasks

I asked people what they normaly do during a build using grunt/gulp. For sure, there is compilation, concatenation and minification, but also image optimization and testing is done by many people. This list can be extremely long, since you have a lot of options with the plugins grunt and gulp provide. I decided to not list all of them here, there are other great sources for this kind of information.

Which tasks do you perform during your build?

Conclusion

Even if the number of participants is not very representative, the survey gives a good overview of the current commonly used front-end technology stacks. The comparison to the global search trends gives me a feeling about the survey results in general. I hope this quick analysis helps you to get some insights in usage and trends as well. If you are not very familiar with front-end technologies it helps you to talk with your developers and partners and get an idea of the stack they are using and where you need to put one of those buzzwords.

At Frontify, we will continue to work on a standardised way of documenting standards and guidelines and we will let you know once we’ve got something to share.