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
Breaking FrontEnd Paradigms with Vue.js
Search
Ignacio Anaya
September 29, 2017
Programming
0
89
Breaking FrontEnd Paradigms with Vue.js
Slides for my the talk Breaking FrontEnd Paradigms with Vue.js at Pixels Camp 2017
Ignacio Anaya
September 29, 2017
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
Security is not a feature‼️
ianaya89
2
470
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
340
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
110
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
270
Vue.js, PWA & The Subway Dilemma
ianaya89
0
170
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
120
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
98
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
220
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
Swift Testingのモチベを上げたい
stoticdev
2
150
SwiftUI Viewの責務分離
elmetal
PRO
2
280
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
自力でTTSモデルを作った話
zgock999
0
120
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Become a Pro
speakerdeck
PRO
26
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Visualization
eitanlees
146
15k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
KATA
mclloyd
29
14k
Transcript
Breaking FrontEnd Paradigms with Vue.js !" @ianaya89 Breaking the Binary
World with Vue.js ! " - @ianaya89 1
Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer &
Speaker > Ambassador @Auth0 > Organizer @Vuenos_Aires Breaking the Binary World with Vue.js ! " - @ianaya89 2
Breaking the Binary World with Vue.js ! " - @ianaya89
3
Breaking the Binary World with Vue.js ! " - @ianaya89
4
⬇ ~800K / month Breaking the Binary World with Vue.js
! " - @ianaya89 5
✨ ~ 68K Breaking the Binary World with Vue.js !
" - @ianaya89 6
!" ~ 250K Breaking the Binary World with Vue.js !
" - @ianaya89 7
! Companies Breaking the Binary World with Vue.js ! "
- @ianaya89 8
! Community Breaking the Binary World with Vue.js ! "
- @ianaya89 9
! Why Vue.js? Breaking the Binary World with Vue.js !
" - @ianaya89 10
! Complexity Inherent vs. Instrumental Breaking the Binary World with
Vue.js ! " - @ianaya89 11
! Inherent The Project Breaking the Binary World with Vue.js
! " - @ianaya89 12
! Instrumental The Price Breaking the Binary World with Vue.js
! " - @ianaya89 13
! " ! " Breaking the Binary World with Vue.js
! " - @ianaya89 14
! " ! " Breaking the Binary World with Vue.js
! " - @ianaya89 15
! The Progressive Framework • View focused • Core based
• VDOM • Reactive • Components Oriented Breaking the Binary World with Vue.js ! " - @ianaya89 16
Breaking the Binary World with Vue.js ! " - @ianaya89
17
! Declarative Rendering Breaking the Binary World with Vue.js !
" - @ianaya89 18
!" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>
new Vue({ el: '#app', data: function () { return { hello: 'Hello Lisbon !!' } } }); </script> Breaking the Binary World with Vue.js ! " - @ianaya89 19
!" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>
new Vue({ el: '#app', data: function () { return { hello: 'Hello Lisbon !!' } } }); </script> Breaking the Binary World with Vue.js ! " - @ianaya89 20
! render() new Vue({ el: '#app', data: function () {
return { hello: 'Hello Lisbon !!' } } render: function () { return ( <h1>{this.hello}</h1> ) } }) Breaking the Binary World with Vue.js ! " - @ianaya89 21
! Component System Breaking the Binary World with Vue.js !
" - @ianaya89 22
! Semantic <main> <top-bar></top-bar> <container> <login-form></login-form> </container> <annoying-banners></annoying-banners> <bottom-bar></bottom-bar> </main>
Breaking the Binary World with Vue.js ! " - @ianaya89 23
! .vue Breaking the Binary World with Vue.js ! "
- @ianaya89 24
♻ Life Cycle Hooks new Vue({ created: function () {
console.log('I am alive !') } }); Breaking the Binary World with Vue.js ! " - @ianaya89 25
☎ Communication • ⬇ Properties Down • ⬆ Events Up
Breaking the Binary World with Vue.js ! " - @ianaya89 26
! DX Breaking the Binary World with Vue.js ! "
- @ianaya89 27
! vue-cli Breaking the Binary World with Vue.js ! "
- @ianaya89 28
! Dev Tools Breaking the Binary World with Vue.js !
" - @ianaya89 29
! Breaking the Binary World with Vue.js ! " -
@ianaya89 30
! vue-router Single Page Applications Breaking the Binary World with
Vue.js ! " - @ianaya89 31
! vuex State Management (Flux) Breaking the Binary World with
Vue.js ! " - @ianaya89 32
! Native & Nuxt.js Server Side Rendering Breaking the Binary
World with Vue.js ! " - @ianaya89 33
! Native Script & Weex Mobile Native Rendering Breaking the
Binary World with Vue.js ! " - @ianaya89 34
! Take Away • ! Progressive (Simple & Complex) •
" Declarative Rendering • # Component System • $ Great Ecosystem • % Awesome Community Breaking the Binary World with Vue.js ! " - @ianaya89 35
Breaking the Binary World with Vue.js ! " - @ianaya89
36
Thanks! ! @ianaya89 Breaking the Binary World with Vue.js !
" - @ianaya89 37
⁉ Breaking the Binary World with Vue.js ! " -
@ianaya89 38