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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Igor Halfeld
September 01, 2017
Programming
27
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
74
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
230
Micro Front-ends, what they don't tell you
igorhalfeld
0
410
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
110
Other Decks in Programming
See All in Programming
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
sushichan044
0
240
信頼性について考えてみる(SRE NEXT 2026 miniLT)
hayama17
0
210
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
naoya
16
3.6k
[RVD26] Vibe Architecture en 2040 : Darwin a-t-il (enfin) eu raison des architectes ?
alexandretouret
0
100
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
2.4k
テーブルをDELETEした
yuzneri
0
110
Haskell/Servantを通してWebミドルウェアを捉え直す
pizzacat83
1
610
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
tomohisa
0
480
音楽のための関数型プログラミング言語mimiumにおける多段階計算の活用
tomoyanonymous
1
360
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
kajitack
3
1k
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
nrslib
1
280
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
180
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
980
What does AI have to do with Human Rights?
axbom
PRO
1
2.3k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
230
Color Theory Basics | Prateek | Gurzu
gurzu
0
400
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.6k
The Language of Interfaces
destraynor
162
27k
New Earth Scene 8
popppiees
3
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
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/