ModerneFrontendentwicklungAm Beispiel ZEIT ONLINE.
Nico Brünjes@nicobruenjeshttp://nicobruenjes.de
Nico Brünjes: Moderne Frontendentwicklun
Nico Brünjes: Moderne FrontendentwicklunAlles, was man auf derWebsite sehen kann.»
„Was man nichtsehen kann“Das Backend.
Nico Brünjes: Moderne FrontendentwicklunXML is like violence. Ifit doesnt solve yourproblem, youre notusing enough of it.»...
Nico Brünjes: Moderne Frontendentwicklun•Apache•Python•Varnish•uvm.Backend
Open Source
„Raupe goesSchmetterling“Transformation.
Nico Brünjes: Moderne FrontendentwicklunXSLT
Nico Brünjes: Moderne Frontendentwicklun•XSL Transformation•Programmiersprache•XML via XSLT in…•ist selber XMLXSLT
Nico Brünjes: Moderne Frontendentwicklun•XSLT Prozessor alsApache Modul•zur Laufzeit a.d.Server•Doppeltransformation•page ...
Open Source
„Genie und Wahnsinnwandeln Hand in Hand“Das Frontend.
Nico Brünjes: Moderne FrontendentwicklunBrowser
Nico Brünjes: Moderne Frontendentwicklun•Google Chrome•Mozilla Firefox•Internet Explorer•Safari•OperaBrowser
Nico Brünjes: Moderne FrontendentwicklunThe most hostilesoftware developmentenvironmentimagenable.»Douglas Crockford über ...
Nico Brünjes: Moderne FrontendentwicklunUnd…?
Nico Brünjes: Moderne FrontendentwicklunHTML 5
Nico Brünjes: Moderne Frontendentwicklun•September 2009:<!doctype html>•kein einziges HTML5Element•valides HTMLHTML5
Nico Brünjes: Moderne Frontendentwicklun•Zugänglichkeit•Auffindbarkeit•Strukturierung•weniger Website•mehr AppHTML5
Nico Brünjes: Moderne Frontendentwicklun•<audio>•<video>•<canvas>•<header>, <section>, <article>,<footer>HTML5
Nico Brünjes: Moderne FrontendentwicklunCSS 3
Nico Brünjes: Moderne FrontendentwicklunCSS3Frontendtechniker:»Endlich alles eingebaut!Borderradius, Schatten,Farbverläufe...
Nico Brünjes: Moderne Frontendentwicklun
Nico Brünjes: Moderne FrontendentwicklunScalable and ModularArchitecture for CSS
Nico Brünjes: Moderne Frontendentwicklun•Wenig Klassen•möglichst wenigHTML•Logik im CSS•viel CSS…•… leider langsam.Damals…
Nico Brünjes: Moderne FrontendentwicklunDamals…body .article #comments ul > li li li > a.button {}•überspezifiziert•schwie...
Nico Brünjes: Moderne FrontendentwicklunMöööhhhh!**= best practices are killing us!Foto: Marc JP http://www.flickr.com/pho...
Nico Brünjes: Moderne FrontendentwicklunHeute.comment-item > .button {}•sprechend•wenig verschachtelt•keine ID-Selektoren
Nico Brünjes: Moderne Frontendentwicklun•Kategorisierte Stile(base, layout,module…)•Namenskonventionen•Selektorentiefe <= ...
Nico Brünjes: Moderne FrontendentwicklunSASS (SynthacticalAwesome Stylesheets)
Nico Brünjes: Moderne Frontendentwicklun•Variablen•Verschachtelung•Funktionen•Vererbung•u.v.m.SASS
Nico Brünjes: Moderne FrontendentwicklunCSS Authoring Frameworkhttp://compass-style.org
Nico Brünjes: Moderne Frontendentwicklun•Fertige Funktionen•CSS3 vereinfacht•Sprites•TypographischeHelfer•Extensions…compass
Nico Brünjes: Moderne FrontendentwicklunJavascript
Nico Brünjes: Moderne Frontendentwicklun•ZEIT.namespace•jQuery 1.x•jQuery-Plugins•(backbone.js)Website
Nico Brünjes: Moderne Frontendentwicklun•backbone.js?•underscore.js?•jQuery 2.x?Apps
Nico Brünjes: Moderne Frontendentwicklun•Sid.js (lazy loading)•modernizr (progressiveenhancement)•node.js (deployment)•Jas...
Nico Brünjes: Moderne FrontendentwicklunGRUNT
Nico Brünjes: Moderne Frontendentwicklun•JavascriptTaskrunner•basierend auf node.js•automatischesAbarbeiten vonAufgaben•Te...
Nico Brünjes: Moderne Frontendentwicklun•Javascript wird,gelinted‘•Templates werdenkompiliert•SCSS wird mitcompass kompili...
Nico Brünjes: Moderne Frontendentwicklun•Jasmine Testswerden durchgeführt•Javascripte werdenkonkatiniert•Javascript wirdko...
Nico Brünjes: Moderne Frontendentwicklun•Coding Guidelinesimplementiert•Code getestet•Code verkleinert•ready to deployFTW!
Open Sourcehttps://github.com/ZeitOnline
FRAGEN?
Nico Brünjes@nicobruenjeshttp://nicobruenjes.deDANKE.
Nächste SlideShare
Wird geladen in …5
×

Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

1.938 Aufrufe

Veröffentlicht am

Vortrag bei den Holtzbrinck Technology Days 2013 in München.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.938
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
373
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

  1. 1. ModerneFrontendentwicklungAm Beispiel ZEIT ONLINE.
  2. 2. Nico Brünjes@nicobruenjeshttp://nicobruenjes.de
  3. 3. Nico Brünjes: Moderne Frontendentwicklun
  4. 4. Nico Brünjes: Moderne FrontendentwicklunAlles, was man auf derWebsite sehen kann.»
  5. 5. „Was man nichtsehen kann“Das Backend.
  6. 6. Nico Brünjes: Moderne FrontendentwicklunXML is like violence. Ifit doesnt solve yourproblem, youre notusing enough of it.»Unbekannter Autor:
  7. 7. Nico Brünjes: Moderne Frontendentwicklun•Apache•Python•Varnish•uvm.Backend
  8. 8. Open Source
  9. 9. „Raupe goesSchmetterling“Transformation.
  10. 10. Nico Brünjes: Moderne FrontendentwicklunXSLT
  11. 11. Nico Brünjes: Moderne Frontendentwicklun•XSL Transformation•Programmiersprache•XML via XSLT in…•ist selber XMLXSLT
  12. 12. Nico Brünjes: Moderne Frontendentwicklun•XSLT Prozessor alsApache Modul•zur Laufzeit a.d.Server•Doppeltransformation•page formatTransformation
  13. 13. Open Source
  14. 14. „Genie und Wahnsinnwandeln Hand in Hand“Das Frontend.
  15. 15. Nico Brünjes: Moderne FrontendentwicklunBrowser
  16. 16. Nico Brünjes: Moderne Frontendentwicklun•Google Chrome•Mozilla Firefox•Internet Explorer•Safari•OperaBrowser
  17. 17. Nico Brünjes: Moderne FrontendentwicklunThe most hostilesoftware developmentenvironmentimagenable.»Douglas Crockford über Webbrowser:
  18. 18. Nico Brünjes: Moderne FrontendentwicklunUnd…?
  19. 19. Nico Brünjes: Moderne FrontendentwicklunHTML 5
  20. 20. Nico Brünjes: Moderne Frontendentwicklun•September 2009:<!doctype html>•kein einziges HTML5Element•valides HTMLHTML5
  21. 21. Nico Brünjes: Moderne Frontendentwicklun•Zugänglichkeit•Auffindbarkeit•Strukturierung•weniger Website•mehr AppHTML5
  22. 22. Nico Brünjes: Moderne Frontendentwicklun•<audio>•<video>•<canvas>•<header>, <section>, <article>,<footer>HTML5
  23. 23. Nico Brünjes: Moderne FrontendentwicklunCSS 3
  24. 24. Nico Brünjes: Moderne FrontendentwicklunCSS3Frontendtechniker:»Endlich alles eingebaut!Borderradius, Schatten,Farbverläufe…«Webdesigner:»Schön. Dann machen wirjetzt alles flat.«
  25. 25. Nico Brünjes: Moderne Frontendentwicklun
  26. 26. Nico Brünjes: Moderne FrontendentwicklunScalable and ModularArchitecture for CSS
  27. 27. Nico Brünjes: Moderne Frontendentwicklun•Wenig Klassen•möglichst wenigHTML•Logik im CSS•viel CSS…•… leider langsam.Damals…
  28. 28. Nico Brünjes: Moderne FrontendentwicklunDamals…body .article #comments ul > li li li > a.button {}•überspezifiziert•schwierig zu editieren•schwierig für andere
  29. 29. Nico Brünjes: Moderne FrontendentwicklunMöööhhhh!**= best practices are killing us!Foto: Marc JP http://www.flickr.com/photos/pyth0ns/
  30. 30. Nico Brünjes: Moderne FrontendentwicklunHeute.comment-item > .button {}•sprechend•wenig verschachtelt•keine ID-Selektoren
  31. 31. Nico Brünjes: Moderne Frontendentwicklun•Kategorisierte Stile(base, layout,module…)•Namenskonventionen•Selektorentiefe <= 2•mehr Code im HTMLHeute
  32. 32. Nico Brünjes: Moderne FrontendentwicklunSASS (SynthacticalAwesome Stylesheets)
  33. 33. Nico Brünjes: Moderne Frontendentwicklun•Variablen•Verschachtelung•Funktionen•Vererbung•u.v.m.SASS
  34. 34. Nico Brünjes: Moderne FrontendentwicklunCSS Authoring Frameworkhttp://compass-style.org
  35. 35. Nico Brünjes: Moderne Frontendentwicklun•Fertige Funktionen•CSS3 vereinfacht•Sprites•TypographischeHelfer•Extensions…compass
  36. 36. Nico Brünjes: Moderne FrontendentwicklunJavascript
  37. 37. Nico Brünjes: Moderne Frontendentwicklun•ZEIT.namespace•jQuery 1.x•jQuery-Plugins•(backbone.js)Website
  38. 38. Nico Brünjes: Moderne Frontendentwicklun•backbone.js?•underscore.js?•jQuery 2.x?Apps
  39. 39. Nico Brünjes: Moderne Frontendentwicklun•Sid.js (lazy loading)•modernizr (progressiveenhancement)•node.js (deployment)•Jasmine (BDD, testing)•Selenium (acceptance testing)+
  40. 40. Nico Brünjes: Moderne FrontendentwicklunGRUNT
  41. 41. Nico Brünjes: Moderne Frontendentwicklun•JavascriptTaskrunner•basierend auf node.js•automatischesAbarbeiten vonAufgaben•Testen und DeployenGRUNT
  42. 42. Nico Brünjes: Moderne Frontendentwicklun•Javascript wird,gelinted‘•Templates werdenkompiliert•SCSS wird mitcompass kompiliert•Livereload!$> grunt watch
  43. 43. Nico Brünjes: Moderne Frontendentwicklun•Jasmine Testswerden durchgeführt•Javascripte werdenkonkatiniert•Javascript wirdkomprimiert$ > grunt
  44. 44. Nico Brünjes: Moderne Frontendentwicklun•Coding Guidelinesimplementiert•Code getestet•Code verkleinert•ready to deployFTW!
  45. 45. Open Sourcehttps://github.com/ZeitOnline
  46. 46. FRAGEN?
  47. 47. Nico Brünjes@nicobruenjeshttp://nicobruenjes.deDANKE.

×