Frontend First

@PatrickDahms

Frontend Architect @ welt.de

Oct '15

81,9 Mio. unique visitors (49,1 + 32,8)
68,5 Mio. video views

BILD.de 302,4 Mio.

current project

beta.welt.de

Mobile First

Develop, test and implement all features for a small device first. No excuses.

Example

Navigation

Forms

Tables

How to start?

forget Photoshop
write css mobile first
next breakpoint

Performance First

critical css

inline (14kb)
above the fold

async everything

JS
Fonts
CSS

optimize images


// RWD images + sizes
<img srcset="image-desktop.png 900w, image-mobile.png 300w"
     sizes="(min-width: 960px) 900w, 300px"
     src="image-fallback.png">

// RWD images + sizes + crops (art direction)
<picture>
  <source srcset="image-16-9.png, image-16-9-hd.png 2.0x"
	  media="(min-width: 960px)">
  <source srcset="image-3-2.png, image-3-2-hd.png 2.0x">
  <img src="image-fallback.png">
</picture>

optimize bootstrap

resource load handling
progressive enhancement
no jQuery

HTML5

Application Cache
Font Loading
Service Worker

Speedcurve

Performance Budget

Speedindex: 1000
Page weight: 1MB
max on-load request: 30

Automate First

Everything

Build tools

node
Grunt
Gulp
shell scripts
...

Grunt

clean
validate
compile
test
analyse
deploy

Monitoring First

Dashboards

Notifications

Messenger (slack)
Alarms (datadog)
Log-aggregator (logentries)

Testing First

TDD

write a test
run the tests
write code
run the tests
refactor code
goto: 1

Test pyramid

Regression testing
Manuel testing
Smoke Tests
Integration Tests
Unit Tests

(Consumer-Driven Contracts)

User First

test early

Fragebögen
Nutzertests
A/B Tests