EINSTIEG IN DAS VUENIVERSE
Graphic by Freepik
Der Sprecher
Hendrik Lösch
Senior Consultant & Coach
Hendrik.Loesch@saxsys.de
@HerrLoesch
Hendrik-Loesch.de
Web Front-End Entwicklung heute
Adaptierbar
Eine Komponente
Mehrere
Komponenten
Eine SPA Eine PWA
Single Page Applications & Progressive Web
Applications
• Responsive
• „Unabhängig“ vom Back-End
• Status wird im Client gehalten
• Statuswechsel nicht für Nutzer spürbar
• Anbindung verschiedener entkoppelter Dienste
• Offlinefähigkeit & Nutzung von Hintergrunddiensten (PWA)
Ziele des Workshops
• Vue JS kennen lernen
• Vue JS nutzen können
• Einblick in das Ökosystem bekommen
• Vuetify
• Router
• Vuex
• Plugins
• Tests schreiben können
• Architektur
• SPA & PWA Grundlagen verstehen
• ES6 lernen
• CSS lernen
• Webpack verstehen
• npm verstehen
Szenario
Suche
Details
Statistik
App
Frame
Quellen
https://github.com/HerrLoesch/VueJS-Workshop
Ausgangssituation
Endergebnis mit allen Einzelschritten
als Commits
Back-End
http://eurolottodrawing.azurewebsites.net/api/drawings?id=2
http://eurolottodrawing.azurewebsites.net/api/drawings
Culture de-DE!!!
Bottom Up vs. Top Down
Bottom Up
Ausgehend vom Back-End werden
die Schichten von unten nach oben
aufgebaut
Testgetrieben
Top Down
Ausgehend von der UI wird bis zur
Kommunikationsschicht
gearbeitet.
Dadurch entstehen potentiell
weniger Tests.
✔️
VueJS
Allgemeine Informationen
Die Kontrahenten
Ursprünglicher Release 2010 2013 2014
Website angular.io reactjs.org vuejs.org
Lizenz MIT MIT MIT
Verwendet von Google, Microsoft Facebook, Uber Alibaba, Apple
Größe (komprimiert und verkleinert) 563kB 100kB 33,kB
https://madewithangular.com/
https://madewithreact.com/
https://madewithvuejs.com/
Organisationsform
• 20 Core Member
• ca. 210 000$ per Patreon pro Jahr
• ca. 102 000$ per OpenCollective pro Jahr
Stand Juni 2019
NPM Downloads
Beliebtheit
Quelle: https://star-history.t9t.io/#vuejs/vue&facebook/react&angular/angular
Github Dependencies
Zukunftsfähigkeit
• Unterstützung für alle ES5 compliant Browser.
• Einsatz neuster JavaScript Features.
Quelle: http://kangax.github.io/compat-table/es5/
Installation & Projekt Setup
Vue installieren
• npm installieren
• npm install -g vue
• npm install -g @vue/cli
Vue UI
Projekt anlegen
• vue create [porject name] -> Aufbau eines neuen Projekts mit
Template
WICHTIG!!!
Projekt anlegen
ProjektstrukturProjektstruktur
Component
Component
Component
Komponenten
Vue Instanz
View Component
Debugging aktivieren
Debugging aktivieren
Danach Webserver neu starten! (npm run serve)
Debugging im Browser
Vuetify
Vuetify
Material Design Spezifikation
mertial.io
Material Design Icons
materialdesignicons.com
Vuetify Plugin
• vue add vuetify
Vuetify
• <v-app> … </v-app> in App.vue template einfügen
Die erste Komponente
Aufbau einer Vue Datei
Müssen gleich sein
Komponenten referenzieren
Geschweifte Klammern!!!
Müssen gleich sein
Drawing Komponente
Daten einer Komponente
Verbreitete Schreibeweise
Lange Schreibeweise
Interpolation
Interpolation
Eigenes Datenmodel für die UI
Schleifen
Props in einfach
Binding (an props)
Kindkomponenten sollten die Props nicht verändern!!!
Bedingtes Rendering
Props in komplex
Die (responsive) Suche
Grundstruktur
Das Gridsystem von Vuetify
Bug
Kurzform des Bindings
Erweiterte Interpolation & styling
Padding (vuetify)
Title von vuetify
Suche per Button-Click – das Template
Event Binding
Two-Way Binding
Key binding
v-model
Ist das Gleiche wie
Suche per Button-Click – das Script
Template der Suche ohne Button
Suche als Methode
Funktioniert bestenfalls einmal, der
Rückgabewert wird gecacht!
Suche als „watcher“ Eigenschaft
Gleicher Name wie die zu überwachende Eigenschaft.
Suche als „computed“ Eigenschaft
Computed wird ausgeführt sobald die
referenzierten Eigenschaften sich ändern. Andernfalls
Wird der gecachte Wert verwendet.
Im Standardfall gibt es nur Getter,
man kann aber auch Setter anlegen.
Methods vs. Watchers vs. Computed
Properties
Props Methods Watchers Computed
Setter Nur von außen Ja Nein Ja
Getter Ja Ja Nein Ja
Caching Ja Ja Nein Ja
Wird
ausgelöst
durch
Setzen eines Wertes
der Komponente vom
Parent.
Call Wertänderung einer
Eigenschaft
Call & Wertänderung
an n Eigenschaften
Hauptzweck Werte an
Komponenten
übertragen
Funktionalität ausführen Funktionalität bei
Wertänderung
ausführen.
Werte abhängig von
anderen Werten
bereitstellen.
Kosten Gering Abhängig von der
Funktionalität
Hoch Mittel
Transitions
Transitions
Drawing Komponente stylen
Lifecycle Hooks & Datenabfrage
Lifecycle
Hooks
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
Backend abfragen mit Fetch und async/await
Daten konvertieren in internes Model
Unit Testing
https://vue-test-utils.vuejs.org/
Jest
Simpler Unit Test
Name der Property
der zu testenden
Komponente!
Möglicherweise tritt dieser Fehler auf:
Unit Test mit
Abhängigkeiten
Anfragen in Service
auslagern
Service in der Komponente konsumieren
Async Unit Test mit Mocks
• https://alexjover.com/blog/test-methods-and-mock-dependencies-in-
vue-js-with-jest/
VueJS Router
https://router.vuejs.org/
Drawing Details
Basistruktur
VueJS Router
• npm install vue-router --save
Neue Datei router.js anlegen
In main.js referenzieren
Route aufbauen
Navigation auslösen deklarativ
Navigation auslösen imperativ
Globale Variable
Replace geht auch
Dann hat man keine History
Parameter auslesen & Go Back
„route“ nicht „routeR“!!!
Ein Schritt zurück.
Service erweitern
Parameter einer Property zuweisen
Achtung: Die Ziehung muss natürlich
auch übergeben werden!
Query Parameter schreiben und auslesen
localhost:8080/#/drawingDetails/42
Query Parameter erlauben es zusätzliche Daten zu übergeben.
Navigation guards
Zentrale Datenhaltung mit Vuex
https://vuex.vuejs.org/
Services != Stores
Problem: Der Status ist überall verteilt oder muss
immer direkt in das Back-End übertragen werden.
Lösung: Man fasst den Status und all seine
Transformationen in einem eigenen Modul
zusammen.
Store – Vuex
npm install vuex --save
Vuex einbinden
Synchron
asynchron
Der Store
ausprogrammiert
Store anbinden – Laden anzeigen
drawingSearch.vue
Store anbinden – der lange weg
drawingSearch.vue
Store anbinden – der kurze Weg
drawingSearch.vue
Geschweifte Klammern!!!
Mixin
Getter Store
Drawing Details
Komplexe
Umgebungen
Siehe:https://github.com/HerrLoesch/vlingo-auth-ui/tree/master/src/store
Man sollte nicht zu viel in
die Stores packen….
Formulare & Events
Basisstruktur Detailansicht
Ladekreis anzeigen
wenn keine Daten gesetzt sind
mit Formular
mit Formular
Zugriff auf alle refs über
deren Namen.
Auslösen des
Saved Events
Ready for production
Build
Build
npm run build
Lieber al-a-carte components nutzen (vuetify)
Dev Tools
Workshop Vue js
Workshop Vue js

Workshop Vue js

Hinweis der Redaktion

  • #5 Wir konzentrieren uns vor allem auf VueJS!!!