Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Moderner Webentwicklungs-Workflow

1,344 views

Published on

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.

Published in: Internet
  • Be the first to comment

Moderner Webentwicklungs-Workflow

  1. 1. MODERNER WEBENTWICKLUNGS- WORKFLOW
  2. 2. Florian Klos VORSTELLUNG
  3. 3. FLORIAN KLOS WER ICH BIN Developer PLUSPOL interactive GbR Floßplatz 4 04107 Leipzig klos@pluspol-interactive.de
  4. 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. 5. am Praxis-Beispiel s.Oliver Model Star AKTUELLER WORKFLOW
  6. 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. 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. 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. 9. Web im Wandel ENTWICKLUNG DES WORKFLOWS
  10. 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. 11. Dateistruktur im Wandel ENTWICKLUNG DES WORKFLOWS
  12. 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. 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. 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. 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. 16. CSS im Wandel ENTWICKLUNG DES WORKFLOWS
  17. 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. 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. 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. 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. 21. JS im Wandel ENTWICKLUNG DES WORKFLOWS
  22. 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. 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. 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. 25. Build-Systeme im Wandel ENTWICKLUNG DES WORKFLOWS
  26. 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. 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. 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. 29. FRAGEN UND DISKUSSION
  30. 30. PLUSPOL INTERACTIVE NICE TO MEET YOU
  31. 31. I0II0I0 0I000II II0I0I00 MIT EINER VISION GEGRÜNDET 2002 100%DIGITALE AGENTUR CLEVERE KÖPFE 38
  32. 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. 33. ARBEITEN BEI PLUSPOL
  34. 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. 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. 36. WIR FREUEN UNS DARAUF, DICH KENNENZULERNEN!
  37. 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

×