SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Downloaden Sie, um offline zu lesen
frontend developmentfrontend development
1 . 1
Nico BrünjesNico Brünjes
@nicobruenjes
couchblog.de
keybase.io/nicobruenjes
github.com/codecandies
github.com/zeitonline
1 . 2
Teamleiter FrontendTeamleiter Frontend
Rechtswissenschaftler
Deejay, Plattenverkäufer
Fachinformatiker
blogg.de
1 . 3
SteckbriefSteckbrief
Tabs…
zu Spaces gezwungen
Chrome, Firefox, Chrome…
Sublime Text
Visual Studio Code
vim… whatsoever.
1 . 4
Kurzer RückblickKurzer Rückblick
2 . 1
20052005
1 Frontend-Entwickler
1 Allrounder
2 Backend-Entwickler
2 . 2
2 . 3
2 . 4
2 . 5
2 . 6
2 . 7
2 . 8
2009er Re2009er Reloungeloungeteamteam
2 Frontend-Entwickler
4 Backend-Entwickler (inkl. CMS-
Entwicklung)
1 Designagentur
1 Agentur für CMS-Entwicklung
2 . 9
2 . 10
2 . 11
2 . 12
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
2 . 14
HeuteHeute
Sind nie alle da um auf ein Foto zu kommen.
2 . 15
Wie wir arbeiten…Wie wir arbeiten…
3 . 1
Genereller StackGenereller Stack
Python
Pyramid
Jinja
HTML/CSS/Javascript
3 . 2
Das FrontendDas Frontend
Sass
Javascript (ES5/6+), jQuery
npm
Webpack
Jinja
Python
Testing: pytest/Selenium, Browserstack,
visual regression testing
3 . 3
3 . 4
Doch…Doch…
XML, XSLT, Perl…
Wordpress, Drupal, PHP…
Angular, React, node…
3 . 5
ToolsTools
Slack, Github, Browserstack, Jira, Dropbox
Paper, Star Leaf
3 . 6
Coding Guidelines:Coding Guidelines:
https://github.com/ZeitOnline/coding-guidelines
3 . 7
Gute Erfahrungen mit BEM.Gute Erfahrungen mit BEM.
3 . 8
Design System/Pattern LibraryDesign System/Pattern Library
Haben wir noch nicht.
3 . 9
Non functional requirementsNon functional requirements
zugänglich
getestet
Geschwindigkeit
progressively enhanced
aber auch… bspw. Tracking oder SEO
3 . 10
Agile, crossfunktionale TeamsAgile, crossfunktionale Teams
themenbezogene Teams für längerfristige
Projekte
ein feststehendes Team für alle anderen
Aufgaben
3 . 11
GildenGilden
Frontendgilde
Backendgilde
3 . 12
Erste responsiveErste responsive
Nachrichtenwebsite inNachrichtenwebsite in
DeutschlandDeutschland
4 . 1
… ist nicht… ist nicht wirklichwirklich
responsiv.responsiv.
4 . 2
4 . 3
4 . 4
4 . 5
Immer mehr mobile ZugriffeImmer mehr mobile Zugriffe
4 . 6
Gegen den Trend:Gegen den Trend:
Homepage ist unser KapitalHomepage ist unser Kapital
4 . 7
Drei Versionen:Drei Versionen:
Desktop
Mobile
AMP
4 . 8
Barrierefrei ganz nebenbei?Barrierefrei ganz nebenbei?
5 . 1
Non functional requirements
Persönlicher Einsatz
Zusammenarbeit mit der SEO-Abteilung
5 . 2
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
NutzertestsNutzertests
Betreuung Bachelorarbeit: "Barrierefreiheit
deutschsprachiger Nachrichtenportale"
sehr genaue Untersuchung großer Teile der
Website
Nutzerinterviews
mit dramatischen Ergebnissen
5 . 4
Automatische AnalysenAutomatische Analysen
aXe CLI
Pa11y
5 . 5
Accessibilty DashboardAccessibilty Dashboard
5 . 6
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
HTTPSHTTPS
6 . 1
»Es gibt Dinge, die dauern unendlich lange.«
6 . 2
Starten mit WeblogsStarten mit Weblogs
6 . 3
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
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
6 . 6
Performance?Performance?
7 . 1
Projekt Hase…Projekt Hase…
7 . 2
Inzwischen:Inzwischen:
Regelmäßiges Testing
besonderes Augenmerk auf Performance
Messen: mit Speedcurve
Messen: mit sitespeed.io in einem eigenen
Dashboard
7 . 3
Devise:Devise:
lazy load everythinglazy load everything
Bilder
Ads, Videos, Widgets
Text?
7 . 4
»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
7 . 6
Hurra… wir machen ReactHurra… wir machen React
8 . 1
8 . 2
Was spricht gegen React aufWas spricht gegen React auf
www.zeit.de?www.zeit.de?
8 . 3
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
Skunk works:Skunk works:
Audio ExplorerAudio Explorer
9 . 1
Erste Annäherung an Audio-Erste Annäherung an Audio-
InterfacesInterfaces
Web Speech API
React
»Hackathon«
Github
9 . 2
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
Fragen?Fragen?
10 . 1
Dann vielen Dank für eure Geduld.
@nicobruenjes
couchblog.de
keybase.io/nicobruenjes
github.com/codecandies
10 . 2
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

Weitere ähnliche Inhalte

Ähnlich wie WWruhr2018

Ähnlich wie WWruhr2018 (20)

Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Architectures for .Net Core Applications
Architectures for .Net Core ApplicationsArchitectures for .Net Core Applications
Architectures for .Net Core Applications
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
#ADC 2016 - Roslyn & Visual Studio Extensions
#ADC 2016 - Roslyn & Visual Studio Extensions#ADC 2016 - Roslyn & Visual Studio Extensions
#ADC 2016 - Roslyn & Visual Studio Extensions
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Codeception VisualCeption
Codeception VisualCeptionCodeception VisualCeption
Codeception VisualCeption
 
Dream-Team: Roslyn & Visual Studio Extensions
Dream-Team: Roslyn & Visual Studio ExtensionsDream-Team: Roslyn & Visual Studio Extensions
Dream-Team: Roslyn & Visual Studio Extensions
 
Agile Web Projects
Agile Web ProjectsAgile Web Projects
Agile Web Projects
 
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und ÜberblickOOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
 
Die sieben Projektphasen für Voice Projekte
Die sieben Projektphasen für Voice ProjekteDie sieben Projektphasen für Voice Projekte
Die sieben Projektphasen für Voice Projekte
 
BASTA! Spring 2017 - Warum warten auf die IDE? Direct Coding in der eigenen A...
BASTA! Spring 2017 - Warum warten auf die IDE? Direct Coding in der eigenen A...BASTA! Spring 2017 - Warum warten auf die IDE? Direct Coding in der eigenen A...
BASTA! Spring 2017 - Warum warten auf die IDE? Direct Coding in der eigenen A...
 
JWD - janz weit draußen - Herbstcampus 2009
JWD - janz weit draußen - Herbstcampus 2009JWD - janz weit draußen - Herbstcampus 2009
JWD - janz weit draußen - Herbstcampus 2009
 
Vortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development EnvironmentsVortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development Environments
 
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-PipelinesContinuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 

WWruhr2018