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
430
๐ 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
770
Other Decks in Programming
See All in Programming
ๆฐๅฎฟใใณใธใงใณใๅฏ่ฆๅใใฆใฟใ
satoshi7190
3
420
Git Lint
bkuhlmann
4
770
SIMD Parallel Programming with the Vector API
josepaumard
0
240
่ฆใ็ฎใใๅงใใ็็ฃๆงๅไธ
ikumatadokoro
10
1.5k
Criando a Woovi em uma semana
daniloab
0
100
ๆค่จผใๅ ผใญใฆๅไบบ้็บใงHonoใจใใจๅใๅใฃใ่ฉฑ
hanetsuki
1
1.4k
ใฏใฆใชใซใใใ CSS Modulesใๅใณ CSS Modules ใซ่ถณใใชใใใฎ / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
1k
PHPใฏใใคใใๆญปใใงใใใใฎ่ชฟๆป
chiroruxx
2
430
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
0
340
Elm Form Validation
bkuhlmann
0
520
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Mythical Team-Month
searls
217
42k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Embracing the Ebb and Flow
colly
80
4.2k
Practical Orchestrator
shlominoach
183
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Debugging Ruby Performance
tmm1
70
11k
Being A Developer After 40
akosma
67
580k
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