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
460
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
330
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
97
Other Decks in Programming
See All in Programming
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
890
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
3
280
Datadog Workflow Automation で圧倒的価値提供
showwin
1
100
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
7
2.2k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
230
CI改善もDatadogとともに
taumu
0
180
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Designing for Performance
lara
604
68k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Speed Design
sergeychernyshev
27
800
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Gamification - CAS2011
davidbonilla
80
5.1k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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