Downloaden Sie, um offline zu lesen
![• 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'));
});](https://image.slidesharecdn.com/vortragwebentwicklung-160810080337/85/Moderner-Webentwicklungs-Workflow-28-320.jpg)
Hochgeladen vonPLUSPOL interactive GbR
Moderner Webentwicklungs-Workflow
Florian Klos stellt seinen Werdegang und den modernen Workflow in der Webentwicklung vor, den er bei Pluspol Interactive erlernt hat. Besonders hebt er ein Projekt für s.Oliver hervor, welches ein mehrphasiges Wettbewerbssystem mit einem umfangreichen Backend und Frontend auf Basis neuer Technologien wie Laravel, AngularJS und Gulp umfasst. Außerdem erläutert er die Evolution von Webanwendungen, insbesondere den Übergang zu modularer Programmierung mit Tools wie Browserify und Babel sowie die Verwendung von CSS-Präprozessoren wie Sass.
Moderner Webentwicklungs-Workflow
- 1.
- 2.
- 3. FLORIAN KLOS WER ICHBIN Developer PLUSPOL interactive GbR Floßplatz 4 04107 Leipzig klos@pluspol-interactive.de
- 4. Leidenschaft für Webentwicklung, daher Studiumder 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.OliverModel Star AKTUELLER WORKFLOW
- 6. • (Model-)Wettbewerb vons.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 Basisvon 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ürdie 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 ENTWICKLUNGDES 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 ENTWICKLUNGDES 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 desZusammenfü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 werdenals 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 werdenals 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 ENTWICKLUNGDES 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 gleicheWert 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örigeroder 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 einigerFeatures 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 ENTWICKLUNGDES WORKFLOWS
- 22. • Erlaubt dasImportieren 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 Skriptist 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-Featuressind 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 ENTWICKLUNGDES WORKFLOWS
- 26. • Basiert aufNode (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 istje 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 istje 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.
- 30. PLUSPOL INTERACTIVE NICE TOMEET YOU
- 31. I0II0I0 0I000II II0I0I00 MIT EINER VISIONGEGRÜNDET 2002 100%DIGITALE AGENTUR CLEVERE KÖPFE 38
- 32. Wir helfen mitunseren 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.
- 34. Platzhalter für vollflächigenProdukt-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 Platz2 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 UNSDARAUF, DICH KENNENZULERNEN!
- 37. Frontend Development abOktober 2016 AKTUELLE PRAKTIKA BEWIRB DICH JETZT! NICOLE ARNOLD Personalreferentin PLUSPOL interactive GbR Floßplatz 4 04107 Leipzig LetMeWork@pluspol-interactive.de