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 the Binary World with Vue.js
Search
Ignacio Anaya
September 23, 2017
Programming
0
140
Breaking the Binary World with Vue.js
Ignacio Anaya
September 23, 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
Netty Chicago Java User Group 2024-04-17
sullis
0
210
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Fast JSX: Don't clone props object #28768
yossydev
1
190
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
400
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
420
Sheets API使ってみた
toshi0383
2
170
新宿ダンジョンを可視化してみた
satoshi7190
3
400
PHPはいつから死んでいるかの調査
chiroruxx
2
420
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
460
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
110
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Done Done
chrislema
178
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Applications with DynamoDB
mza
88
5.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Designing with Data
zakiwarfel
96
4.8k
Building Your Own Lightsaber
phodgson
100
5.7k
Building an army of robots
kneath
300
41k
The Mythical Team-Month
searls
217
42k
Transcript
Breaking the Binary World 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
⬇ ~780K / 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 Warsaw ! ! } } }); </script> Breaking the Binary World with Vue.js ! " - @ianaya89 19
! render() new Vue({ el: '#app', data() { return {
hello: 'Hello Warsaw ! !' } }, render(h) { return ( <h1>{this.hello}</h1> ) } }) Breaking the Binary World with Vue.js ! " - @ianaya89 20
! Component System Breaking the Binary World with Vue.js !
" - @ianaya89 21
! 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 22
! .vue Breaking the Binary World with Vue.js ! "
- @ianaya89 23
♻ Life Cycle Hooks new Vue({ created: function() { console.log('I
am alive !') } }); Breaking the Binary World with Vue.js ! " - @ianaya89 24
☎ Communication • ⬇ Properties Down • ⬆ Events Up
Breaking the Binary World with Vue.js ! " - @ianaya89 25
! DX Breaking the Binary World with Vue.js ! "
- @ianaya89 26
! vue-cli Breaking the Binary World with Vue.js ! "
- @ianaya89 27
! Dev Tools Breaking the Binary World with Vue.js !
" - @ianaya89 28
! Breaking the Binary World with Vue.js ! " -
@ianaya89 29
! vue-router Single Page Applications Breaking the Binary World with
Vue.js ! " - @ianaya89 30
! vuex State Management (Flux) Breaking the Binary World with
Vue.js ! " - @ianaya89 31
! Native & Nuxt.js Server Side Rendering Breaking the Binary
World with Vue.js ! " - @ianaya89 32
! Native Script & Weex Mobile Native Rendering Breaking the
Binary World with Vue.js ! " - @ianaya89 33
! Take Away • ! Progressive (Simple & Complex) •
" Declarative Rendering • # Component System • $ Great Ecosystem • % Awesome Community Breaking the Binary World with Vue.js ! " - @ianaya89 34
Breaking the Binary World with Vue.js ! " - @ianaya89
35
Thanks! ! @ianaya89 Breaking the Binary World with Vue.js !
" - @ianaya89 36