The Front-End Spectrum

Modern front-end web development is a busy place. The industry shuffle is exponentially rapid, and when you’re heads down working on a project, it can be easy to lose focus on the big picture.

This graphic represents the technology I’ve encountered in the past few years. It’s by no means comprehensive. Others have summarized their front-end tech experiences, and I’ve noted that each time it’s (naturally) from their particular perspective. It’s simply not possible (or at least easily achievable) for a single individual to have a “complete” view of the current landscape.

I’ve included tech from three categories:

1. Tech I work with on a daily basis.
2. Tech that’s part of projects I work on, but not my primary responsibility.
3. Tech I’m tangentially aware of. This includes tech other front-end developers I work with may have worked with, but I haven’t experimented with yet.

Here’s my take on the front-end spectrum. It’s decidedly Rails-skewed, which is simply a result of my employment at Rails shops for the past few years:

The sausage can be made in oh so many ways.

I’ve written about the details before, so check out those posts for more detail. For now, I’ll simply list what each piece is (in case it’s not apparent from the logo):

Core

• HTML (HTML5)
• CSS (CSS3)
• JavaScript (ES6)
• Web Components

Text Editors

• Atom
• Sublime Text
• WebStorm

UI Frameworks

• Bootstrap
• Ionic
• Foundation

Responsible Web Design

• Responsive Web Design
• Progressive Enhancement
• Accessibility

Templating

• Handlebars
• Haml
• Jade

Browser Refreshing

• LiveReload
• Guard

CSS Preprocessors

• Sass
• Less

OOCSS & Style Guides

• MVCSS
• SMACSS
• BEM
• Inuitcss
• KSS
• Pattern Lab

Version Control

• Git
• Subversion
• Mercurial

Package Mangers

• npm
• Bower
• CodeKit

Front-End Performance

• WebPagetest
• mod_pagespeed
• PerfBudget
• CriticalCSS
• Picturefill

JS Frameworks

• jQuery
• Backbone
• Ember
• AngularJS
• React
• Polymer
• D3

JS Preprocessors

• CoffeeScript
• TypeScript
• Babel

Process Automation

• Grunt
• Gulp
• Broccoli

Code Quality

• JSCS
• ESLint

Build Tools

• RequireJS
• Browserify
• Webpack

Testing

• Jasmine
• Mocha
• Protractor
• Karma

Back-End

• NodeJS
• Rails

This is a very high-level view of the modern front-end landscape. I’ve left a lot out, notably mobile tools I use like Cordova, Rails gems like Spree that are heavily integrated into projects I’ve worked on, or other tech I’ve worked with like Electron and native iOS app development. I think they (and many others), don’t quite fit into the front-end spectrum.

You may also notice a few items you consider odd. Theories like “responsive web design” and back end tools like Rails appear in the spectrum. The responsible web design category is included because it’s a category that often gets overlooked, but I feel is incredibly important for modern front-end developers to have minimally an awareness of. Back-end stuff is included because while technically not front-end, these are items front-end devs must have some familiarity with and will most definitely encounter.

This graphic was part of a process I’ve gone through to do what I believe is required of any modern front-end developer: determine what you’re passionate about, determine where your strengths lie, and then focus on the crossover areas. Hopefully it helps you get a lay of the land, and maybe figure out where you want to focus as well.