A proxy object usage

A proxy object usage Remote object management via proxies "We
are JavaScripters" @ 2017/06/24 N. Shimizu ([email protected] / @chikoski) | Mozilla Tech Speaker

Typical code and what we want GVODUJPOVQEBUF NPEFM \ NPEFMUJUMF/FXHSFBUUJUMF
NPEFMBQQFOE$IJME /FXDIJMESFTPVSDF TFOE6QEBUF3FRVFTU NPEFM ^ GVODUJPOVQEBUF NPEFM \ NPEFMUJUMF/FXHSFBUUJUMF NPEFMBEE$IJME /FXDIJMESFTPVSDF ^

Approach 1: inheritance DMBTT.PEFM\ TOJQ ^ DMBTT3FNPUF.PEFMFYUFOET.PEFM\ TFUUJUMF OFX5JUMF \
TVQFSUJUMFOFX5JUMFTFOE6QEBUF3FRVFTU UIJT ^ ^ GVODUJPODSFBUF.PEFM KTPO \ SFUVSOOFX.PEFM KTPO ^

Approach 2: proxy DMBTT.PEFM\ TOJQ ^ GVODUJPODSFBUF.PEFM KTPO \ DPOTUNPEFMOFX.PEFM
KTPO DPOTUIBOEMFS\ TFUGVODUJPO UBSHFU QSPQFSUZ WBMVF SFDFJWFS \ 3FGMFDUTFU UBSHFU QSPQFSUZ WBMVF SFDFJWFS TFOE3FRVFTU UBSHFU ^ ^ SFUVSOOFX1SPYZ NPEFM IBOEMFS ^

Proxy allows us to customize fundamental operations

1SPYZ )BOEMFS Proxy • Target: an object which a proxy
virtualize • Traps: methods that provide property access • Handler: A placeholder object which contains traps 5SBQ 5BSHFU 5SBQ 5SBQ

Traps: check MDN page for details • handler.getPrototypeOf() • handler.setPrototypeOf()
• handler.isExtensible() • handler.preventExtensions() • handler.getOwnPropertyDescriptor() • handler.deﬁneProperty() • handler.has() • handler.get() • handler.set() • handler.deleteProperty() • handler.ownKeys() • handler.apply() • handler.construct() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy: basic usage DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS
BTTFSU QSPYZYUBSHFUY BTTFSU QSPYZZUBSHFUZ QSPYZY BTTFSU QSPYZYUBSHFUY

Proxy: getter override DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS
\ TXJUDI QSPQFSUZ DBTFOPSNSFUVSOUBSHFUY UBSHFUZ EFGBVMUSFUVSO3FGMFDUHFU UBSHFU QSPQFSUZ UBSHFU ^ ^ ^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS BTTFSU QSPYZOPSNUBSHFUY UBSHFUZ

Proxy: new method addition DPOTUIBOEMFS\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \
DPOTUWBMVF3FGMFDUHFU UBSHFU QSPQFSUZ SFDFJWFS SFUVSOWBMVF WBMVFGVODUJPO \BMFSU IFMMPIFMMP ^ ^ ^ DPOTUQSPYZOFX1SPYZ \^ IBOEMFS QSPYZIFMMP EJTQMBZTBOBMFSU QSPYZBBB EJTQMBZTBOBMFSU UPP

Proxy: immutable properties by disabling setters DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ TFUGVODUJPO
UBSHFU QSPQFSUZ WBMVF SFDFJWFS \^ ^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS QSPYZY BTTFSU UBSHFUYQSPYZY BTTFSU UBSHFUY

Proxy: assigned value validation DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ TFUGVODUJPO UBSHFU QSPQFSUZ
WBMVF SFDFJWFS \ JG /VNCFSJT*OUFHFS WBMVF \ 3FGMFDUTFU UBSHFU QSPQFSUZ WBMVF SFDFJWFS ^FMTF\ UISPXOFX&SSPS 5ZQFFSSPS ^ SFUVSOUSVF ^ ^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS QSPYZY5ZQFFSSPS

Proxy: with decoration patterns DPOTUBEE/PSN\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \
TXJUDI QSPQFSUZ DBTFOPSNSFUVSOUBSHFUY UBSHFUZ EFGBVMU3FGMFDUHFU UBSHFU QSPQFSUZ UBSHFU ^ ^ ^ DPOTUEJTBCMF4FUUFST\ TFUGVODUJPO UBSHFU QSPQFSUZ WBMVF SFDFJWFS \^ ^

Proxy: with decoration patterns (cont.) DPOTUUBSHFU\Y Z^ DPOTUXJUI/PSNOFX1SPYZ UBSHFU BEE/PSN
DPOTUJNNVUBCMFOFX1SPYZ UBSHFU EJTBCMF4FUUFST DPOTUJNNVUBCMF8JUI/PSNOFX1SPYZ JNNVUBCMF BEE/PSN JNNVUBCMF8JUI/PSNY BTTFSU JNNVUBCMF8JUI/PSNOPSN

Updater implementation

Update sequence Controller Model Updater Server call setters add update
request send update requests call setters add update request call setters add update request

Techniques • Proxy objects' creation process is hidden with factory
methods • Proxy objects acquire an Updater's reference via its static method to • Ensure acquired object is a singleton object • Keep their relationship to be loosely coupled • Asynchronous and batch remote object update • Scheduled with window.requestIdleCallback • Requests are cached in updater

Proxy object creation with factory method GVODUJPODSFBUF.BOBHFE/PUF OPUF \ SFUVSOOFX1SPYZ
OPUF \ TFUGVODUJPO UBSHFU BUUS WBMVF SFDFJWFS \ DPOTUVQEBUFS6QEBUFSHFU*OTUBODF VQEBUFSBEE3FRVFTU OPUFVQEBUF \ JEUBSHFUJE BUUSJCVUFBUUS WBMVFWBMVF ^ 3FGMFDUTFU UBSHFU BUUS WBMVF SFDFJWFS SFUVSOUSVF ^ ^ ^

Singleton pattern DMBTT6QEBUFS\ TOJQ TUBUJDDSFBUF VSM \ UIJTJOTUBODFOFX6QEBUFS VSM
SFUVSOUIJTJOTUBODF ^ TUBUJDHFU*OTUBODF \ SFUVSOUIJTJOTUBODF UIJTJOTUBODFUIJTDSFBUF ^ TOJQ

Request cache in Updater BEE3FRVFTU UZQF EBUB \ DPOTUSFROFX*OUFSOBM3FRVFTU UZQF
EBUB DPOTUBDUJPOTUIJTRVFVFT<UZQF>]]\^ DPOTURVFVFBDUJPOT<UZQF>]]<> RVFVFQVTI SFR 3FGMFDUTFU BDUJPOT UZQF RVFVF BDUJPOT 3FGMFDUTFU UIJTRVFVFT EBUBJE BDUJPOT UIJTRVFVFT ^

Scheduled with window.requestIdleCallback TUBSU JOUFSWBM \ MFUUJNFTUBNQOFX%BUF DPOTUDBMMCBDL GMBHUIJTUP$POUJOVF
\ DPOTUOPXOFX%BUF JG OPXUJNFTUBNQJOUFSWBM \ UIJTGMVTI UIFO SFRVFTUT\ JG SFRVFTUTMFOHUI \UJNFTUBNQOPX^ JG GMBH \ UIJTJEMF$BMMCBDL*EXJOEPXSFRVFTU*EMF$BMMCBDL DBMMCBDL ^ ^ ^FMTF\ UIJTJEMF$BMMCBDL*EXJOEPXSFRVFTU*EMF$BMMCBDL DBMMCBDL ^ ^ DBMMCBDL USVF ^

Inheritance vs proxy • Similar discussion: inheritance vs mix-in •
Sub-classing approach encourage us to write rigid code • Explicit and easy to understand • Hard to extend • Proxy approach allows us to write extensible code • We can extend classes by decorating them with proxies • Code readability tends to be low

Proxy allows us to customize fundamental features • We can
override fundamental features with Proxy • e.g. setters / getters / constructors / function calls • Target, handler, traps • Implicit inheritance: create anonymous sub-class of target's class • We can separate remote object updating code from models with proxies • Be careful when you use proxies as React components' props or states

A proxy object usage

A proxy object usage

chikoski

More Decks by chikoski

Other Decks in Technology

Featured

Transcript

A proxy object usage Remote object management via proxies "We

Typical code and what we want GVODUJPOVQEBUF NPEFM \ NPEFMUJUMF/FXHSFBUUJUMF

Approach 1: inheritance DMBTT.PEFM\ TOJQ ^ DMBTT3FNPUF.PEFMFYUFOET.PEFM\ TFUUJUMF OFX5JUMF \

Approach 2: proxy DMBTT.PEFM\ TOJQ ^ GVODUJPODSFBUF.PEFM KTPO \ DPOTUNPEFMOFX.PEFM

Proxy allows us to customize fundamental operations

1SPYZ )BOEMFS Proxy • Target: an object which a proxy

Traps: check MDN page for details • handler.getPrototypeOf() • handler.setPrototypeOf()

Proxy: basic usage DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS

Proxy: getter override DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS

Proxy: new method addition DPOTUIBOEMFS\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \

Proxy: immutable properties by disabling setters DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ TFUGVODUJPO

Proxy: assigned value validation DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ TFUGVODUJPO UBSHFU QSPQFSUZ

Proxy: with decoration patterns DPOTUBEE/PSN\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \

Proxy: with decoration patterns (cont.) DPOTUUBSHFU\Y Z^ DPOTUXJUI/PSNOFX1SPYZ UBSHFU BEE/PSN

Updater implementation

Update sequence Controller Model Updater Server call setters add update

Techniques • Proxy objects' creation process is hidden with factory

Proxy object creation with factory method GVODUJPODSFBUF.BOBHFE/PUF OPUF \ SFUVSOOFX1SPYZ

Singleton pattern DMBTT6QEBUFS\ TOJQ TUBUJDDSFBUF VSM \ UIJTJOTUBODFOFX6QEBUFS VSM

Request cache in Updater BEE3FRVFTU UZQF EBUB \ DPOTUSFROFX*OUFSOBM3FRVFTU UZQF

Scheduled with window.requestIdleCallback TUBSU JOUFSWBM \ MFUUJNFTUBNQOFX%BUF DPOTUDBMMCBDL GMBHUIJTUP$POUJOVF

Inheritance vs proxy • Similar discussion: inheritance vs mix-in •

Proxy allows us to customize fundamental features • We can