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
Igor Halfeld
September 01, 2017
Programming
0
20
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
150
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
46
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
Deninho, the TS children
igorhalfeld
1
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
370
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
84
Other Decks in Programming
See All in Programming
Learning Kotlin with detekt
inouehi
1
150
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
2
500
Unity Android XR入門
sakutama_11
0
180
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
730
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Typedesign – Prime Four
hannesfritz
41
2.5k
Practical Orchestrator
shlominoach
186
10k
Automating Front-end Workflow
addyosmani
1369
200k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Site-Speed That Sticks
csswizardry
4
410
Unsuck your backbone
ammeep
669
57k
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/