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
26
0
Share
Data binding
Igor Halfeld
September 01, 2017
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
140
Patterns for perfect components in Vue.js
igorhalfeld
0
130
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
71
Step by step I followed a career in software
igorhalfeld
0
710
Using AI to create memes
igorhalfeld
0
540
Deninho, the TS children
igorhalfeld
1
220
Micro Front-ends, what they don't tell you
igorhalfeld
0
400
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
110
Other Decks in Programming
See All in Programming
New "Type" system on PicoRuby
pocke
1
430
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
ytakahashii
3
1.4k
ビジネスモデルから紐解く、AI+型駆動開発
hirokiomote
2
5.2k
Inspired By RubyKaigi (EN)
atzzcokek
0
490
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
terryu16
0
230
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
1.5k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.1k
JavaDoc 再入門
nagise
0
250
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
300
AIエージェントと協働するCLI開発 — BunとOpenClawで学んだこと
yoshikouki
1
230
SPMマルチモジュールで テストカバレッジを取得する技法
yosshi4486
0
140
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
minodriven
17
5.2k
Featured
See All Featured
WCS-LA-2024
lcolladotor
0
610
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
How to Ace a Technical Interview
jacobian
281
24k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
The Pragmatic Product Professional
lauravandoore
37
7.3k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
300
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
570
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
150
WENDY [Excerpt]
tessaabrams
11
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
560
Balancing Empowerment & Direction
lara
6
1.1k
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/