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
24
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
200
How to migrate legacy frontend?
igorhalfeld
1
130
Patterns for perfect components in Vue.js
igorhalfeld
0
120
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
67
Step by step I followed a career in software
igorhalfeld
0
710
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
400
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
110
Other Decks in Programming
See All in Programming
PHPで TLSのプロトコルを実装してみる
higaki_program
0
570
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
seike460
PRO
0
110
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
440
AIと共にエンジニアとPMの “二刀流”を実現する
naruogram
0
100
Goの型安全性で実現する複数プロダクトの権限管理
ishikawa_pro
2
1.4k
20260315 AWSなんもわからん🥲
chiilog
2
180
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
4
1.4k
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
shin1x1
0
260
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
480
Nuxt Server Components
wattanx
0
200
Claude Codeログ基盤の構築
giginet
PRO
7
3.8k
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
190
Featured
See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
150
The Curious Case for Waylosing
cassininazir
0
280
Done Done
chrislema
186
16k
The SEO Collaboration Effect
kristinabergwall1
0
410
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.5k
How STYLIGHT went responsive
nonsquared
100
6k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Design in an AI World
tapps
0
180
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
140
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
130
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
95
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/