Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

2.261 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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.

×