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

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

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

Naoki Matagawa

November 28, 2016
Tweet

More Decks by Naoki Matagawa

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Browser
    React
    ࣄނͷܦҢ ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ

    Browser
    Angular 1
    •೥ 3FBDU͕രൃతʹීٴ

    View full-size slide

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

    View full-size slide

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


    FW
    React

    View full-size slide

  9. FW


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

    View full-size slide

  10. Browser
    ࣄނͷܦҢ ൈ͚ಓʢ8FC$PNQPOFOUTʣͷ׆༻



    • ෳ਺ϑϨʔϜϫʔΫରԠʹ͸
    8FC$PNQPOFOUT͕ར༻Մೳ
    • "OHVMBS౳ͷ '8ʹґଘ͠ͳ͍ ඪ४ ͷϒϥ΢β "1*ͭ

    View full-size slide

  11. Browser
    ࣄނͷܦҢ 8FC$PNQPOFOUTʹΑΔ࠶ར༻ՄೳԽ





    Angular 1


    • "OHVMBSσΟϨΫςΟϒΛࣺͯɺ
    $VTUPN&MFNFOUTͰ࠶࣮૷
    ഁغ
    ϒϥ΢βΛ্ॻ͖
    ʢΧελϜཁૉΛొ࿥ʣ
    ʢ৽ͨʹ࣮૷ʣ
    ͜ΕͰͲΜͳϑϨʔϜϫʔΫͰ΋࢖͑Δ

    View full-size slide

  12. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser




    React
    ΞϓϦ
    render() {
    return (




    Page 1


    This is the first page.
    Push page


    );
    }
    ˞ޡͬͨྫ

    View full-size slide

  13. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser




    ΞϓϦ
    render() {
    return (




    Page 1


    This is the first page.
    Push page


    );
    }
    $VTUPN&MFNFOUTͰ͸
    %0.ཁૉͷϓϩύςΟʹ
    ίϯϙʔωϯτϝιουΛඥ͚ͮΔɻ
    ͔͠͠ 3FBDUͰ͸
    %0.ཁૉʹ௚઀ΞΫηεͰ͖ͳ͍
    ˞ޡͬͨྫ
    React

    View full-size slide

  14. ୈͷࣄނ 3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ
    Browser




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

    View full-size 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 full-size 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 full-size 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 full-size slide

  18. ·ͱΊ8FC$PNQPOFOUT͸ʢ৚݅෇͖Ͱʣ͍͍ͧ
    • 8FC$PNQPOFOUTΛ࢖͏ͱ
    ෳ਺ϑϨʔϜϫʔΫରԠ͕Ͱ͖Δ
    • ៉ྷʹ͸͍͔ͣɺ

    ϑϨʔϜϫʔΫόΠϯσΟϯάͷ༻ҙ

    ίϯϙʔωϯτϥΠϑαΠΫϧͷিಥ΁ͷରॲ
    ͕ඞཁʹͳΔʢ͜ͱ΋͋Δʣ
    • ͔͠͠όΠϯσΟϯάΛͪΐͬͱॻ͚ͩ͘Ͱ
    ৽ϑϨʔϜϫʔΫʹରԠͰ͖ΔͷͰɺ
    ಓ۩ͱͯ͠͸ ͱͯ΋ྑ͍

    View full-size slide

  19. ͳΜ͔͖ͨ
    Vue.js

    View full-size slide

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

    View full-size slide

  21. 0OTFO 6*༻ 7VFKT όΠϯσΟϯά
    Browser




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

    View full-size slide

  22. 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 full-size slide