moderne frontendentwicklung am beispiel zeit online
DESCRIPTION
Vortrag bei den Holtzbrinck Technology Days 2013 in München.TRANSCRIPT
![Page 1: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/1.jpg)
Moderne Frontendentwicklung
Am Beispiel ZEIT ONLINE.
![Page 3: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/3.jpg)
Nico Brünjes: Moderne Frontendentwicklung
![Page 4: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/4.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Alles, was man auf der Website sehen kann.»
![Page 5: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/5.jpg)
„Was man nicht sehen kann“
Das Backend.
![Page 6: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/6.jpg)
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:
![Page 7: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/7.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Apache•Python•Varnish •uvm.
Backend
![Page 8: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/8.jpg)
Open Source
![Page 9: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/9.jpg)
„Raupe goes Schmetterling“
Transformation.
![Page 10: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/10.jpg)
Nico Brünjes: Moderne Frontendentwicklung
XSLT
![Page 11: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/11.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•XSL Transformation•Programmiersprache•XML via XSLT in…•ist selber XML
XSLT
![Page 12: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/12.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•XSLT Prozessor als Apache Modul•zur Laufzeit a.d. Server•Doppeltransformation•page format
Transformation
![Page 13: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/13.jpg)
Open Source
![Page 14: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/14.jpg)
„Genie und Wahnsinn wandeln Hand in Hand“
Das Frontend.
![Page 15: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/15.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Browser
![Page 16: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/16.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Google Chrome•Mozilla Firefox•Internet Explorer•Safari•Opera
Browser
![Page 17: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/17.jpg)
Nico Brünjes: Moderne Frontendentwicklung
The most hostile software development environment imagenable.
»Douglas Crockford über Webbrowser:
![Page 18: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/18.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Und…?
![Page 19: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/19.jpg)
Nico Brünjes: Moderne Frontendentwicklung
HTML 5
![Page 20: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/20.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•September 2009:<!doctype html>•kein einziges HTML5 Element•valides HTML
HTML5
![Page 21: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/21.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Zugänglichkeit•Auffindbarkeit•Strukturierung•weniger Website•mehr App
HTML5
![Page 22: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/22.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•<audio>•<video>•<canvas>•<header>, <section>, <article>, <footer>
HTML5
![Page 23: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/23.jpg)
Nico Brünjes: Moderne Frontendentwicklung
CSS 3
![Page 24: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/24.jpg)
Nico Brünjes: Moderne Frontendentwicklung
CSS3Frontendtechniker:»Endlich alles eingebaut! Borderradius, Schatten, Farbverläufe…«
Webdesigner:»Schön. Dann machen wir
jetzt alles flat.«
![Page 25: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/25.jpg)
Nico Brünjes: Moderne Frontendentwicklung
![Page 26: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/26.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Scalable and Modular Architecture for CSS
![Page 27: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/27.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Wenig Klassen•möglichst wenig HTML•Logik im CSS•viel CSS…•… leider langsam.
Damals…
![Page 28: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/28.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Damals…
body .article #comments ul > li li li > a.button {}
•überspezifiziert•schwierig zu editieren•schwierig für andere
![Page 29: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/29.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Möööhhhh!*
*= best practices are killing us!
Foto: Marc JP http://www.flickr.com/photos/pyth0ns/
![Page 30: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/30.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Heute
.comment-item > .button {}
•sprechend•wenig verschachtelt•keine ID-Selektoren
![Page 31: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/31.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Kategorisierte Stile (base, layout, module…)•Namenskonventionen•Selektorentiefe <= 2•mehr Code im HTML
Heute
![Page 32: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/32.jpg)
Nico Brünjes: Moderne Frontendentwicklung
SASS (Synthactical Awesome Stylesheets)
![Page 33: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/33.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Variablen•Verschachtelung•Funktionen•Vererbung•u.v.m.
SASS
![Page 34: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/34.jpg)
Nico Brünjes: Moderne Frontendentwicklung
CSS Authoring Framework
http://compass-style.org
![Page 35: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/35.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Fertige Funktionen•CSS3 vereinfacht•Sprites•Typographische Helfer•Extensions…
compass
![Page 36: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/36.jpg)
Nico Brünjes: Moderne Frontendentwicklung
Javascript
![Page 37: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/37.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•ZEIT.namespace•jQuery 1.x•jQuery-Plugins•(backbone.js)
Website
![Page 38: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/38.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•backbone.js?•underscore.js?•jQuery 2.x?
Apps
![Page 39: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/39.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Sid.js (lazy loading)
•modernizr (progressive enhancement)
•node.js (deployment)
•Jasmine (BDD, testing) •Selenium (acceptance testing)
+
![Page 40: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/40.jpg)
Nico Brünjes: Moderne Frontendentwicklung
GRUNT
![Page 41: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/41.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Javascript Taskrunner•basierend auf node.js•automatisches Abarbeiten von Aufgaben•Testen und Deployen
GRUNT
![Page 42: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/42.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Javascript wird ,gelinted‘•Templates werden kompiliert•SCSS wird mit compass kompiliert•Livereload!
$> grunt watch
![Page 43: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/43.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Jasmine Tests werden durchgeführt•Javascripte werden konkatiniert•Javascript wird komprimiert
$ > grunt
![Page 44: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/44.jpg)
Nico Brünjes: Moderne Frontendentwicklung
•Coding Guidelines implementiert•Code getestet•Code verkleinert•ready to deploy
FTW!
![Page 45: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/45.jpg)
Open Source
https://github.com/ZeitOnline
![Page 46: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/46.jpg)
FRAGEN?
![Page 47: Moderne Frontendentwicklung am Beispiel ZEIT ONLINE](https://reader033.vdokument.com/reader033/viewer/2022060200/5598a0ef1a28ab9a0a8b4678/html5/thumbnails/47.jpg)
Nico Brünjes@nicobruenjes
http://nicobruenjes.de
DANKE.