Exploring the Expanding Front-End Landscape: Key Concepts & Tools

The front‑end field is evolving rapidly; the "big front‑end" era has arrived, and difficulty roughly doubles every 12‑24 months, as demonstrated by the extensive technology stack below.

Core Concepts

DOM

Element

Attribute

HTML

Basic markup language for structuring web content.

JavaScript

Prototype

Scope

Closure

JSON

AJAX

CSS

Selector

Specificity

Box Model

Rendering Engines

Trident (IE)

Blink / former WebKit (Chrome)

Gecko (Firefox)

WebKit (Safari)

Blink / former Presto (Opera)

EdgeHTML (Edge)

Script Engines

JScript (IE8‑ / ASP)

Chakra (IE9+ / Edge)

V8 (Chrome / Opera / Node.js / MongoDB)

SpiderMonkey (Firefox)

Nitro (Safari)

Build Tasks

Minification

Compilation

Bundling

Obfuscation

Image Optimization

Unit Testing

Package Management

npm

Bower

Build Tools

Grunt

Gulp

Brunch

Yeoman

Broccoli

Debugging

Developer Tools

Firebug

Basic Tools

Node.js

Phantom.js

fibjs

Libraries

jQuery

Prototype

Zepto

MooTools

Frameworks

AngularJS

Backbone

Knockout

Ember

React

Polymer

Deft.js

Vue

UI Frameworks

Bootstrap

Semantic UI

Foundation

Material UI

jQuery UI

Mobile UI Frameworks

jQuery Mobile

Jo

Dojo Mobile

Lungo

CSS3 Animations

Animate.css

bounce.js

Effeckt.css

move.js

CSS Pre‑processors

LESS

Hat

Sass/SCSS (Compass, Bourbon, Gumby)

Stylus (nib)

Quality Control

JSLint

JSHint

jscs

Closure Linter

Testing Tools

QUnit

Jasmine

Mocha

Selenium

WebDriverIO

Karma

nodeunit

tape

Online Testing Services

Sauce Labs

BrowserStack

Browser Shots

Browser Sandbox

Cross Browser Testing

Module Systems

ES6 Module

CommonJS

webpack

browserify

AMD

RequireJS

UMD

WebSocket

Socket.io

web‑socket‑js

Data Visualization

D3

Echarts

HighCharts

Vis.js

Flot

WebGL

Three.js

Babylon.js

Pixi.js

Template Engines

Handlebars

Haml

Slim

Jade

Ejs

Spacebars

mustache

Mobile App Development

PhoneGap / Cordova

MUI

React Native

Ionic