The State of
Front End Development
2014

Pascal Rettig / Alignable.com

Agenda

Usage Trends

Browsers

Technology

Job Market

Desktop Take-aways

Chrome is & will be top dog.

IE Still trending down.

Firefox stablized.

IE 8 (8%) + IE 9 (5%) = 13%

~87% Have a modern browser

~92% SVG, Canvas, HTML5 Audio

Mobile Take-aways

Mobile close to 1/3rd of web traffic

Apple still in lead in US (barely)

Android shipping waaay more units...

...but installed base means something.

Windows Phone, Blackbery MIA

Android 2 is new IE6

source vs. iOS

The Great Webkit Schism

Google forked Webkit to Blink (Apr 2013)

Chrome and Safari/iOS no longer on same rendering engine

Opera on blink

Firefox, IE still have own engines

Mobile is no longer if-it-runs-on-iOS...

We are the 10%

IE8 on XP

Basic CSS2.1 (position:fixed, first-child, ...)
Slooow JS
No CSS3 Goodies

Android Browser on 2.3

No multi-touch
No SVG
Sloooow Rendering

Handling the 10%

Gracefully degrade your CSS3 Whiz-bangs

Provide detection + warnings for SVG + Canvas

Or, ignore and here from your Grandma

Technology

(The Fun Stuff)

Current Status:

Canvas - Gimme Pixels

95%+ (IE9+, All Mobile)

Hardware accelerated (Except Android 2)

Realistic for Full Screen games

First-class HTML Citizen (Video Example)

SVG - Gimme Vectors

Full vector drawing (D3 Show reel)

Browser-provided scene-graph & pixel-perfect events

90%+ (IE9+, Android 4+)

CSS Support (Including animations!)

Lives in its own DOM

WebGL - Gimme Triangles

Sibling of the same technology that powers almost all mobile games(OpenGL ES)

67%+ (IE11+(!), Chrome Android) source

No Safari/iOS, but soon? (speculation)

HTML5 Gaming Performance

Web Audio - Gimme Sound

A Real sound API suitible for real-time mixing

All but IE

IE has good, low-latency HTML5 Audio Support though

... And, as WebGL taught us

WebRTC - Gimme Peer-to-peer

Powerful Video and Audio Capture

Peer-to-Peer connections

Communicating Audio, Video and Data

UDP-style unreliable channels

More stuffs

Multi-touch - Touchscreen Interfaces

GamePad - Joysticks!

Vibration - Haptic Feedback!

Full-screen - Immersion!

Orientation - Rotation Feedback!

Geolocation - Hyperlocality!

Web Workers - Multi-core-ality

ASM.js - Gimme Speed

A Low-level subset of JavaScript (Who cares?)

Debugging

Mobile debugging, finally!

An awesome IDE in every browser.

With performance, memory, & auditing

Favorite features: $0, Highlight, Ctrl-O, Ctrl-F, Conditional Breakpoints.

Trends

(Semi-Opinionated)

JavaScript MVC

JavaScript MVC

Solve the JS Organization Problem (aka jQuery soup)

... and the Event Binding problem

Hype started with Backbone in 2011

jQuery still a component piece

Developer mindshare between Backbone, Angular, Ember & React (New!)

Learning? Start with jQuery, then Backbone (Beware the Voodoo!)

SVG for Data Vis

Right tool for the job

Finally Widely supported w/o shims

D3.js is the hammer

"JavaScript Journalism"

Lots of great examples.

Post-Responsive

We hold these truths to be self-evident:

Sites need mobile experiences

There's no guarantee on viewport size

Responsiveness is (almost) a given

But it's NOT the final, one-size-fits-all solution

"Experiential" Design, not just media-queries

HTML5 Everywhere

HTML5 (the platform, not the browser technology) has won

The prototyping language for all the things

Browser is the Sandbox VM (LLVM, ASM.js)

JavaScript is the new BASIC

... But "The Browser is Dead" ... again

Feature parity with Flash from 2007...

...without the browser penetration numbers

Getting Hired

(YMMV)

If you're experienced, and have up-to-date skills...

...you should be ok (2.7% Nationally)

If you're a Jr. dev - I'm talking to you

Why Jr's are a tough hire:

Track Record

Job Mobility / Millenial Bashing

10x Mythology

Tech-stack variety

Known Quantity

Simple Solution: Be Awesome

Track Record:

Do things, tell people

Job Mobility:

Don't come across as selfish. Do your homework.

10x Mythology:

Plant the seed that that's you: Hackathons, Startup Weekend

Tech-stack variety

Focus on doing stuff - show you're a quick study (1, 2)

Be a Known Quantity

Network. Don't self-promote, Network.

Your Skillset

Ideally, start 'em young..

The Newbie

You're not at as much of a disadvantage as you think.

Start with w/ HTML, CSS, then JS, Node

The Designer

Add HTML/CSS to your skillset

Design in the browser and understand responsive

It's all UX these days

The Developer

Embrace JavaScript, learn an MVC (or four)

Go Full-stack, treat HTML+CSS as a crafts

Learn enough design to be dangerous

Thanks!

Pascal Rettig @ Alignable.com - We're Hiring!

&