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
January 12, 2018
Programming
0
130
Breaking FrontEnd Paradigms with Vue.js 🇺🇸
Ignacio Anaya
January 12, 2018
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
260
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
96
Other Decks in Programming
See All in Programming
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
ARA Ansible for the teams
kksat
0
150
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
CI改善もDatadogとともに
taumu
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
GitHub's CSS Performance
jonrohan
1030
460k
The Cult of Friendly URLs
andyhume
78
6.2k
Unsuck your backbone
ammeep
669
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Agile that works and the tools we love
rasmusluckow
328
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Git: the NoSQL Database
bkeepers
PRO
427
64k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
!" Breaking FrontEnd Paradigms with Vue.js @ianaya89 Breaking FrontEnd Paradigms
with with Vue.js ! " - @ianaya89 1
! Ignacio Anaya @ianaya89 • Full Stack Developer, Tech Trainer
& Speaker • Ambassador @Auth0 • Organizer @Vuenos_Aires Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 2
Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89
3
Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89
4
⬇ ~800K / month Breaking FrontEnd Paradigms with with Vue.js
! " - @ianaya89 5
✨ ~ 80K Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 6
!" ~ 340K Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 7
! 74 Repositories Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 8
! Companies Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 9
! Community Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 10
! Why Vue.js? Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 11
! Complexity Inherent vs. Instrumental Breaking FrontEnd Paradigms with with
Vue.js ! " - @ianaya89 12
! Inherent The Project Breaking FrontEnd Paradigms with with Vue.js
! " - @ianaya89 13
! Instrumental The Price Breaking FrontEnd Paradigms with with Vue.js
! " - @ianaya89 14
! ! Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 15
❌ ! ! Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 16
✅ ! ! Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 17
! The Progressive Framework • View focused • Core based
• VDOM • Reactive • Components Oriented Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 18
Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89
19
! Declarative Rendering Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 20
!" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>
new Vue({ el: '#app', data: function () { return { hello: 'Hello Sandusky ! !' } } }); </script> Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 21
!" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>
new Vue({ el: '#app', data: function () { return { hello: 'Hello Sandusky ! !' } } }); </script> Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 22
! render() new Vue({ el: '#app', data: function () {
return { hello: 'Hello Sandusky ! !' } } render: function () { return ( <h1>{this.hello}</h1> ) } }) Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 23
! Demo Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 24
! Component System Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 25
! Semantic <main> <top-bar></top-bar> <container> <login-form></login-form> </container> <annoying-banners></annoying-banners> <bottom-bar></bottom-bar> </main>
Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 26
! .vue Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 27
♻ Life Cycle Hooks new Vue({ created: function () {
console.log('I am alive ! ') } }); Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 28
☎ Communication • ⬇ Properties Down • ⬆ Events Up
Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 29
! DX Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 30
! vue-cli Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 31
⚙ Dev Tools Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 32
! Demo II Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 33
! vue-router Single Page Applications Breaking FrontEnd Paradigms with with
Vue.js ! " - @ianaya89 34
! vuex State Management (Flux) Breaking FrontEnd Paradigms with with
Vue.js ! " - @ianaya89 35
! vue-authenticate & vue-auth Authentication & JTW Breaking FrontEnd Paradigms
with with Vue.js ! " - @ianaya89 36
! Native & Nuxt.js Server Side Rendering Breaking FrontEnd Paradigms
with with Vue.js ! " - @ianaya89 37
! Native Script & Weex Mobile Native Rendering Breaking FrontEnd
Paradigms with with Vue.js ! " - @ianaya89 38
! Take Away • ! Progressive (Simple & Complex) •
" Declarative Rendering • # Component System • $ Great Ecosystem • % Awesome Community Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 39
!" Break Paradigms Breaking FrontEnd Paradigms with with Vue.js !
" - @ianaya89 40
Thanks! @ianaya89 Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 41
⁉ Questions? Breaking FrontEnd Paradigms with with Vue.js ! "
- @ianaya89 42
! Links bit.ly/cm-vue bit.ly/cm-demo bit.ly/cm-demo2 Breaking FrontEnd Paradigms with with
Vue.js ! " - @ianaya89 43