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
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
250
SourceGeneratorのススメ
htkym
0
190
「ブロックテーマでは再現できない」は本当か?
inc2734
0
320
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
140
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
180
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
100
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Patterns of Patterns
denyspoltorak
0
1.4k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
630
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
590
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
240
Featured
See All Featured
Writing Fast Ruby
sferik
630
62k
30 Presentation Tips
portentint
PRO
1
210
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Building the Perfect Custom Keyboard
takai
2
680
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Docker and Python
trallard
47
3.7k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
72
Crafting Experiences
bethany
1
46
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
Rails Girls Zürich Keynote
gr2m
96
14k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
110
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/