Upgrade to Pro — share decks privately, control downloads, hide ads and more …

當 Turbolinks 遇上 React

當 Turbolinks 遇上 React

2017 ModernWeb Conference 演講簡報

蒼時弦や

August 11, 2017
Tweet

More Decks by 蒼時弦や

Other Decks in Programming

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