Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Thilo Volprich - Team Technology GmbH
SNOUG 2018 Vue.JS – Quickstart für Notes Entwickler Thilo Volprich - Team Technology GmbH April 2018
2
Web-Entwicklung 2018 „ Die Web-Entwicklung hat sich in den letzten 10 Jahren komplett neu erfunden.
3
Start: IBM Domino Web-Entwicklung
Mein Erfahrungsschatz…
4
Ziel: Moderne Web-Entwicklung
Und dann die harte Realität…
5
Meine Gedanken Und diese sind schön geschönt
Wie soll ich mich bei den vielen Möglichkeiten entscheiden? Frontend Warum gibt es so viele Tools und was machen diese? Entwicklung Was habe ich die letzten Jahre eigentlich gemacht? Persönliche Feststellung Oh mein Gott. Das wird ein harter Weg! Motivation
6
„ Entscheidungsfindung Get your hands dirty…
Welches Framework als Basis „ Get your hands dirty…
7
Die großen Player Mein Eindruck… Angular React Vue.JS
Die erste Version hat eine sehr schöne Syntax Man muß die vielen Konzepte dahinter verstehen Die Anwendung wird plötzlich langsam Und mit einem mal ist alles anders – Neue Version Angular Nicht so kompliziert wie Angular 2+ Kann aber auch nicht so viel Konzentriert sich auf die Darstellung Ist viel schneller als Angular, da Virtual Dom Die Syntax ist nicht so einfach React Die Syntax kenne ich! Sieht aus wie Angular 1, nur mit „V“ Ist gefühlt noch etwas schneller Und die Dokumentation ist super leicht verständlich Und ich finde mich als Notes-Entwickler wesentlich schneller zurecht Also los geht’s! Objektiver Vergleich unter: Vue.JS
8
Was ist Vue.JS Vue.JS Was es ist Was es nicht ist
Ausgewählt Hintergründe Eine JavaScript Bibliothek um Web Anwendungen zu erstellen Erstellt von Evan You Bietet viele Funktionen der anderen Frameworks Kann beliebig um Funktionalität erweitert werden (Module) Kann auch nur in bestimmten Teilen einer Webseite genutzt werden Unfassbar schnell und sehr gut dokumentiert Es macht glücklich! Was es ist Vue.JS Technisch ist es kein Framework Hat nicht den Funktionsumfang von Angular Von keiner großen Firma im Hintergrund unterstützt Was es nicht ist
9
Vue.JS In einem Satz oder zwei „ Vue bietet “Direktiven” an, die bestehende HTML Tags erweitern. Insbesondere die Möglichkeit der dynamischen Datenbindung
10
Ein kurzes Beispiel Wir kommen später darauf zurück <html>
<body> <div id="app"> <input type="text" id="input" v-model="message"> <p>The value of the input is: {{message}}</p> </div> <script src=" <script> new Vue({ el: '#app', data: { message: 'Hallo Welt!' } }) </script> <style type="text/css"> body, span, input { font-family: sans-serif; color:#003399;} </style> </body> </html>
11
Direktiven v-model v-bind v-html v-text
Die wichtigsten Elemente in Vue Bindet einen Wert an ein Vue Daten Property. Kann auch über {{einProperty}} geschrieben werden. v-model Bindet einen HTML Attribut an ein Vue Daten Property z.B. class, style, title, alt, src, href v-bind Fügt Vue Daten Property vom Typ HTML ein. Vergleichbar mit „Inner HTML“ v-html Fügt Vue Daten Property vom Typ Text ein. v-text
12
Direktiven v-if & v-else v-for v-on:<event>
Die wichtigsten Elemente in Vue Sichtbarkeit von Elementen in Abhängigkeit einer Bedingung. Vergleichbar mit HideWhen-Formeln in Notes. v-if & v-else Schleife über ein Array von Elementen. Das Array kann hierbei selbst Objekte enthalten und es ist möglich auf jeden Wert der Objekte zuzugreifen. v-for Bindet einen Event an ein Element und stellt die Verbindung zu JavaScript her. v-on:<event>
13
Webkomponenten Dateien mit einer .vue Endung Inhalt
Besteht aus drei Bereichen innerhalb einer Datei: HTML Script CSS Inhalt Daten werden über sogenannte Props von dem Elternelement an das Kind übergeben. Datenübergabe in Webkomponenten hinein Daten werden über Events aus der Komponenten und einem Listener im Elternelement übergeben. Datenübergabe aus der Webkomponenten hinaus
14
Wie starte ich mit der Entwicklung
Was wird benötigt Entwicklungsumgebung Node.js NPM VUE CLI und Dev Server Webpack Allow-Control-Allow-Origin Mindestens Axios Vuex Chrome Dev Tool Plugin Optional (sehr hilfreich)
15
Entwicklungsumgebung
Freie Auswahl Visual Studio Code Hersteller: Microsoft Mit Vue Syntax Highlight Plugin Download unter: Plugin unter: Meine Wahl Sublime Text Atom Notepad++ … immer prüfen, ob Syntax Highlight Plugin verfügbar ist Alternativen
16
Node.js und NPM Elementare Werkzeuge Hintergrund Alternativen
Ohne Node.JS ist eine Entwicklung mit Vue.js nicht sinnvoll möglich Node.JS stellt während der Entwicklung einen Server zur Verfügung NPM (Package Manager) wird automatisch mit installiert NPM nimmt sehr viele Aufgaben ab bei der Entwicklung Download unter: Hintergrund keine Alternativen
17
Vue Cli & Web Server Grundgerüst per Kommando Hintergrund
Kommandozeilen-Tool zur Erstellung von Projekten Erstellt ein Grundgerüst einer Vue.JS SPA Anwendung Integriert automatisch Webpack & DevServer! Inklusive hot reload! Download: jetzt nicht mehr, wir haben NPM Kommando: npm install –g vue-cli Hintergrund
18
Vue Cli & Web Server Eine erste App erstellen
Kommando: vue init webpack meine_app_v1 Erzeugt ein Unterverzeichnis mit namen meine_app_v1 Kommando: cd meine_app_v1 Wechselt in das Verzeichnis meine_app_v1 Kommando: npm install Installiert alle relevanten Module in das Unterverzeichnis „Node_Modules“ Zum Beispiel auch „\Vue\“ Erstellung eines Projekt Grundgerüsts
19
Vue Cli & Web Server Die erste App starten und entwickeln
Kommando npm run dev Startet einen DEV-Server im Hintergrund Ziel ist das aktuelle Verzeichnis (Projekt) Startet automatisch den Browser, wenn er fertig ist Bei Änderungen an einer beliebigen Datei wird dies sofort im Browser dargestellt Entwicklung im Projekt
20
Webpack Die erste App publizieren Hintergrund
Webpack ist ein Werkzeug zum Bündel von Modulen Es nimmt die relevanten Dateien eines Projektes, findet die Abhängigkeiten heraus und bündelt alles zusammen in statische Dateien Diese statischen Dateien sind einsatzbereit für ein Deployment Vue-Loader ist eine Ergänzung um Vue-Dateien in JS-Dateien zu konvertieren Kommando: npm run build Ergebnis wird im Verzeichnis \dist\static\ erzeugt Hintergrund
21
Domino Backend Wo kommen die Daten her Hintergrund
Jedes modern Web-Entwicklungstool arbeitet mit Daten im JSON-Format Dieses muss von Domino bereit gestellt werden In Vue werden die Daten über eine REST API abgerufen Meine Empfehlung Axios Kommando: npm install axios --save Hintergrund Web-Service Provider xPage mit Ext Lib REST Services control Smart.nsf Agenten Alternativen
22
Domino Entwickler-Tips
Wie nutze ich die Daten in Domino In der ACL Anonymous öffnen In einem Agenten „Run in the name of“ Agenten mit erster Zeile „“ um JSON für den Browser auszugeben Einfaches Übertragen der Dateien Aus dem Dist-Verzeichnis die Index als Resource nach Notes übertragen Dann Wechsel der Ansicht in Notes auf Package Explorer WebContent Ordner suchen und alles einfügen Hier kann je nach Version Drag & Drop oder Copy & Paste genutzt werden Je nach Einstellung müssen noch HREF= und SRC= angepasst werden Hintergrund
23
Blick in den Code Live
24
Fragen???
25
Sprecher Weitere Infos unter: Ihre persönlicher Ansprechpartner
Informationen & Ansprechpartner Weitere Infos unter: Ihre persönlicher Ansprechpartner Thilo Volprich Geschäftsführer Team Technology Telefon:
Ähnliche Präsentationen
