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
900
Other Decks in Programming
See All in Programming
童醫院敏捷轉型的實踐經驗
cclai999
0
210
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
技術同人誌をMCP Serverにしてみた
74th
1
630
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
GraphRAGの仕組みまるわかり
tosuri13
8
530
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
210
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Writing Fast Ruby
sferik
628
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Unsuck your backbone
ammeep
671
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Fireside Chat
paigeccino
37
3.5k
Speed Design
sergeychernyshev
32
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Facilitating Awesome Meetings
lara
54
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
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