Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
💉 Frontend on Steroids - With Vue.js
Search
Jakub
June 28, 2017
Programming
0
570
💉 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
Testing vuex
apertureless
1
900
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
Create a website using Spatial Web
akkeylab
0
300
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
NPOでのDevinの活用
codeforeveryone
0
190
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
Gleamという選択肢
comamoca
6
760
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
CursorはMCPを使った方が良いぞ
taigakono
1
170
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
380
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rails Girls Zürich Keynote
gr2m
94
14k
Visualization
eitanlees
146
16k
Writing Fast Ruby
sferik
628
61k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Agile that works and the tools we love
rasmusluckow
329
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Why Our Code Smells
bkeepers
PRO
337
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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
[email protected]
39