ZEIT ONLINE Frontend Development, Vortrag beim Webworker Stammtisch Ruhr in Essen, 22.03.2018 by @nicobruenjes

1. frontend developmentfrontend development
1 . 1

2. Nico BrünjesNico Brünjes
@nicobruenjes
couchblog.de
keybase.io/nicobruenjes
github.com/codecandies
github.com/zeitonline
1 . 2

3. Teamleiter FrontendTeamleiter Frontend
Rechtswissenschaftler
Deejay, Plattenverkäufer
Fachinformatiker
blogg.de
1 . 3

4. SteckbriefSteckbrief
Tabs…
zu Spaces gezwungen
Chrome, Firefox, Chrome…
Sublime Text
Visual Studio Code
vim… whatsoever.
1 . 4

5. Kurzer RückblickKurzer Rückblick
2 . 1

6. 20052005
1 Frontend-Entwickler
1 Allrounder
2 Backend-Entwickler
2 . 2

7. 2 . 3

8. 2 . 4

9. 2 . 5

10. 2 . 6

11. 2 . 7

12. 2 . 8

13. 2009er Re2009er Reloungeloungeteamteam
2 Frontend-Entwickler
4 Backend-Entwickler (inkl. CMS-
Entwicklung)
1 Designagentur
1 Agentur für CMS-Entwicklung
2 . 9

14. 2 . 10

15. 2 . 11

16. 2 . 12

17. 2015er Relaunchteam2015er Relaunchteam
4 Frontend-Entwickler
6 Backend-Entwickler
1 Sysadmin
1 Webdesigner
1 Designagentur
1 Agentur für CMS-Entwicklung
1 Agentur Wordpress
…uvm.
2 . 13

18. 2 . 14

19. HeuteHeute
Sind nie alle da um auf ein Foto zu kommen.
2 . 15

20. Wie wir arbeiten…Wie wir arbeiten…
3 . 1

21. Genereller StackGenereller Stack
Python
Pyramid
Jinja
HTML/CSS/Javascript
3 . 2

22. Das FrontendDas Frontend
Sass
Javascript (ES5/6+), jQuery
npm
Webpack
Jinja
Python
Testing: pytest/Selenium, Browserstack,
visual regression testing
3 . 3

23. 3 . 4

24. Doch…Doch…
XML, XSLT, Perl…
Wordpress, Drupal, PHP…
Angular, React, node…
3 . 5

25. ToolsTools
Slack, Github, Browserstack, Jira, Dropbox
Paper, Star Leaf
3 . 6

26. Coding Guidelines:Coding Guidelines:
https://github.com/ZeitOnline/coding-guidelines
3 . 7

27. Gute Erfahrungen mit BEM.Gute Erfahrungen mit BEM.
3 . 8

28. Design System/Pattern LibraryDesign System/Pattern Library
Haben wir noch nicht.
3 . 9

29. Non functional requirementsNon functional requirements
zugänglich
getestet
Geschwindigkeit
progressively enhanced
aber auch… bspw. Tracking oder SEO
3 . 10

30. Agile, crossfunktionale TeamsAgile, crossfunktionale Teams
themenbezogene Teams für längerfristige
Projekte
ein feststehendes Team für alle anderen
Aufgaben
3 . 11

31. GildenGilden
Frontendgilde
Backendgilde
3 . 12

32. Erste responsiveErste responsive
Nachrichtenwebsite inNachrichtenwebsite in
DeutschlandDeutschland
4 . 1

33. … ist nicht… ist nicht wirklichwirklich
responsiv.responsiv.
4 . 2

34. 4 . 3

35. 4 . 4

36. 4 . 5

37. Immer mehr mobile ZugriffeImmer mehr mobile Zugriffe
4 . 6

38. Gegen den Trend:Gegen den Trend:
Homepage ist unser KapitalHomepage ist unser Kapital
4 . 7

39. Drei Versionen:Drei Versionen:
Desktop
Mobile
AMP
4 . 8

40. Barrierefrei ganz nebenbei?Barrierefrei ganz nebenbei?
5 . 1

41. Non functional requirements
Persönlicher Einsatz
Zusammenarbeit mit der SEO-Abteilung
5 . 2

42. NormaleNormale EntwicklungEntwicklung
Orientierung an Erfahrungen und best
practice
regelmäßiges Konsultieren von Fachartikeln,
Standards etc.
Kompetenzaufbau durch
Veranstaltungsteilnahmen
automatische Tests
regelmäßiges Testen mit Voice-Over
Eingriff in Designentscheidungen
5 . 3

43. NutzertestsNutzertests
Betreuung Bachelorarbeit: "Barrierefreiheit
deutschsprachiger Nachrichtenportale"
sehr genaue Untersuchung großer Teile der
Website
Nutzerinterviews
mit dramatischen Ergebnissen
5 . 4

44. Automatische AnalysenAutomatische Analysen
aXe CLI
Pa11y
5 . 5

45. Accessibilty DashboardAccessibilty Dashboard
5 . 6

46. Meetups die wir unterstützen/anMeetups die wir unterstützen/an
denen wir teilnehmendenen wir teilnehmen
A11Y Meetup in Berlin
role=drinks Meetup in Hamburg
5 . 7

47. HTTPSHTTPS
6 . 1

48. »Es gibt Dinge, die dauern unendlich lange.«
6 . 2

49. Starten mit WeblogsStarten mit Weblogs
6 . 3

50. http://blog.zeit.de…http://blog.zeit.de…
lange laufendes Projekt
maintained aber nicht kontinuierlich
weiterentwickelt
Chance zur Modernisierung
Refactoring nötig
Stand: lokale Entwicklung mit ,
privates Repo, kein Staging
Chassis
6 . 4

51. httphttpss://blog.zeit.de://blog.zeit.de
Neuer virtueller Blogserver
Stagingserver
Entwicklung mit
Deployment komplett geändert
Alle Themes und Plugins in offenen Repos
die grüne Handtasche!
Chassis
6 . 5

52. 6 . 6

53. Performance?Performance?
7 . 1

54. Projekt Hase…Projekt Hase…
7 . 2

55. Inzwischen:Inzwischen:
Regelmäßiges Testing
besonderes Augenmerk auf Performance
Messen: mit Speedcurve
Messen: mit sitespeed.io in einem eigenen
Dashboard
7 . 3

56. Devise:Devise:
lazy load everythinglazy load everything
Bilder
Ads, Videos, Widgets
Text?
7 . 4

57. »Perceived performance«»Perceived performance«
<picture class="teaser-fullwidth__media-container">
<source media="(min-width:768px)" srcset="https://img.
<source srcset="https://img.zeit.de/politik/ausland/20
<img class="teaser-fullwidth__media-item" src="https:/
</picture>
7 . 5

58. 7 . 6

59. Hurra… wir machen ReactHurra… wir machen React
8 . 1

60. 8 . 2

61. Was spricht gegen React aufWas spricht gegen React auf
www.zeit.de?www.zeit.de?
8 . 3

62. Es kommt auf den Fall an…Es kommt auf den Fall an…
React, Angular, vue.js, …
Tools für die Redaktion
Frontend des Backends
Prototyping
Audiencespezifisch (bpsw. Spiele)
8 . 4

63. Skunk works:Skunk works:
Audio ExplorerAudio Explorer
9 . 1

64. Erste Annäherung an Audio-Erste Annäherung an Audio-
InterfacesInterfaces
Web Speech API
React
»Hackathon«
Github
9 . 2

65. DemoDemo
Audio Explorer
Russland-Affäre
Hope Hicks hat für Trump "Notlügen" erzählt
Der Geheimdienstausschuss des US-Repräsentantenhauses hat die Trump-Beraterin Hope Hicks zur Russland-
Affäre befragt. Mehrere Fragen beantwortete sie nicht.
vor 22 Tagen | ca. 01:48 Min. | Auf ZEIT ONLINE lesen
Gender-Marketing
Abstimmung: Werbung gegen Geschlechter-Stereotypen
Positivpreis für progressive Werbung: "Pinker Pudel" zeichnet Kampagnen für Geschlechtervielfalt aus. Außerdem
in der "Elbvertiefung": Feiertag(e), Erdoğan vs. Böhmermann
vor 22 Tagen | ca. 12:26 Min. | Auf ZEIT ONLINE lesen
9 . 3

66. Fragen?Fragen?
10 . 1

67. Dann vielen Dank für eure Geduld.
@nicobruenjes
couchblog.de
keybase.io/nicobruenjes
github.com/codecandies
10 . 2

68. BildnachweisBildnachweis
Video by Frank Bergfeld on
Photo by on
Photo by on
Photo by on
Photo by on
Photo by on
Photo by on
Photo by on
Photo by on
Youtube
Aditya Romansa Unsplash
Rachel Davis Unsplash
Josh Calabrese Unsplash
paolo candelo Unsplash
Nilotpal Kalita Unsplash
chuttersnap Unsplash
Samuel Scrimshaw Unsplash
Luis Mézquita Unsplash
10 . 3