A proxy object usage

A proxy object usage

An introduction of JavaScript's feature: Proxy object.

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

June 05, 2017
Tweet

Transcript

  1. A proxy object usage Remote object management via proxies "We

    are JavaScripters" @ 2017/06/24 N. Shimizu (chikoski@gmail.com / @chikoski) | Mozilla Tech Speaker
  2. Typical code and what we want GVODUJPOVQEBUF NPEFM \ NPEFMUJUMF/FXHSFBUUJUMF

    NPEFMBQQFOE$IJME /FXDIJMESFTPVSDF  TFOE6QEBUF3FRVFTU NPEFM  ^ GVODUJPOVQEBUF NPEFM \ NPEFMUJUMF/FXHSFBUUJUMF NPEFMBEE$IJME /FXDIJMESFTPVSDF  ^
  3. Approach 1: inheritance DMBTT.PEFM\ TOJQ ^ DMBTT3FNPUF.PEFMFYUFOET.PEFM\ TFUUJUMF OFX5JUMF \

    TVQFSUJUMFOFX5JUMFTFOE6QEBUF3FRVFTU UIJT  ^ ^ GVODUJPODSFBUF.PEFM KTPO \ SFUVSOOFX.PEFM KTPO  ^
  4. 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  ^
  5. Proxy allows us to customize fundamental operations

  6. 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
  7. 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
  8. Proxy: basic usage DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS 

    BTTFSU QSPYZYUBSHFUY  BTTFSU QSPYZZUBSHFUZ  QSPYZY BTTFSU QSPYZYUBSHFUY 
  9. 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 
  10. Proxy: new method addition DPOTUIBOEMFS\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \

    DPOTUWBMVF3FGMFDUHFU UBSHFU QSPQFSUZ SFDFJWFS  SFUVSOWBMVF WBMVFGVODUJPO \BMFSU IFMMPIFMMP ^ ^ ^ DPOTUQSPYZOFX1SPYZ \^ IBOEMFS  QSPYZIFMMP EJTQMBZTBOBMFSU QSPYZBBB EJTQMBZTBOBMFSU UPP
  11. Proxy: immutable properties by disabling setters DPOTUUBSHFU\Y Z^ DPOTUIBOEMFS\ TFUGVODUJPO

    UBSHFU QSPQFSUZ WBMVF SFDFJWFS \^ ^ DPOTUQSPYZOFX1SPYZ UBSHFU IBOEMFS  QSPYZY BTTFSU UBSHFUYQSPYZY  BTTFSU UBSHFUY 
  12. 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
  13. Proxy: with decoration patterns DPOTUBEE/PSN\ HFUGVODUJPO UBSHFU QSPQFSUZ SFDFJWFS \

    TXJUDI QSPQFSUZ  DBTFOPSNSFUVSOUBSHFUY UBSHFUZ  EFGBVMU3FGMFDUHFU UBSHFU QSPQFSUZ UBSHFU  ^ ^ ^ DPOTUEJTBCMF4FUUFST\ TFUGVODUJPO UBSHFU QSPQFSUZ WBMVF SFDFJWFS \^ ^
  14. 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 
  15. Updater implementation

  16. Update sequence Controller Model Updater Server call setters add update

    request send update requests call setters add update request call setters add update request
  17. 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
  18. 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 ^  ^  ^
  19. Singleton pattern DMBTT6QEBUFS\ TOJQ TUBUJDDSFBUF VSM \ UIJTJOTUBODFOFX6QEBUFS VSM 

    SFUVSOUIJTJOTUBODF ^ TUBUJDHFU*OTUBODF \ SFUVSOUIJTJOTUBODF UIJTJOTUBODFUIJTDSFBUF  ^ TOJQ
  20. 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  ^
  21. 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  ^
  22. 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
  23. 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