Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

Moderne Frontendentwicklung

Am Beispiel ZEIT ONLINE.

Nico Brünjes@nicobruenjes

http://nicobruenjes.de

http://nicobruenjes.de/

Nico Brünjes: Moderne Frontendentwicklung


Alles, was man auf der Website sehen kann.»

„Was man nicht sehen kann“

Das Backend.


XML is like violence. If it doesn't solve your problem, you're not using enough of it.

»Unbekannter Autor:


•Apache•Python•Varnish •uvm.

Backend

Open Source

„Raupe goes Schmetterling“

Transformation.


XSLT


•XSL Transformation•Programmiersprache•XML via XSLT in…•ist selber XML

XSLT


•XSLT Prozessor als Apache Modul•zur Laufzeit a.d. Server•Doppeltransformation•page format

Transformation

Open Source

„Genie und Wahnsinn wandeln Hand in Hand“

Das Frontend.


Browser


•Google Chrome•Mozilla Firefox•Internet Explorer•Safari•Opera

Browser


The most hostile software development environment imagenable.

»Douglas Crockford über Webbrowser:


Und…?


HTML 5


•September 2009:<!doctype html>•kein einziges HTML5 Element•valides HTML

HTML5


•Zugänglichkeit•Auffindbarkeit•Strukturierung•weniger Website•mehr App

HTML5


•<audio>•<video>•<canvas>•<header>, <section>, <article>, <footer>

HTML5


CSS 3


CSS3Frontendtechniker:»Endlich alles eingebaut! Borderradius, Schatten, Farbverläufe…«

Webdesigner:»Schön. Dann machen wir

jetzt alles flat.«



Scalable and Modular Architecture for CSS


•Wenig Klassen•möglichst wenig HTML•Logik im CSS•viel CSS…•… leider langsam.

Damals…


Damals…

body .article #comments ul > li li li > a.button {}

•überspezifiziert•schwierig zu editieren•schwierig für andere


Möööhhhh!*

*= best practices are killing us!

Foto: Marc JP http://www.flickr.com/photos/pyth0ns/

http://www.flickr.com/photos/pyth0ns/


Heute

.comment-item > .button {}

•sprechend•wenig verschachtelt•keine ID-Selektoren


•Kategorisierte Stile (base, layout, module…)•Namenskonventionen•Selektorentiefe <= 2•mehr Code im HTML

Heute


SASS (Synthactical Awesome Stylesheets)


•Variablen•Verschachtelung•Funktionen•Vererbung•u.v.m.

SASS


CSS Authoring Framework

http://compass-style.org

http://compass-style.org/


•Fertige Funktionen•CSS3 vereinfacht•Sprites•Typographische Helfer•Extensions…

compass


Javascript


•ZEIT.namespace•jQuery 1.x•jQuery-Plugins•(backbone.js)

Website


•backbone.js?•underscore.js?•jQuery 2.x?

Apps


•Sid.js (lazy loading)

•modernizr (progressive enhancement)

•node.js (deployment)

•Jasmine (BDD, testing) •Selenium (acceptance testing)

+


GRUNT


•Javascript Taskrunner•basierend auf node.js•automatisches Abarbeiten von Aufgaben•Testen und Deployen

GRUNT


•Javascript wird ,gelinted‘•Templates werden kompiliert•SCSS wird mit compass kompiliert•Livereload!

$> grunt watch


•Jasmine Tests werden durchgeführt•Javascripte werden konkatiniert•Javascript wird komprimiert

$ > grunt


•Coding Guidelines implementiert•Code getestet•Code verkleinert•ready to deploy

FTW!

Open Source

https://github.com/ZeitOnline

FRAGEN?

Nico Brünjes@nicobruenjes

http://nicobruenjes.de

DANKE.

Technology

Moderne Frontendentwicklung am Beispiel ZEIT ONLINE