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
590
💉 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
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
500
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
CSC305 Lecture 04
javiergs
PRO
0
260
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Software Architecture
hschwentner
6
2.3k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
CSC305 Lecture 06
javiergs
PRO
0
220
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
110
dynamic!
moro
10
7.3k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
120
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
990
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for humans not robots
tammielis
254
26k
A Tale of Four Properties
chriscoyier
160
23k
Thoughts on Productivity
jonyablonski
70
4.9k
Scaling GitHub
holman
463
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Documentation Writing (for coders)
carmenintech
75
5k
The Invisible Side of Design
smashingmag
301
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
The Pragmatic Product Professional
lauravandoore
36
6.9k
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