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
86
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
410
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
110
Security is not a feature!
ianaya89
1
310
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
86
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
240
Vue.js, PWA & The Subway Dilemma
ianaya89
0
140
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
96
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
73
Other Decks in Programming
See All in Programming
Apache Hive 4 on Treasure Data
ryukobayashi
1
440
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
690
Java 22 Overview
kishida
1
200
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Milestoner
bkuhlmann
1
420
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
910
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
440
雑に思考を整理する技術と効能
konifar
64
30k
Git Lint
bkuhlmann
4
760
Next.js App Router
quramy
12
1.9k
Featured
See All Featured
The Mythical Team-Month
searls
217
42k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
BBQ
matthewcrist
80
8.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Statistics for Hackers
jakevdp
790
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Infographics Made Easy
chrislema
238
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
6
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