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
470
💉 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
800
Other Decks in Programming
See All in Programming
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
【Go言語】ジェネリクス
tomo1227
0
170
Trial
cairolibrary720
1
130
Product Management LT会_クアンド新家
shinshin
0
210
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
CSC307 Lecture 10
javiergs
PRO
0
310
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Introduction to GitOps
hwchiu
0
110
AHC035解説
terryu16
0
710
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
A designer walks into a library…
pauljervisheath
201
24k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
A better future with KSS
kneath
231
17k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
What's in a price? How to price your products and services
michaelherold
239
11k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Web Components: a chance to create the future
zenorocha
307
41k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
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