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
350
💉 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
680
Other Decks in Programming
See All in Programming
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.2k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
300
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
200
Prácticas de Seguridad en Kubernetes
pablokbs
0
100
Form実装基本を学び直してみた
hyugatsukui
0
230
低レイヤーから始める GUI
fadis
18
9.2k
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
140
和暦を正しく扱うための暦の話
nagise
10
4.7k
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
130
Workshop on Jetpack compose
aldefy
0
140
T3 Stack and TypeScript ecosystem
quramy
3
680
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
850
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
320
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
How GitHub (no longer) Works
holman
298
140k
It's Worth the Effort
3n
177
26k
Documentation Writing (for coders)
carmenintech
51
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Writing Fast Ruby
sferik
613
58k
The Cult of Friendly URLs
andyhume
68
5.1k
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