Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
๐ Frontend on Steroids - With Vue.js
Jakub
June 28, 2017
Programming
0
280
๐ Frontend on Steroids - Withย Vue.js
A brief introduction to Vue.js and how to incrementally enchant your UI.
Jakub
June 28, 2017
Tweet
Share
More Decks by Jakub
See All by Jakub
apertureless
1
600
Other Decks in Programming
See All in Programming
deepu105
1
190
bamboooo
1
110
borkdude
1
170
gtongy
0
450
timeseriesfr
0
110
shun_oshidari
6
2.9k
ickx
3
630
ajstarks
2
760
mathetake
7
2.2k
sgeengineer
1
190
joytomo
1
530
patorash
0
130
Featured
See All Featured
deanohume
294
28k
paulrobertlloyd
71
3.7k
bermonpainter
343
26k
smashingmag
232
18k
dotmariusz
94
5.5k
rasmusluckow
318
19k
jeffersonlam
330
15k
chriscoyier
683
180k
bkeepers
PRO
54
4.3k
brianwarren
82
4.8k
mongodb
23
3.9k
bryan
32
3.5k
Transcript
! Frontend on Steroids With Vue.js 1
Was ist Vue.js ? 2
A progressive, incrementally-adoptable JavaScript framework for building UI on the
web. 1 Github Beschreibung 3
Warum? 4
Vorteile 4 Sehr einfach zu erlernen 4 Starten ohne viel
Konfiguration 4 Flexibel einsetzbar 4 Modular 4 "Choice driven" 4 Klein & schnell (28.03kb min+gzip) 5
โก Quickstart 6
Auch ohne Build Pipeline einsetzbar: <script src="https://unpkg.com/vue"></script> Ansonsten yarn add
vue Besser yarn add -g vue-cli 7
2 Bestandteile 8
Script const app = new Vue({ el: '#app', data: {
message: 'Hello Vue!' } }) 9
Template: <div id="app"> {{ message }} </div> 10
Single File Components 11
Single File Components 4 Inspiriert von Web Components 4 *.vue
Endung 4 Template 4 Script 4 Styling 12
Hello.vue 13
! Vorteile 14
4 Kleine modulare Komponenten 4 Shareable 4 Saubere Kommunikation รผber
props und events 4 Testbar 15
! vue-cli 16
4 Scaffold fรผr Vue Projekte 4 Optionen fรผr 4 vue-router
4 eslint 4 Unit Tests mit karma 4 E2E Tests mit nightwatch 17
18
! Demo 19
Weitere Features 4 Methods 4 Computed properties 4 Filters 4
Mixins 4 Directives 4 Props 20
! Code Splitting 21
22
Integration In bestehende System 23
24
4 Weniger Code 4 Inkrementell erweiterbar 4 Kleine ersetzbare Komponenten1
1 https://about.gitlab.com/2016/10/20/why-we-chose-vue/ 25
Think Big 26
Groรe Projekte sind komplex 27
! State Management 28
vuex 29
Besteht aus 4 State 4 Mutations 4 Actions 4 Getters
4 Modules 30
! 31
JSX 32
33
! Render functions 34
35
redux typescript 36
Testing Jest Ava Karma 37
Community 38
! Fragen? @apertureless jakub@posteo.de 39