當 Turbolinks 遇上 React

2017 ModernWeb Conference 演講簡報

Transcript

1. 吚7XUEROLQNV蝽Ӥ5HDFW
   

   View Slide

2. 襟
   儘
   䓛⛳
   @elct9620
   WEB DEVELOPER
   GAME DEVELOPER
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Բ狝夺䌌Ꭺ7DPDVKLL䌕礯
   䛑አ礯ֺ
   

   View Slide

7. 7XUEROLQNVฎचෝ+70/ጱ+LVWRU\$3,ಅ䋿匍
   ጱದ蔩牐
   ದ蔩ܻቘ
   

   View Slide

8. ࣁ螂݄+LVWRU\$3,ݝአෝ獥矦ӤӞ殷౲ᘏӥӞ殷牐
   ದ蔩ܻቘ
   

   View Slide

9. ದ蔩ܻቘ
   history.back();
   history.forward();
   ܻতጱ+LVWRU\$3,
   

   View Slide

10. +70/碝ीጱSXVK6WDWHۑ胼㳷虏౯㮉ݢ犥䌘倵
    薩夵袅蝱ᤈ砺֢牐
    ದ蔩ܻቘ
    

    View Slide

11. 技術原理
    

    View Slide

12. 技術原理
    

    View Slide

13. 技術原理
    

    View Slide

14. 技術原理
    

    View Slide

15. ದ蔩ܻቘ
    var newState = {
    pageName: 'New Page',
    controller: 'acticle',
    id: '1'
    };
    window.history.push(
    newState, newState.pageName,
    "/article/1"
    );
    

    View Slide

16. 技術原理
    

    View Slide

17. 技術原理
    

    View Slide

18. 7XUEROLQNVฎݑک3-$;ದ蔩ጱ୽段叨ኞጱ叨ᇔ牐
    ದ蔩ܻቘ
    

    View Slide

19. 技術原理
    

    View Slide

20. 技術原理
    

    View Slide

21. 7XUEROLQNV虏M4XHU\篷ဩྋଉ螀֢
    य़疑犋ฎ盄ࡅ稭
    

    View Slide

22. M4XHU\碉ݳ
    $(document).ready(function() {
    // OnLoad...
    });
    य़ग़碍碻狡౯㮉䨝ࣁM4XHU\ጱUHDG\狶蒂ቘ
    

    View Slide

23. M4XHU\碉ݳ
    $(document).on("turbolinks:load, function(){
    // OnLoad...
    });
    犋螂ࣁ7XUEROLQNVᥝ硬አ7XUEROLQNVጱORDGԪկ
    

    View Slide

24. M4XHU\䨝㵕֕ฎ螭ฎ瓥ധ
    ᯿蕦ڡত玕
    

    View Slide

25. jQuery.ready => 頁面讀取觸發
    Turbolinks:load => 替換頁面時觸發
    Turbolinks API
    

    View Slide

26. jQuery.ready => 頁面讀取觸發
    Turbolinks:load => 替換頁面時觸發
    Turbolinks API
    

    View Slide

27. M4XHU\碉ݳ
    $(document).on(“turbolinks:before-cache, function(){
    // UnLoad…
    });
    ࣁ殷ᶎᤩ䧙ਂԏ獮薹ᴻM4XHU\زկ
    

    View Slide

28. ಩7XUEROLQNV吚5HDFW5RXWHUጱ磦դ
    5HDFW7XUEROLQNV
    

    View Slide

29. 5HDFW碉ݳ
    ReactDOM.render(, root)
    Ӟ膢౯㮉䨝ፗ矑狶౮6LQJOH3DJH$SSOLFDWLRQ
    

    View Slide

30. 技術原理
    

    View Slide

31. 虏5HDFWݝ䌘蟂獤ጱ殷ᶎ磦矦
    蟂獤磦矦
    

    View Slide

32. 技術原理
    

    View Slide

33. 技術原理
    

    View Slide

34. ᯿蕦5HQGHUزկ蝨౮ग़稞Ԫկ翉ਧ
    ๅ矦殷ᶎ
    

    View Slide

35. 5HDFW碉ݳ
    ReactDOM.unmountComponentAtNode(root);
    ֵአXQPRXQW㬵薹ᴻܻ๜ጱ翉ਧ
    

    View Slide

36. 櫝樄殷ᶎ碻狶XQORDGXQPRXQW疰ݢ犥ԧ
    蚤M4XHU\ጱ眐हӞ䰬
    

    View Slide

37. ඪൔ:HESDFNHUԏ盅牧-DYD6FULSW哴ᰁ獊蟂硬አ:HESDFN蒂ቘ
    5DLOV
    

    View Slide

38. 3UR7LS
    
    const dataset = root.dataset;
    ReactDOM.render(, root);
    5HQGHU碻ݢ犥癲獈GDWD痀௔斔ۗ
    

    View Slide

39. 3UR7LS
    const Cable = ActionCable.createConsumer();
    $FWLRQ&DEOH犖ݢ犥ࣁ:HESDFNӾֵአ
    

    View Slide

40. 3UR7LS
    MessageChannel.broadcast_to(
    current_user,
    type: 'PRIVATE_MESSAGE',
    message: 'Hi, I am Aotoki!'
    )
    $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[)OX[
    

    View Slide

41. 3UR7LS
    const channel = Cable.subscriptions
    .create('MessageChannel')
    channel.received = store.dispatch
    $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[)OX[
    

    View Slide

42. 3UR7LS
    var App = new Vue({ beforeDestroy: ... })
    # before-cache
    App.$destroy()
    9XHӞ䰬犖ݢ犥
    

    View Slide

43. View Slide