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
580
💉 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
910
Other Decks in Programming
See All in Programming
🔨 小さなビルドシステムを作る
momeemt
4
680
概念モデル→論理モデルで気をつけていること
sunnyone
2
210
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
1から理解するWeb Push
dora1998
7
1.9k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
私の後悔をAWS DMSで解決した話
hiramax
4
210
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
rage against annotate_predecessor
junk0612
0
170
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
280
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.7k
Code Reviewing Like a Champion
maltzj
525
40k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Language of Interfaces
destraynor
161
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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