State of the Frontend

@Unic

Thomas Jaggi, 1. März 2017, HSR Rapperswil

1. Sharing is caring

Stand des Frontends teilen

• Frontend-Preview-Server
• Jeder Zustand der develop und master Branch
• Bestimmte Zustände von Feature-Branches
• Eigene Subdomain pro Build

2. Tools FTW!

Flexibilität

• Build-System als Teil des Frontend-Repos
• Einfach veränder- & erweiterbar
• Framework-agnostisch

Stabilität und Performance

• Gulp.js als schneller & flexibler Taskrunner
  → https://github.com/unic/estatico
• Webpack als JavaScript-Bundler
• Babel als ES6-Transpiler
• (Yarn als Dependency-Manager)

Jein

• Beispiel Yarn (Drop-In-Replacement für npm)
• Schnell (Test in Estático-Repo):
  • 2-4x schneller ohne Cache
  • 30x schneller mit Cache
• Theoretisch zuverlässig: yarn.lock
• Aber: Kinderkrankheiten:
  • Referenzierung von Git-Commit-Hash
  • Installation von Binaries wie Libsass 

Ja

• Beispiel https://www.npmjs.com/package/
  webpack-bundle-analyzer
• Identifikation von grossen Dependencies
  → dynamisches Nachladen, Ersetzen durch kleinere etc.

3. Accessibility FTW!

«Gemäss verschiedenen Quellen kann die Anzahl Menschen mit Behinderungen auf rund 1,4 Millionen geschätzt werden.»

Bundesamt für Statistik (2011)

Wichtige Zielgruppe: Maschinen

• Suchmaschinen
• Screenreader

Das Web ist grundsätzlich barrierefrei. Zumindest bis wir auf den Plan treten:

http://jsbin.com/rahikam/

(Demos mit Apple Voiceover)

Wie verhindert man das?

• Elementare Basis: Semantisches HTML-Markup:
  • http://jsbin.com/zisapu/
• Interaktive Module: WAI ARIA der W3C:
  • Erweiterung der HTML-Spezifikation um zusätzliche Attribute (aria-haspopup, aria-expanded etc.)
  • Ziel: Maschinen können daraus auf Funktionalität und Zustand von Elementen schliessen

HTML/CSS-Linting FTW?

HTML: Automatische Validierung

• W3C Validator
  • Service: https://validator.w3.org/docs/api.html
  • Self-hosted / lokal:
    https://github.com/unic/dockerhtml5validator
• Auf ersten Projekten im Einsatz
• Fein-Tuning nötig ("falsch-positive" Resultate, wenn Markup teilweise dynamisch generiert wird)

CSS-Linting mit Stylelint

In Evaluation, IDE-Integration noch unvollständig

Ade messi

Wer mit uns das nächste sbb.ch bauen möchte: unic.com/jobs

Kontakt: Thomas Jaggi, thomas.jaggi@unic.com, @backflip

Gifs: giphy.com