View
29
Download
0
Category
Preview:
Citation preview
1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
www.oio.deinfo@oio.deVersion:
Vue.js – eine Einführung
1.0
Vue.js – eine Einführung© Orientation in Objects GmbH
Abstract
Im Schatten von Angular und React hat sich mit Vue.js ein weiteresJavaScript-Webframework als ernstzunehmende Alternative zurErstellung von modularen Single Page Applications entwickelt.
Der Einstieg ist dank des einfachen und minimalen Kerns einfach.Durch die hohe Anpassungsfähigkeit und das wenigerdogmenbehaftete Programmiermodell bietet es zudem vieleMöglichkeiten für die Erstellung flexibler und performanterWebanwendungen.
In diesem Vortrag werden wir am Beispiel eines Konferenzplanners dieKonzepte von Vue.js vorstellen.
2
2
Vue.js – eine Einführung© Orientation in Objects GmbH
Ihre Sprecher
Trainer, Berater, Entwickler
3
Falk Sippach (@sippsack)
ArchitekturAgile Softwareentwicklung
CodequalitätCo-Organisator
Commiter DukeCon
Vue.js – eine Einführung© Orientation in Objects GmbH 4
Yet another
JavaScript
framework?
3
Vue.js – eine Einführung© Orientation in Objects GmbH 5
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
Vue.js – eine Einführung© Orientation in Objects GmbH 6
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
4
Vue.js – eine Einführung© Orientation in Objects GmbH 7
https://programm.javaland.eu/2018
https://github.com/dukecon/dukecon_pwa
Vue.js – eine Einführung© Orientation in Objects GmbH 8
Vue.js
“ Vue (pronounced /vjuː/, like view)
is a progressive framework for
building user interfaces.
Quelle: https://vuejs.org/v2/guide/
5
Vue.js – eine Einführung© Orientation in Objects GmbH 9
Live Coding
Vue.js – eine Einführung© Orientation in Objects GmbH 10
Infos
Tools
Code
Komponenten
Ausblick
Agenda
Fazit
6
Vue.js – eine Einführung© Orientation in Objects GmbH 11
Key-Facts
# Version 2.x
# Lizenz: MIT
# Leichtgewichtiger Kern: 20+ KByte (min + gzip)
# keine Abhängigkeiten
Vue.js – eine Einführung© Orientation in Objects GmbH 12
Historie
# Gründer: Evan You (Ex-Google)
# Alternative zu Angular
"flexible and lightweight … quick UI prototyping"
# 2013 gestartet, erste Veröffentlichung 02/2014
7
Vue.js – eine Einführung© Orientation in Objects GmbH 13
Kernaspekte
# Schlank, anpassungsfähig, universell einsetzbar
# Progressiv
# Reaktives Data-Binding
# Deklarative Views
# Wiederverwendbare Komponenten
# Mixins, Router, Vuex, ...
Vue.js – eine Einführung© Orientation in Objects GmbH 14
Component
Component Component
Component Component Component Component
Component ComponentDiff
Virtual DOM DOM
Re-Render
Component
Component Component
Component Component Component Component
Component Component
Virtual DOM
8
Vue.js – eine Einführung© Orientation in Objects GmbH
15
MVVM
View ViewModel Model
var data = {message: "Hello"
}
new Vue({el: "#app",data: data
}
<div id="app">{{message}}
</div>
Vue.js – eine Einführung© Orientation in Objects GmbH 16
Vue Core
# View-, Input-, Event-Binding
# Bedingungen, Schleifen
# Templates, Komponenten
# Lebenszyklus-Methoden, Computed Properties
# Mixins
# Transitionen
9
Vue.js – eine Einführung© Orientation in Objects GmbH 17
Vue Zusätze
# Routing
# I18n
# Vuex (Flux/Redux Implementierung)
# TypeScript statt JavaScript
# JSX Templates statt HTML-Templates
# Server Side Rendering (SSR) mit Nuxt.js
Vue.js – eine Einführung© Orientation in Objects GmbH 18
Einsatzgebiete
# Modernisieren von Webanwendungen
# Rapid Prototyping
# Komplexe SPAs/PWAs (flexibel erweiterbar)
10
Vue.js – eine Einführung© Orientation in Objects GmbH 19
Einstieg und Hilfe
https://vuejs.org/v2/guide/
https://github.com/vuejs/awesome-vue
https://github.com/vuejs/awesome-vue#books
Vue.js – eine Einführung© Orientation in Objects GmbH 20
Tools
11
Vue.js – eine Einführung© Orientation in Objects GmbH 21
Werkzeuge (1)
# IDE-Plugins
IntelliJ, Visual Studio Code, ...
# Chrome-Plugin Vue DevTools
Vue.js – eine Einführung© Orientation in Objects GmbH 22
Werkzeuge (2)
# vue-cli
Webpack (Hot Reload, Linting, Testing, PWA)
Erweiterbar (Plugins), CLI oder UI
12
Vue.js – eine Einführung© Orientation in Objects GmbH 23
Installation
# HTML, <script>vue.min.js</script>
# vue-cli (Simple, Webpack, ...)
$ npm install -g vue
$ npm install -g @vue/cli
$ vue create my-project # oder
$ vue init webpack my-project
$ cd my-project && npm install && npm run dev
ODER
Vue.js – eine Einführung© Orientation in Objects GmbH 24
Code
13
Vue.js – eine Einführung© Orientation in Objects GmbH
25
Deklaratives Rendern
<div id=" app ">
{{ message }}
</div>
<script src ="js/ vue.js "></script>
<script >
var app = new Vue ({
el: '# app ',
data: {
message : 'Hello Vue!'
}
})
</script>
Vue.js – eine Einführung© Orientation in Objects GmbH
26
Input Binding
<div id="app">
<p>{{ message }}</p>
<p>
<input v-model =" message " />
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message : 'Hello Vue!'
}
})
Two-Way-Data Binding
14
Vue.js – eine Einführung© Orientation in Objects GmbH
27
Computed Properties
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<p>
<input v-model="message" />
</p>
</div>
var app = new Vue({
el: '#app',
data: {..},
computed: {
reversedMessage : function() {
return this.message…
}
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH 28
Lifecycle + Hooks
export default { beforeMount : function () { console . log ( 'before mount' , this ); }}
https://codingexplained.com/coding/front-end/vue-js/vue-instance-lifecycle-hooks
15
Vue.js – eine Einführung© Orientation in Objects GmbH
29
Bedingungen
<div id="app">
<p>{{ message }}</p>
<p v-if="message === ''" >
Please enter a message!
</p>
<p>
<input v-model=" message " />
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message : 'Hello Vue!'
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH
30
Event-Binding
<div id="app">
<p>{{ message }}</p>
<p>
<input v-model="message" />
</p>
<button v-on:click="reverse" >
Reverse Message
</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverse: function() {
this.message =
this.message
.split('').reverse().join('')
}
}
})
16
Vue.js – eine Einführung© Orientation in Objects GmbH
31
List Rendering
<ul id="app">
<li v-for="item in items" >
{{ item.message }}
</li>
</ul>
var app = new Vue({
el: '#app',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH
32
Style Bindings
<div class=" static "
v-bind:class="{
active: isActive ,
'text-danger': hasError
}">
</div>
<div class=" static active "></div>
data: {
isActive : true,
hasError : false
}
17
Vue.js – eine Einführung© Orientation in Objects GmbH
33
Syntactic Sugar: v-model
<div id="app">
<p>{{ msg }}</p>
<p>
<input v-model =" msg" />
</p>
</div>
<div id="app">
<p>{{ msg }}</p>
<p>
<input
v-bind:value="msg"
v-on:input=
"msg = $event.target.value" >
</p>
</div>
Two-Way-Data Binding
Vue.js – eine Einführung© Orientation in Objects GmbH
<div id="app">
<p>{{ msg }}</p>
<p>
<input
v-bind:value ="msg"
v-on:input ="msg = ...">
</p>
</div>
34
Kurzform v-bind/v-on
<div id="app">
<p>{{ msg }}</p>
<p>
<input
:value ="msg"
@input ="msg = ...">
</p>
</div>
v-bind:value
v-on:input
18
Vue.js – eine Einführung© Orientation in Objects GmbH 35
Komponenten
Vue.js – eine Einführung© Orientation in Objects GmbH 36
Quelle: https://vuejs.org/v2/guide/components.html
Komponenten
19
Vue.js – eine Einführung© Orientation in Objects GmbH 37
…
Vue.js – eine Einführung© Orientation in Objects GmbH 38
Einfache KomponenteVue.component('button-counter', {
data: function () {
return {
count: 0
}
} ,
template: `<button @click="count++">
{{ count }} mal angeklickt.
</button>`
})
<div id="components-demo">
<button-counter />
</div>
new Vue({
el: '#components-demo'
})
20
Vue.js – eine Einführung© Orientation in Objects GmbH 39
Komponenten-ReuseVue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: `<button @click="count++">
{{ count }} mal angeklickt.
</button>`
})
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
new Vue({
el: '#components-demo'
})
data: {count: 0
}
Vue.js – eine Einführung© Orientation in Objects GmbH 40
Komponenten-Parameter
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue" ></blog-post>
<blog-post title="Blogging with Vue" ></blog-post>
<blog-post title="Why Vue is so fun" ></blog-post>
21
Vue.js – eine Einführung© Orientation in Objects GmbH 41
Parent-Child<template >
<div class ="container" ><h2>Parent: {{ name}} </ h2><child name="Kind" />
</ div ></ template ><script >
import Child from "./Child.vue"export default {
name: "parent" ,data : function () {
return { name: "Eltern" };},components: { Child }
};</ script ><style lang ="scss" ></ style >
<template>
<div>
<h3>Child: {{name}}</h3>
</div>
</template>
<script>
export default {
name: "child",
props: {
name: String
},
};
</script>
<style lang="scss">
</style>
Vue.js – eine Einführung© Orientation in Objects GmbH 42
Slots
Vue.component('blog-post', {
props: ['title'],
template: `
<h3>{{ title }}</h3>
<slot></slot>
`
})
<blog-post title="My journey with Vue"> Inhalt 1 </blog-post>
<blog-post title="Blogging with Vue"> Inhalt 2 </blog-post>
<blog-post title="Why Vue is so fun"> Inhalt 3 </blog-post>
22
Vue.js – eine Einführung© Orientation in Objects GmbH 43
Single File Components
# Template, JavaScript und CSS
# Verwendung von Pre-Prozessoren:
Babel, TypeScript, Pug, SCSS,
Stylus, PostCSS
Vue.js – eine Einführung© Orientation in Objects GmbH 44
Ausblick
23
Vue.js – eine Einführung© Orientation in Objects GmbH 45
Testen
Jest
Vue Test Utils
Vue.js – eine Einführung© Orientation in Objects GmbH 46
"devDependencies": {"eslint-plugin-vue" : "^4.5.0“/* ... */
}
module. exports = {extends : [
'standard' ,'plugin:vue/essential'
],plugins : [
'vue']
}
Styleguide + ESLint
https://vuejs.org/v2/style-guide/ https://github.com/vuejs/eslint-plugin-vue
24
Vue.js – eine Einführung© Orientation in Objects GmbH 47
<div id ="app" > <p> <router-link to ="/" >Home</router-link> <router-link to ="/about" >About </router-link> </p> <router-view></router-view></div>
import Vue from 'vue' ;import VueRouter from 'vue-router' ;Vue. use ( VueRouter );
const Home = { template : '<div>Home</div>' }const About = { template : '<div>About</div>' }
const routes = [ { path : '/' , component : Home }, { path : '/about' , component : About }]
const router = new VueRouter ({ routes // short for `routes: routes`})
const app = new Vue ({ router}). $mount ( '#app' )
Routing
Vue.js – eine Einführung© Orientation in Objects GmbH 48
import axios from 'axios';
axios.get ('/user?ID=12345'). then (function (response) {
console.log(response);console.log(response.data);
}). catch (function (error) {
console.log(error);});
axios.post ('/user', {firstName: 'Fred',lastName: 'Flintstone'
}). then (function (response) {
console.log(response);}). catch (function (error) {
console.log(error);});
Remote-Zugriff (axios)
25
Vue.js – eine Einführung© Orientation in Objects GmbH 49
State Handling mit Vuex
https://github.com/vuejs/vuex
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
Vue.js – eine Einführung© Orientation in Objects GmbH 50
Vuex
const store = new Vuex.Store({state: {
count: 0},mutations: {
increment (state) {state.count++
}}
})
store.commit('increment')
console.log(store.state.count) // -> 1
26
Vue.js – eine Einführung© Orientation in Objects GmbH 51
Server Side Pre Render
https://nuxtjs.org/
Vue.js – eine Einführung© Orientation in Objects GmbH 52
Vue.js GUI Bibliotheken
https://vuetifyjs.com
27
Vue.js – eine Einführung© Orientation in Objects GmbH 53
Fazit
Vue.js – eine Einführung© Orientation in Objects GmbH 54
Leicht erlernbar
# standardisierte, wartbare Projektstruktur
# einfache Konzepte, leicht für Neueinsteiger
# viele Online-Ressourcen/Bücher
# Komponenten zum Strukturieren
28
Vue.js – eine Einführung© Orientation in Objects GmbH 55
Performant?
# gutes Tooling (Hot-Reload, Dev Tools)
# beeindruckende Performance Benchmarks
# kleine Größe, keine Abhängigkeiten
Vue.js – eine Einführung© Orientation in Objects GmbH
Vue.js vs. ...
Kriterien:
# Paketgröße
# Performance
# Erlernbarkeit
# Wartbarkeit
# https://vuejs.org/v2/guide/comparison.html
# https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d
29
Vue.js – eine Einführung© Orientation in Objects GmbH
Links
• Vue.js-Dokumentation– https://vuejs.org/v2/guide/
• Awesome Vue.js– https://github.com/vuejs/awesome-vue
• Vue.js: Zeitgemäße und wartbare JavaScript-Client-Anwendungen– https://www.heise.de/developer/artikel/Vue-js-Zeitgemaesse-und-wartbare-JavaScript-Client-
Anwendungen-4041158.html
• Vue.js im Enterprise-Umfeld– https://entwickler.de/entwickler-magazin/entwickler-magazin-4-18-579845105.html
57
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
www.oio.deinfo@oio.de
??
? ?
????
Fragen ?
30
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
www.oio.deinfo@oio.de
Vielen Dank für Ihre Aufmerksamkeit !
Recommended