Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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  ^

Slide 5

Slide 5 text

Proxy allows us to customize fundamental operations

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Traps: check MDN page for details • handler.getPrototypeOf() • handler.setPrototypeOf() • handler.isExtensible() • handler.preventExtensions() • handler.getOwnPropertyDescriptor() • handler.defineProperty() • 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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 

Slide 15

Slide 15 text

Updater implementation

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 ^  ^  ^

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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  ^

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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