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
94
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
500
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
140
Security is not a feature!
ianaya89
1
360
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
130
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
290
Vue.js, PWA & The Subway Dilemma
ianaya89
0
200
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
140
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
120
Other Decks in Programming
See All in Programming
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
830
Pythonに漸進的に型をつける
nealle
1
100
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
100
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.3k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
340
品質ワークショップをやってみた
nealle
0
590
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Cursorハンズオン実践!
eltociear
2
1.2k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Pragmatic Product Professional
lauravandoore
36
7k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What's in a price? How to price your products and services
michaelherold
246
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Making Projects Easy
brettharned
120
6.4k
For a Future-Friendly Web
brad_frost
180
10k
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