Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

Moderne
Frontendentwicklung
Am Beispiel ZEIT ONLINE.

Nico Brünjes
@nicobruenjes
http://nicobruenjes.de

Nico Brünjes: Moderne Frontendentwicklun

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

„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

„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

CSS3
Frontendtechniker:
»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/

Heute
.comment-item > .button {}
•sprechend
•wenig verschachtelt
•keine ID-Selektoren

•Kategorisierte Stile
(base, layout,
module…)
•Namenskonventione
n
•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

•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

Nico Brünjes
@nicobruenjes
http://nicobruenjes.de
DANKE.

Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Similaire à Moderne Frontendentwicklung am Beispiel ZEIT ONLINE

Similaire à Moderne Frontendentwicklung am Beispiel ZEIT ONLINE (20)

Moderne Frontendentwicklung am Beispiel ZEIT ONLINE