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.
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.
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).
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.
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).
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.
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.
The only growing pre-processor add-on seems to be Compass for Sass so far.
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.
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.
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.
Since this question was a little misleading, the following is just for your amusement ☺
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.
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.
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.
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.
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.
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.
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.
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.
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.
