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
Data binding
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Igor Halfeld
September 01, 2017
Programming
0
22
Data binding
Igor Halfeld
September 01, 2017
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
190
How to migrate legacy frontend?
igorhalfeld
1
130
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
59
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
530
Deninho, the TS children
igorhalfeld
1
220
Micro Front-ends, what they don't tell you
igorhalfeld
0
390
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
98
Other Decks in Programming
See All in Programming
「ブロックテーマでは再現できない」は本当か?
inc2734
0
380
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
400
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
990
CSC307 Lecture 01
javiergs
PRO
0
690
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6k
Package Management Learnings from Homebrew
mikemcquaid
0
210
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
CSC307 Lecture 08
javiergs
PRO
0
670
Apache Iceberg V3 and migration to V3
tomtanaka
0
150
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
110
Featured
See All Featured
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
72
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Ethics towards AI in product and experience design
skipperchong
2
190
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Agile that works and the tools we love
rasmusluckow
331
21k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
Being A Developer After 40
akosma
91
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Designing for Performance
lara
610
70k
Transcript
DATA BINDING
@Halfeld vuejs-brasil.com.br webschool.io igorluiz.me
“ Data binding is a general technique that binds data
sources from the provider and consumer together and synchronizes them. This is usually done with two data/information sources with different languages as in XML data binding.
ONE-WAY BINDING TWO-WAY BINDING
IMPLEMENTAÇÃO Dirty Checking e Dependency Tracking
DOM Watcher Watcher Watcher Dirty Checking Angular 1 State $digest
Dependency Tracking Knockout / Vue 1.x a setter getter b
Watcher a.b Collect Dependencies Bindings DOM Notify Update Notify
Virtual DOM React etc. New Virtual DOM Tree DOM Old
Virtual DOM Tree diff + patch Render Function
Virtual DOM + Dependency Tracking Vue 2.0, React + MobX
Watcher track dependencies
Object.defineProperty(obj, prop, descriptor)
DATA DESCRIPTOR ACCESSOR DESCRIPTOR
DEMO
Obrigado! é biscoito!!! http://igorluiz.me/talks/