Onsen UI 2 開発における JS フレームワーク衝突事例集

dots. フロントエンドエンジニア部 創立ビアバッシュ & LT会 (2016/11/28) での発表スライドです。
[イベントURL: https://eventdots.jp/event/605542 ]

SlideShare 版はこちら:
https://www.slideshare.net/AsialCorp/onsen-ui-2-js

Transcript

1. 2016/11/28 dots. フロントエンドエンジニア部
   創⽴ビアバッシュ & LT会
   0OTFO 6*։ൃʹ͓͚Δ
   +4ϑϨʔϜϫʔΫিಥࣄྫू
   ŠŠ 8FC$PNQPOFOUT͸͍͍ͧ
   ΞγΞϧגࣜձࣾ ຢ઒ ঘथ
   

   View Slide

2. ࣗݾ঺հ
   ຢ઒ ঘथʢ !O@NBUBHBXB ʣ
   • ΤϯδχΞ
   ։ൃϝϯόʢ৽ೖΓʣ
   ίϯτϦϏϡʔλ
   ॴଐ
   

   View Slide

3. ࠓճ࿩͢͜ͱ
   • 0OTFO 6*ͷ֓ཁ
   • 0OTFO 6*Λ࡞ΔաఔͰىͬͨ͜ࣄނ
   • 8FC$PNQPOFOUTͷ࢖͍ಓͱ஫ҙ఺
   • 7VFKT ʹ͍ͭͯ
   × ϥΠϒϥϦΛ࢖͏࿩
   ○ ϥΠϒϥϦΛ࡞Δ࿩
   

   View Slide

4. ԿΛ࡞ΔաఔͰࣄނ͕ى͖͔ͨ
   • "OESPJEͱ J04ͷωΠςΟϒͷ 6*Λ
   )5.-Ͱ࠶ݱ͢Δ 6*ϥΠϒϥϦʢ$446*ϩδοΫʣ
   Ҏ্͕ւ֎͔Β
   

   View Slide

5. ࣄނͷܦҢ ౰ॳͷϥΠϒϥϦઃܭ
   Browser
   Angular 1
   ౰ॳ͸ ಛఆͷϑϨʔϜϫʔΫͷ֦ு ͱ࣮ͯ͠૷
   • "OHVMBSϞδϡʔϧͱ࣮ͯ͠૷ ʢ"OHVMBSΛ֦ுʣ
   ΞϓϦ
   • onsToolbar
   ˞0OTFO 6*࣌୅ͷݹ͍࣮૷ͷ࿩Ͱ͢
   • onsButton
   • …
   "OHVMBSσΟϨΫςΟϒ܈
   

   View Slide

6. Browser
   React
   ࣄނͷܦҢ ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ
   ⁉
   Browser
   Angular 1
   •೥ 3FBDU͕രൃతʹීٴ
   

   View Slide

7. ࣄނͷܦҢ ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ
   Browser
   Browser
   Angular 1
   •೥ 3FBDU͕രൃతʹීٴ
   • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ
   React
   

   View Slide

8. ࣄނͷܦҢ ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ
   Browser
   Angular 1
   •೥ 3FBDU͕രൃతʹීٴ
   • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ
   • ৽͍͠ϑϨʔϜϫʔΫ༻ͷ࣮૷Λͦͷ౎౓࡞Δ͔ʁ
   ˠ ͍΍ແཧɺࢮ͵
   Browser
   FW FW
   …
   ☠
   FW
   React
   

   View Slide

9. FW
   …
   ☠
   ࣄނͷܦҢ ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ
   Browser
   Angular 1
   •೥ 3FBDU͕രൃతʹීٴ
   • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ
   • ৽͍͠ϑϨʔϜϫʔΫ༻ͷ࣮૷Λͦͷ౎౓࡞Δ͔ʁ
   ˠ ͍΍ແཧɺࢮ͵
   Browser
   FW FW
   ͱ͍͏͜ͱͰ
   React
   

   View Slide

10. Browser
    ࣄނͷܦҢ ൈ͚ಓʢ8FC$PNQPOFOUTʣͷ׆༻
    
    
    
    • ෳ਺ϑϨʔϜϫʔΫରԠʹ͸
    8FC$PNQPOFOUT͕ར༻Մೳ
    • "OHVMBS౳ͷ '8ʹґଘ͠ͳ͍ ඪ४ ͷϒϥ΢β "1*ͭ
    

    View Slide

11. Browser
    ࣄނͷܦҢ 8FC$PNQPOFOUTʹΑΔ࠶ར༻ՄೳԽ
    
    
    
    
    
    Angular 1
    
    
    • "OHVMBSσΟϨΫςΟϒΛࣺͯɺ
    $VTUPN&MFNFOUTͰ࠶࣮૷
    ഁغ
    ϒϥ΢βΛ্ॻ͖
    ʢΧελϜཁૉΛొ࿥ʣ
    ʢ৽ͨʹ࣮૷ʣ
    ͜ΕͰͲΜͳϑϨʔϜϫʔΫͰ΋࢖͑Δ
    

    View Slide

12. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    React
    ΞϓϦ
    render() {
    return (
    
    
    
    
    Page 1
    
    
    This is the first page.
    Push page
    
    
    );
    }
    ˞ޡͬͨྫ
    

    View Slide

13. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    ΞϓϦ
    render() {
    return (
    
    
    
    
    Page 1
    
    
    This is the first page.
    Push page
    
    
    );
    }
    $VTUPN&MFNFOUTͰ͸
    %0.ཁૉͷϓϩύςΟʹ
    ίϯϙʔωϯτϝιουΛඥ͚ͮΔɻ
    ͔͠͠ 3FBDUͰ͸
    %0.ཁૉʹ௚઀ΞΫηεͰ͖ͳ͍
    ˞ޡͬͨྫ
    React
    

    View Slide

14. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    ΞϓϦ
    • ෼͔ͬͨ͜ͱ
    • 7JSUVBM%0.౳ͷෳࡶͳػೳΛੵΜͩ '8Ͱ͸
    ϑϨʔϜϫʔΫόΠϯσΟϯά ͷ༻ҙ͕ඞཁͳ৔߹͕͋Δ
    3FBDUόΠϯσΟϯά
    %0.ཁૉΛ୅ΘΓʹୟ͍ͯ͘ΕΔ
    3FBDUίϯϙʔωϯτ܈
    ʢ/BWJHBUPS 5PPMCBS #VUUPOʜʣ
    ΞϓϦ͸͜ΕΛ࢖ͬͯॻ͘
    render() {
    return (
    renderPage={this.renderPage} />
    );
    }
    ਖ਼͍͠ྫ
    React
    ,OPDLPVUKT ʹ͸ෆཁ
    

    View Slide

15. ୈͷࣄނ "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    Angular 2
    ΞϓϦ @Component({
    selector: 'ons-page[main]',
    template: require('./main-page.html'),
    styles: [require('./main-page.css')]
    })
    export class MainPage implements OnInit {
    constructor(private navi: OnsNavigator) {
    }
    ngOnInit() {
    // ৭ʑॲཧ
    }
    }
    ʢ΍ΉΛಘͣʣ࠾༻ͨ͠࢓༷
    "OHVMBSίϯϙʔωϯτʢ㱠ଐੑσΟϨΫςΟϒʣͰ
    POTQBHFཁૉΛ֦ுͯ͠ 41"಺ϖʔδΛఆٛ
    ਖ਼͍͠ྫ
    "OHVMBS
    όΠϯσΟϯά
    

    View Slide

16. ୈͷࣄނ "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    Angular 2
    ΞϓϦ @Component({
    selector: 'ons-page[main]',
    template: require('./main-page.html'),
    styles: [require('./main-page.css')]
    })
    export class MainPage implements OnInit {
    constructor(private navi: OnsNavigator) {
    }
    ngOnInit() {
    // ৭ʑॲཧ
    }
    }
    ਖ਼͍͠ྫ
    OH0O*OJU ͕ૣ͗͢
    $VTUPN&MFNFOUTଆͰͷॲཧΑΓ
    ઌʹ OH0O*OJU ͕ಈ͍ͯ͠·͏
    ʢ΍ΉΛಘͣʣ࠾༻ͨ͠࢓༷
    "OHVMBSίϯϙʔωϯτʢ㱠ଐੑσΟϨΫςΟϒʣͰ
    POTQBHFཁૉΛ֦ுͯ͠ 41"಺ϖʔδΛఆٛ
    "OHVMBS
    όΠϯσΟϯά
    

    View Slide

17. ୈͷࣄނ "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser
    
    
    
    
    Angular 2
    ΞϓϦ @Component({
    selector: 'ons-page[main]',
    template: require('./main-page.html'),
    styles: [require('./main-page.css')]
    })
    export class MainPage implements OnInit {
    constructor(private navi: OnsNavigator) {
    }
    ngOnInit() {
    // ৭ʑॲཧ
    }
    }
    ਖ਼͍͠ྫ
    OH0O*OJU ͕ૣ͗͢
    $VTUPN&MFNFOUTଆͰͷॲཧΑΓ
    ઌʹ OH0O*OJU ͕ಈ͍ͯ͠·͏
    •෼͔ͬͨ͜ͱ
    • $VTUPN&MFNFOUTͱ +4ϑϨʔϜϫʔΫͱͷؒͰ͸
    ίϯϙʔωϯτϥΠϑαΠΫϧ͕িಥ͢Δ৔߹͕͋Δ
    

    View Slide

18. ·ͱΊ8FC$PNQPOFOUT͸ʢ৚݅෇͖Ͱʣ͍͍ͧ
    • 8FC$PNQPOFOUTΛ࢖͏ͱ
    ෳ਺ϑϨʔϜϫʔΫରԠ͕Ͱ͖Δ
    • ៉ྷʹ͸͍͔ͣɺ
    
    ϑϨʔϜϫʔΫόΠϯσΟϯάͷ༻ҙ
    
    ίϯϙʔωϯτϥΠϑαΠΫϧͷিಥ΁ͷରॲ
    ͕ඞཁʹͳΔʢ͜ͱ΋͋Δʣ
    • ͔͠͠όΠϯσΟϯάΛͪΐͬͱॻ͚ͩ͘Ͱ
    ৽ϑϨʔϜϫʔΫʹରԠͰ͖ΔͷͰɺ
    ಓ۩ͱͯ͠͸ ͱͯ΋ྑ͍
    

    View Slide

19. ͳΜ͔͖ͨ
    

    View Slide

20. ͳΜ͔͖ͨ
    Vue.js
    

    View Slide

21. 7VFKT
    • όʔδϣϯͷࠂ஌Λ͖͔͚ͬʹ
    രൃతʹ (JU)VCTUBSΛ৳͹͍ͯ͠ΔϑϨʔϜϫʔΫ
    ग़యhttp://www.timqian.com/star-history/
    

    View Slide

22. 0OTFO 6*༻ 7VFKT όΠϯσΟϯά
    Browser
    
    
    
    
    Vue.js 2
    ΞϓϦ
    7VFKT όΠϯσΟϯά
    •ۙ೔ϦϦʔε͠·͢
    • 8FC$PNQPOFOUTͰ࣮૷͓͍͓͔ͯͨ͛͠Ͱ
    ׂͱ͙͢ʹରԠͰ͖·ͨ͠
    

    View Slide

23. 0OTFO 6*༻ 7VFKT όΠϯσΟϯά
    Browser
    
    
    
    
    Vue.js 2
    ΞϓϦ
    7VFKT όΠϯσΟϯά
    •ۙ೔ϦϦʔε͠·͢
    • 8FC$PNQPOFOUTͰ࣮૷͓͍͓͔ͯͨ͛͠Ͱ
    ׂͱ͙͢ʹରԠͰ͖·ͨ͠
    Thank you for listening!
    既にOnsen UI を使っている⽅は是⾮ GitHub スターを〜！
    https://github.com/OnsenUI/OnsenUI
    リリースは Twitter で告知します
    https://twitter.com/Onsen_UI_ja
    

    View Slide