Post on 05-Jul-2015
description
Moderne Frontendentwicklung
Am Beispiel ZEIT ONLINE.
Nico Brünjes: Moderne Frontendentwicklung
Nico Brünjes: Moderne Frontendentwicklung
Alles, was man auf der Website sehen kann.»
„Was man nicht sehen kann“
Das Backend.
Nico Brünjes: Moderne Frontendentwicklung
XML is like violence. If it doesn't solve your problem, you're not using enough of it.
»Unbekannter Autor:
Nico Brünjes: Moderne Frontendentwicklung
•Apache•Python•Varnish •uvm.
Backend
Open Source
„Raupe goes Schmetterling“
Transformation.
Nico Brünjes: Moderne Frontendentwicklung
XSLT
Nico Brünjes: Moderne Frontendentwicklung
•XSL Transformation•Programmiersprache•XML via XSLT in…•ist selber XML
XSLT
Nico Brünjes: Moderne Frontendentwicklung
•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.
Nico Brünjes: Moderne Frontendentwicklung
Browser
Nico Brünjes: Moderne Frontendentwicklung
•Google Chrome•Mozilla Firefox•Internet Explorer•Safari•Opera
Browser
Nico Brünjes: Moderne Frontendentwicklung
The most hostile software development environment imagenable.
»Douglas Crockford über Webbrowser:
Nico Brünjes: Moderne Frontendentwicklung
Und…?
Nico Brünjes: Moderne Frontendentwicklung
HTML 5
Nico Brünjes: Moderne Frontendentwicklung
•September 2009:<!doctype html>•kein einziges HTML5 Element•valides HTML
HTML5
Nico Brünjes: Moderne Frontendentwicklung
•Zugänglichkeit•Auffindbarkeit•Strukturierung•weniger Website•mehr App
HTML5
Nico Brünjes: Moderne Frontendentwicklung
•<audio>•<video>•<canvas>•<header>, <section>, <article>, <footer>
HTML5
Nico Brünjes: Moderne Frontendentwicklung
CSS 3
Nico Brünjes: Moderne Frontendentwicklung
CSS3Frontendtechniker:»Endlich alles eingebaut! Borderradius, Schatten, Farbverläufe…«
Webdesigner:»Schön. Dann machen wir
jetzt alles flat.«
Nico Brünjes: Moderne Frontendentwicklung
Nico Brünjes: Moderne Frontendentwicklung
Scalable and Modular Architecture for CSS
Nico Brünjes: Moderne Frontendentwicklung
•Wenig Klassen•möglichst wenig HTML•Logik im CSS•viel CSS…•… leider langsam.
Damals…
Nico Brünjes: Moderne Frontendentwicklung
Damals…
body .article #comments ul > li li li > a.button {}
•überspezifiziert•schwierig zu editieren•schwierig für andere
Nico Brünjes: Moderne Frontendentwicklung
Möööhhhh!*
*= best practices are killing us!
Foto: Marc JP http://www.flickr.com/photos/pyth0ns/
Nico Brünjes: Moderne Frontendentwicklung
Heute
.comment-item > .button {}
•sprechend•wenig verschachtelt•keine ID-Selektoren
Nico Brünjes: Moderne Frontendentwicklung
•Kategorisierte Stile (base, layout, module…)•Namenskonventionen•Selektorentiefe <= 2•mehr Code im HTML
Heute
Nico Brünjes: Moderne Frontendentwicklung
SASS (Synthactical Awesome Stylesheets)
Nico Brünjes: Moderne Frontendentwicklung
•Variablen•Verschachtelung•Funktionen•Vererbung•u.v.m.
SASS
Nico Brünjes: Moderne Frontendentwicklung
CSS Authoring Framework
http://compass-style.org
Nico Brünjes: Moderne Frontendentwicklung
•Fertige Funktionen•CSS3 vereinfacht•Sprites•Typographische Helfer•Extensions…
compass
Nico Brünjes: Moderne Frontendentwicklung
Javascript
Nico Brünjes: Moderne Frontendentwicklung
•ZEIT.namespace•jQuery 1.x•jQuery-Plugins•(backbone.js)
Website
Nico Brünjes: Moderne Frontendentwicklung
•backbone.js?•underscore.js?•jQuery 2.x?
Apps
Nico Brünjes: Moderne Frontendentwicklung
•Sid.js (lazy loading)
•modernizr (progressive enhancement)
•node.js (deployment)
•Jasmine (BDD, testing) •Selenium (acceptance testing)
+
Nico Brünjes: Moderne Frontendentwicklung
GRUNT
Nico Brünjes: Moderne Frontendentwicklung
•Javascript Taskrunner•basierend auf node.js•automatisches Abarbeiten von Aufgaben•Testen und Deployen
GRUNT
Nico Brünjes: Moderne Frontendentwicklung
•Javascript wird ,gelinted‘•Templates werden kompiliert•SCSS wird mit compass kompiliert•Livereload!
$> grunt watch
Nico Brünjes: Moderne Frontendentwicklung
•Jasmine Tests werden durchgeführt•Javascripte werden konkatiniert•Javascript wird komprimiert
$ > grunt
Nico Brünjes: Moderne Frontendentwicklung
•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.