The Web in 2016

www.stateofjs.com

JavaScript flavor

Front End Framework

The Web Developer in 2017

HTML

JavaScript

CSS

source

Build a simple dashboard today

Responsive?

Bootstrap

Foundation

List

"power up" my CSS

Sass

Less

List

Bootstrap

Stylus

Doing CSS "properly"

SMACSS

BEM

List

Bootstrap

Sass

HTML Template Engine

Jade

Handlebards

List

Bootstrap

Sass + SMACSS

Moustache

Navigation

List

Bootstrap

Sass + SMACSS

Jade

Fetch Data

Display Data

Use Table?

Organized and modular

List

Bootstrap

Sass + SMACSS

Jade

AngularJS

React

Ember

Backbone

VueJS

a million others

Framework

List

Bootstrap

Sass + SMACSS

Jade

AngularJS

React

Ember

Backbone

VueJS

a million others

Framework

AngularJS

List

Bootstrap

Sass + SMACSS

Jade

ES5

ES6

TypeScript

JavaScript?

AngularJS

source

List

Bootstrap

Sass + SMACSS

Jade

Babel

Transpiler

AngularJS

TypeScript + ES6 + ES5

List

Bootstrap

Sass + SMACSS

Jade

Jasmin + Karma

Testing

AngularJS

TypeScript + ES6 + ES5

Babel

Mocha + Chai or Sinon

List

Bootstrap

Sass + SMACSS

Jade

Module Loader

AngularJS

TypeScript + ES6 + ES5

Babel

Jasmin + Karma

SystemJS

Webpack

CommonJS

AMD

List

Bootstrap

Sass + SMACSS

Jade

AngularJS

TypeScript + ES6 + ES5

Babel

Jasmin + Karma

Webpack

Editor

Pattern Library

Font Library

Task Runner

Source Control

Design Pattern

Documentation

Images

Deployment Strategy

Code conventions

Developer Tools

REST

TDD/BDD/ATDD

Front End

Front End

Backend

Front End

Backend

PHP

NodeJS

Python

Java

Front End

Backend

PHP

NodeJS

Python

Java

Data

MySQL

SQLlite

PostgressSQL

Building software is hard

"Maintainable and Readable Code"

"Maintainable and Readable Code"

Simple Code

Simple Code

Easy

Basic

Writing "simple" code is extremely hard

source

source

JavaScript

&

DOM Fundamentals

Framework*

Tooling

JavaScript

&

DOM Fundamentals

Framework*

Tooling

JavaScript & DOM Fundamentals

• ES6 (ECMAScript 2015)
• Functions vs Pure Functions
• Closures
• Callbacks vs Promises
• Classes

Framework

Tooling

• Chrome Developer Tools
• Visual Studio Code
• Sublime
• Plugins
• Environment