Wie funktioniert ein effizienter Webentwicklungs-Workflow? Frontend Developer Florian Klos erklärte dies in seinem Vortrag an der HTWK Leipzig am praktischen Beispiel des s.Oliver Modelstar Contests, den er bei PLUSPOL interactive mitentwickelt hat. Dabei zeigt er, welchen Nutzen Build-Systeme (Gulp), CSS-Präprozessoren (Sass) oder Javascript-Compiler (Babel, Browserify) für die moderne Webentwicklung haben. Florian Klos ist Absolvent der HTWK Leipzig im Bachelorstudiengang Medieninformatik und als Web Developer bei PLUSPOL interactive tätig.

1. MODERNER
WEBENTWICKLUNGS-
WORKFLOW

2. Florian Klos
VORSTELLUNG

3. FLORIAN KLOS
WER ICH BIN
Developer PLUSPOL interactive GbR
Floßplatz 4
04107 Leipzig
klos@pluspol-interactive.de

4. Leidenschaft
für Webentwicklung,
daher Studium der
Medieninformatik
Studium der
Medieninformatik
an der HTWK Leipzig
mit dem Abschluss
Bachelor of Science
Praktikum bei PLUSPOL
interactive im Bereich
Webentwicklung
(Backend)
Festanstellung als
Developer bei PLUSPOL
interactive
WEBENTWICKLUNG STUDIUM PRAKTIKUM PLUSPOL
WERDEGANG
März bis Juni 2015bis Oktober 2015 seit Oktober 2015
WERDEGANG

5. am Praxis-Beispiel s.Oliver Model Star
AKTUELLER WORKFLOW

6. • (Model-)Wettbewerb von s.Oliver
• Gewinner und Gewinnerin erhalten
Modelvertrag
• Teilnahme über Website und im Laden
möglich
• Einsendungen werden von Jury
vorausgewählt
• User-Voting entscheidet über die
Gewinner
• Mehrsprachig: insgesamt 8
Teilnahmeländer
• Mehrphasig: Ablauf in Teilnahme-,
Jury-, Voting- und Gewinnerphase
• Umfangreiches Verwaltungsbackend
(u.a. zur Teilnehmerverwaltung)
• Dynamisches Teilnehmer-Sharing
• u. v. m.
BESONDERHEITENWAS IST DAS?
• Bereits im Praktikum teilweise betreut
• Bisher größtes, im Frontend
eigenständig betreutes Projekt
• Interessantes und umfangreiches
Projekt
BESONDERHEITEN FÜR MICH
PRAXIS-BEISPIELPRAXIS-BEISPIEL

7. FRONTEND
• Auf Basis von Laravel
• Bietet Schnittstelle (API) zur Kommunikation mit dem Frontend
• Teilnahme
• Galerie
• Voting
• Tracking
• Bild-Interface zur dynamischen Bildgenerierung
• u. v. m.
BACKEND
• Auf Basis von AngularJS und Foundation
• Beinhaltet die eigentliche Seite für den Endnutzer
• Teilnahmeformular
• Bewerber-Galerie
• Live-Casting-Karte
• Teilnehmer-Detail
• Voting-Modul
• u. v. m.

8. t
Gulp
HTML
CSS
JS
Bilder
WAS WURDE GENUTZT?
Für die Auslieferung minimiert
• Baut die Anwendung und bereitet diese für
die Auslieferung vor
• Automatisches Beobachten und Neu-
Bauen der Anwendung bei der Entwicklung
• Automatisches Neuladen des Browsers bei
neu gebauten Dateien
Für die Auslieferung optimiert
und minimiert
• Mit ES6 programmiert und
dann in ES5 (aktuelles JS)
kompiliert
• Mit Browserify lassen sich
JS-Module im Browser
nutzen
• Für die Auslieferung
minimiert
• Mit Sass programmiert und
in CSS kompiliert
• Mit Autoprefixer werden
Browserbesonderheiten
ergänzt
• Für die Auslieferung
minimiert
FRONTEND-WORKFLOW

9. Web im Wandel
ENTWICKLUNG DES
WORKFLOWS

10. • Leistungsstärkere Computer
• Neue Gerätetypen: Smartphone, Tablet,
Smartwatch, usw.
• Weitverbreitetes und schnelles Internet
• Vielzahl an unterschiedlichen Browsern
und Browserversionen: Chrome,
Firefox, IE, mobile Browser
• Unterschiedlicher Entwicklungsstand
der Browser
ENTWICKLUNG DER BROWSERENTWICKLUNG DER ENDGERÄTE
• Weiterentwicklung der
Programmiersprachen bzw.
Möglichkeiten
• Durch Standard oder externe
Technologien
ENTWICKLUNG DER TECHNOLOGIE
http://www.evolutionoftheweb.com/
Die Art und Weise wie Webanwendungen entwickelt werden, musste sich auch anpassen/weiterentwickeln.
EVOLUTION DES WEBS

11. Dateistruktur im Wandel
ENTWICKLUNG DES
WORKFLOWS

12. js/
+- app/
| +- helpers.js
| +- index.js
| +- slider.js
+- lib/
+- base-lib.js
+- jquery.js
+- jquery.plugin.js
• Für die Seite werden unterschiedliche Module/Bibliotheken/...
benötigt
• Bibliotheken werden manuell heruntergeladen und als einzelne
Dateien abgespeichert
• Alle Dateien müssen einzeln im HTML-Dokument eingebunden
werden
VORGEHEN
• Mit steigender Dateianzahl wird das Einbinden unübersichtlicher
• Das Einbinden kann vergessen werden
• Das Entfernen von nicht mehr verwendeten Einbindungen kann
vergessen werden
• Die Reihenfolge beim Einbinden ist (teilweise) wichtig
• Der Nutzer muss viele Dateien laden
DATEISTRUKTUR – EINZELNE DATEIEN
...
<script src="js/lib/base-lib.js"></script>
<script src="js/lib/jquery.js"></script>
<!-- Achtung: Reihenfolge ist wichtig -->
<script src="js/lib/jquery.plugin.js"></script>
<script src="js/app/helpers.js"></script>
<script src="js/app/slider.js"></script>
<script src="js/app/index.js"></script>
...
WAS SPRICHT DAGEGEN?
EinbindungimHTML
Dateistruktur

13. • Prozess des Zusammenfügens läuft rekursiv und alphabetisch über
die vorhanden Dateien
• Für die Gewährleistung der richtigen Reihenfolge müssen die
Dateien dementsprechend benannt werden
• Es müssen nun nur noch die zusammengefügten Dateien
eingebunden werden
VORGEHEN
• Reihenfolge muss immer noch händisch gewährleistet werden
• Aber: Nutzer muss weniger Dateien laden
DATEISTRUKTUR – (AUTOM.) ZUSAMMENFÜGEN
WAS SPRICHT DAGEGEN?
js/
+- app/
| +- 10_helpers.js
| +- 20_slider.js
| +- 99_index.js
+- lib/
+- 01_01_base-lib.js
+- 02_01_jquery.js
+- 02_02_jquery.plugin.js
...
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
...
EinbindungimHTML
Dateistruktur

14. • Dateien werden als Module/Pakete aufgebaut und verwendet
• Benötigte Module werden in der jeweiligen Datei importiert
• Module werden beim Bauen als Abhängigkeiten aufgelöst und in eine
Datei geschrieben
• Nur die resultierende, gebündelte Datei muss eingebunden werden
VORGEHEN
• Abhängigkeiten werden in Dateien selbst aufgeführt und –gelistet
• Nur Abhängigkeiten, die tatsächlich verwendet/benötigt werden,
landen in der Datei
• Der Nutzer muss nur eine Datei herunterladen
DATEISTRUKTUR – MODULARER AUFBAU (MIT BROWSERIFY)
WAS IST GUT DARAN?
import $ from 'jquery';
import slider from './helpers/slider';
slider.init($('.slider-element'));
+- js/
| +- helpers/
| | +- common.js
| | +- slider.js
| +- index.js
+- node_modules/
+- jquery/
...
<script src="js/bundle.js"></script>
...
Dateistruktur
EinbindungimHTMLEinbindungimSkript

15. • Dateien werden als Module aufgebaut und verwendet
• Benötigte Module werden in der jeweiligen Datei importiert
• Module werden beim Bauen als Abhängigkeiten aufgelöst und in eine
Datei geschrieben
• Nur die resultierende, gebündelte Datei muss eingebunden werden
VORGEHEN
• Abhängigkeiten werden in Dateien selbst aufgeführt und –gelistet
• Nur Abhängigkeiten, die tatsächlich verwendet/benötigt werden,
landen in der Datei
• Der Nutzer muss nur eine Datei herunterladen
DATEISTRUKTUR – MODULARER AUFBAU (MIT SASS)
WAS IST GUT DARAN?
Dateistruktur
EinbindungimHTMLEinbindungimSCSS
@import "common";
@import "slider";
...
<link rel="stylesheet" href="css/index.css">
...
scss/
+- _common.scss
+- _slider.scss
+- index.scss

16. CSS im Wandel
ENTWICKLUNG DES
WORKFLOWS

17. • CSS-Präprozessor: Stylesheet-Sprache, welche CSS erzeugt
• Bietet nützliche Funktionalitäten ergänzend zum „normalen“ CSS
• Funktionen für unterschiedliche Datentypen
• Erstellen eigener Funktionen zur häufigen Verwendung
• Schachtelung von Selektoren
• Ermöglicht Importieren von Dateien
• CSS-Postprozessor: verarbeitet CSS-Datei
• Inspiziert Code und legt Browser-Prefixes an
• Angabe, welche Browser berücksichtigt werden können, Autoprefixer
gleicht dann Notwendigkeit mit caniuse.com ab
SASS & AUTOPREFIXER
SASS AUTOPREFIXER
Logos: © Sass; © Autoprefixer

18. • Der gleiche Wert wird an mehreren Stellen im CSS verwendet
• Bei einer Änderung des Wertes muss der gesamte Code geprüft
werden, um alle Werte auszutauschen
• CSS unterstützt (derzeit) standardmäßig keine Variablen
PROBLEMATIK
• Variablen können einfach deklariert und verwendet werden
• Verwendung von speziellen Funktionen für unterschiedliche
Datentypen möglich
• Wert muss nur an einer Stelle geändert werden und es ist
sichergestellt, dass alle zusammenhängenden Werte aktualisiert
werden
SASS – VARIABLEN
LÖSUNG MIT SASS
CSS
SCSS
$main-color: #000;
body {
color: $main-color;
}
.with-border {
border: 1px solid $main-color;
}
.with-border-inverted {
border: 1px solid invert($main-color);
}
body {
color: #000;
}
.with-border {
border: 1px solid #000;
}
.with-border-inverted {
border: 1px solid #fff;
}

19. • Deklarierung zusammengehöriger oder hierarchischer Selektoren
kann leicht unübersichtlich werden
PROBLEMATIK
• Selektoren können geschachtelt werden
• Somit sind zusammengehörige Angaben leichter erkennbar
SASS – NESTING
LÖSUNG MIT SASS
CSS
SCSS
a {
color: red;
&:hover {
color: green;
}
.highlight {
color: yellow;
}
}
a {
color: red;
}
a:hover {
color: green;
}
a .highlight {
color: yellow;
}

20. • Nutzung einiger Features erfordert Verwendung von Prefixes
• Browser implementieren Features unterschiedlich schnell
(siehe http://caniuse.com/)
• Befehle mit Prefixes sind unangenehm zu merken
• Verschlechtern die Lesbarkeit des Codes
PROBLEMATIK
• Autoprefixer inspiziert den Code und legt Prefixes an, sofern sie für
die gewünschten Browser notwendig sind
• Nur Haupt-Anweisung muss angegeben werden
• Man muss sich nur die eigentlichen Befehle und ihre Syntax merken
und nicht auch noch browserspezifische Feinheiten
AUTOPREFIXER
LÖSUNG MIT AUTOPREFIXER
SCSS(ohneAutoprefixer)
SCSS(mitAutoprefixer)
.transformer {
transition: transform 600ms ease;
transform: translateX(0);
&:hover {
transform: translateX(-50%);
}
}
.transformer {
-webkit-transition: -webkit-transform 600ms ease;
transition: -webkit-transform 600ms ease;
transition: transform 600ms ease;
transition: transform 600ms ease,-webkit-transform
600ms ease;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
&:hover {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}

21. JS im Wandel
ENTWICKLUNG DES
WORKFLOWS

22. • Erlaubt das Importieren von Modulen für die Verwendung im
Browser
• Analysiert die importierten Module und bündelt sie in einer einzigen
Datei
• Javascript-Compiler
• Verwendung des neuen Sprachstandards ES6 im Browser noch nicht
oder nur teilweise möglich
• Kompilierung von ES6-JS in ES5-JS zur Verwendung in allen
Browsern
BROWSERIFY & BABEL
BROWSERIFY BABEL
Logos: © browserfy; © Babel

23. • Das Skript ist davon abhängig und verlässt sich darauf, dass die
entsprechenden Module vorhanden sind (richtige
Einbindungsreihenfolge, ...)
PROBLEMATIK
• Jede Datei importiert explizit die benötigten Abhängigkeiten
• Die importierten Module werden nicht global gespeichert sondern
nur in einer lokalen Variable
• Browserify kapselt außerdem die eigenen Skripte in Funktionen
JS – MODULVERWENDUNG MIT BROWSERIFY
LÖSUNG MIT BROWSERIFY
JS(IIFE)
(function ($) {
var doThings = function ($element) { ... };
doThings($('.my-selector'));
})(jQuery);
JS(einfach)
JS(mitImportsderModule)
import $ from 'jquery';
var doThings = function ($element) { ... };
// noch weiter modularisiert
// import doThings from './doThings';
doThings($('.my-selector'));
var doThings = function ($element) { ... };
doThings($('.my-selector'));

24. • Neue JS-Features sind nützlich, können aber im Produktionsbetrieb
(bedingt durch die derzeitige Browserunterstützung) noch nicht
verwendet werden
• Praktische Features sind zum Beispiel: Arrow Functions, Default
Parameters, neue Variablen-Typen, ...
PROBLEMATIK
• Verwendung von JS-Compiler Babel
• Kompiliert (ES6)-JS in (ES5)-JS
• Somit lassen sich die Features verwenden und es ist dennoch
sichergestellt, dass diese in allen (modernen) Browsern
funktionieren
JS – ES6 MIT BABEL
LÖSUNG MIT BABEL
JS(einfach)
JS(ES6)
const multiply = (multiplier, multiplicand = 1) =>
multiplier * multiplicand;
let value = multiply(42) + multiply(13, 7);
console.log(value);
var multiply = function (multiplier, multiplicand) {
if (typeof multiplicand === 'undefined') {
multiplicand = 1;
}
return multiplier * multiplicand;
};
var value = multiply(42) + multiply(13, 7);
console.log(value);

25. Build-Systeme im Wandel
ENTWICKLUNG DES
WORKFLOWS

26. • Basiert auf Node (also Javascript)
• Programmatischer Ansatz
• Zahlreiche Plugins (und allgemeine Node-Pakete) stehen zur
Verfügung
WAS IST DAS?
GULP
ü Eine einzelne Aufgabe geht von einer (oder mehreren)
Quelldateien aus
ü Diese wird dann durch mehrere Schritte bearbeitet und
transformiert
ü Am Ende wird die Datei in den Zielordner geschrieben
ABLAUF
Logo: © Gulp

27. • Kommandozeilen-Syntax ist je nach Tool (teilweise) unterschiedlich
• Manche Tools haben keine Kommandzeilen-Integration
• Tools können plattformspezifisch unterschiedlich funktionieren
• Durch zunehmende Build-Schritte sind einzelne Aufrufe umständlich
(Kapselung in Makefile oder npm-Skript)
PROBLEMATIK
• (einfacher) Ablauf der Schritte durch Streams und Pipes
• Nutzung von Gulp-Plugins
GULP – BUILD VON SASS MIT AUTOPREFIXER
LÖSUNG MIT GULP
Gulpfile
# npm install gulp gulp-sass gulp-autoprefixer
gulp css
Kommandozeilenaufruf
Aufruf
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('css', function () {
return gulp.src('scss/index.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest(‘./'));
});
# npm install --global node-sass
node-sass scss/index.scss sass.css
# npm install --global postcss-cli autoprefixer
postcss --use autoprefixer -o index.css sass.css
rm sass.css

28. • Kommandozeilen-Syntax ist je nach Tool (teilweise) unterschiedlich
• Manche Tools haben keine Kommandzeilen-Integration
• Tools können plattformspezifisch unterschiedlich funktionieren
• Durch zunehmende Build-Schritte sind einzelne Aufrufe umständlich
(Kapselung in Makefile oder npm-Skript)
PROBLEMATIK
• (einfacher) Ablauf der Schritte durch Streams und Pipes
• Nutzung von Node-Paketen
GULP – BUILD VON JS MIT BROWSERIFY UND BABEL
LÖSUNG MIT GULP
# npm install gulp browserify babelify babel-preset-es2015
gulp js
Gulpfile
Kommandozeilenaufruf
Aufruf
# npm install --global browserify
# npm install --global babelify
# npm install --global babel-preset-es2015
browserify src/index.js -o index.js -t
[ babelify --presets [ es2015 ] ]
const gulp = require('gulp');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
gulp.task('js', function () {
return browserify('js/index.js')
.transform(babelify, {presets: ['es2015‘]})
.bundle()
.pipe(source('index.js'))
.pipe(gulp.dest('../webapp/js'));
});

29. FRAGEN UND DISKUSSION

30. PLUSPOL INTERACTIVE
NICE TO MEET YOU

31. I0II0I0
0I000II
II0I0I00
MIT EINER VISION GEGRÜNDET
2002
100%DIGITALE AGENTUR
CLEVERE KÖPFE
38

32. Wir helfen mit unseren digitalen Lösungen Neukunden schneller zu gewinnen
und Bestandskunden stärker zu binden.
UNSERE PRODUKTE
WEBSITE BLOG KONFIGURATOR APPSGEWINNSPIEL
1 0 1 1
0 0 1 0
0 0 1 1
BANNER NEWSLETTER
BERATUNG /
WORKSHOPS
ONLINE
ADVENTSKALENDER
SEO/SEM

33. ARBEITEN BEI PLUSPOL

34. Platzhalter für vollflächigen Produkt-Screenshot (farbig)
• kein Unterschied zwischen festen
Mitarbeitern und Praktikanten
• Einarbeitungspläne, Take-a-seat in
versch. Abteilungen, Mentoring,
regelmäßige Feedback-Gespräche,
tägliche Standups
• Open Door Policy
• hoher Wert auf Mitarbeiter-Entwicklung
• Fachliteratur und Tutorials
• interdisziplinärer Austausch
(z.B. Stammtische, Workshops, User
Groups)
• Code-Reviews
• ständig verfügbarer Support durch
Kollegen
ARBEITEN BEI PLUSPOL
GEMEINSAM ENTWICKELNVON ANFANG AN GUT BETREUT
• komfortable, moderne Arbeitsplätze
• Incentives wie Getränke, Obst,
Massagen, Sport etc.
-> mehr auf kununu
MIT FREUDE ZUR ARBEIT
ARBEITEN BEI PLUSPOL

35. PLUSPOL ALS ARBEITGEBER
Platz 2 im kununu Arbeitgeber-Ranking der Multimediabranche in
Deutschland 2015:
„Nicht nur digitale Kommunikation liegt in den Stärken der Firma PLUSPOL
interactive, sondern auch die Kommunikation mit den Mitarbeitern.“
„So könnte ich mir das Arbeiten nach dem Studium durchaus vorstellen!“
„Ein großartiges, junges, dynamisches und kreatives Team.“
„Es macht ehrlich gesagt einfach nur Spaß, hier zu arbeiten.“

36. WIR FREUEN UNS DARAUF,
DICH KENNENZULERNEN!

37. Frontend Development ab Oktober 2016
AKTUELLE PRAKTIKA
BEWIRB DICH JETZT!
NICOLE ARNOLD
Personalreferentin
PLUSPOL interactive GbR
Floßplatz 4
04107 Leipzig
LetMeWork@pluspol-interactive.de