Save 37% off PRO during our Black Friday Sale! »

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

31d309da3b3b96a39108fe77cdc5e7cd?s=128

Naoki Matagawa

November 28, 2016
Tweet

Transcript

  1. 2016/11/28 dots. フロントエンドエンジニア部 創⽴ビアバッシュ & LT会 0OTFO 6*։ൃʹ͓͚Δ +4ϑϨʔϜϫʔΫিಥࣄྫू ŠŠ

    8FC$PNQPOFOUT͸͍͍ͧ ΞγΞϧגࣜձࣾ ຢ઒ ঘथ
  2. ࣗݾ঺հ ຢ઒ ঘथʢ !O@NBUBHBXB ʣ • ΤϯδχΞ ։ൃϝϯόʢ৽ೖΓʣ ίϯτϦϏϡʔλ ॴଐ

  3. ࠓճ࿩͢͜ͱ • 0OTFO 6*ͷ֓ཁ • 0OTFO 6*Λ࡞ΔաఔͰىͬͨ͜ࣄނ • 8FC$PNQPOFOUTͷ࢖͍ಓͱ஫ҙ఺ •

    7VFKT ʹ͍ͭͯ × ϥΠϒϥϦΛ࢖͏࿩ ◦ ϥΠϒϥϦΛ࡞Δ࿩
  4. ԿΛ࡞ΔաఔͰࣄނ͕ى͖͔ͨ • "OESPJEͱ J04ͷωΠςΟϒͷ 6*Λ )5.-Ͱ࠶ݱ͢Δ 6*ϥΠϒϥϦʢ$44 6*ϩδοΫʣ Ҏ্͕ւ֎͔Β

  5. ࣄނͷܦҢ  ౰ॳͷϥΠϒϥϦઃܭ Browser Angular 1 ౰ॳ͸ ಛఆͷϑϨʔϜϫʔΫͷ֦ு ͱ࣮ͯ͠૷ •

    "OHVMBSϞδϡʔϧͱ࣮ͯ͠૷ ʢ"OHVMBSΛ֦ுʣ ΞϓϦ • onsToolbar ˞0OTFO 6*࣌୅ͷݹ͍࣮૷ͷ࿩Ͱ͢ • onsButton • … "OHVMBSσΟϨΫςΟϒ܈
  6. Browser React ࣄނͷܦҢ  ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ ⁉ Browser Angular 1 •೥

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

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

    • ৽͍͠ϑϨʔϜϫʔΫ༻ͷ࣮૷Λͦͷ౎౓࡞Δ͔ʁ ˠ ͍΍ແཧɺࢮ͵ Browser FW FW … ☠ FW React
  9. FW … ☠ ࣄނͷܦҢ  ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ Browser Angular 1 •೥

    3FBDU͕രൃతʹීٴ • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ • ৽͍͠ϑϨʔϜϫʔΫ༻ͷ࣮૷Λͦͷ౎౓࡞Δ͔ʁ ˠ ͍΍ແཧɺࢮ͵ Browser FW FW ͱ͍͏͜ͱͰ React
  10. Browser ࣄނͷܦҢ  ൈ͚ಓʢ8FC$PNQPOFOUTʣͷ׆༻ <a> <img> <div> • ෳ਺ϑϨʔϜϫʔΫରԠʹ͸ 8FC$PNQPOFOUT͕ར༻Մೳ

    • "OHVMBS౳ͷ '8ʹґଘ͠ͳ͍ ඪ४ ͷϒϥ΢β "1*ͭ
  11. Browser ࣄނͷܦҢ  8FC$PNQPOFOUTʹΑΔ࠶ར༻ՄೳԽ <a> <img> <div> <ons-toolbar> <ons-button> Angular

    1 <img> <div> • "OHVMBSσΟϨΫςΟϒΛࣺͯɺ $VTUPN&MFNFOUTͰ࠶࣮૷ ഁغ ϒϥ΢βΛ্ॻ͖ ʢΧελϜཁૉΛొ࿥ʣ ʢ৽ͨʹ࣮૷ʣ ͜ΕͰͲΜͳϑϨʔϜϫʔΫͰ΋࢖͑Δ
  12. ୈͷࣄނ  3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ Browser <a> <ons-toolbar> <ons-button> <img> <div> React

    ΞϓϦ render() { return ( <ons-navigator> <ons-page> <ons-toolbar> <div className='center'> Page 1 </div> </ons-toolbar> <p>This is the first page.</p> <ons-button>Push page</ons-button> </ons-page> </ons-navigator> ); } ˞ޡͬͨྫ
  13. ୈͷࣄނ  3FBDUͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ Browser <a> <ons-toolbar> <ons-button> <img> <div> ΞϓϦ

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

    • ෼͔ͬͨ͜ͱ • 7JSUVBM%0.౳ͷෳࡶͳػೳΛੵΜͩ '8Ͱ͸ ϑϨʔϜϫʔΫόΠϯσΟϯά ͷ༻ҙ͕ඞཁͳ৔߹͕͋Δ 3FBDUόΠϯσΟϯά %0.ཁૉΛ୅ΘΓʹୟ͍ͯ͘ΕΔ 3FBDUίϯϙʔωϯτ܈ ʢ/BWJHBUPS 5PPMCBS #VUUPOʜʣ ΞϓϦ͸͜ΕΛ࢖ͬͯॻ͘ render() { return ( <Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> ); } ਖ਼͍͠ྫ React ,OPDLPVUKT ʹ͸ෆཁ
  15. ୈͷࣄނ  "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ Browser <a> <ons-toolbar> <ons-button> <img> <div> 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 όΠϯσΟϯά
  16. ୈͷࣄނ  "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ Browser <a> <ons-toolbar> <ons-button> <img> <div> 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 όΠϯσΟϯά
  17. ୈͷࣄނ  "OHVMBSͰ࢖͓͏ͱͯ͠Έͨͱ͜Ζ Browser <a> <ons-toolbar> <ons-button> <img> <div> 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ϑϨʔϜϫʔΫͱͷؒͰ͸ ίϯϙʔωϯτϥΠϑαΠΫϧ͕িಥ͢Δ৔߹͕͋Δ
  18. ·ͱΊ8FC$PNQPOFOUT͸ʢ৚݅෇͖Ͱʣ͍͍ͧ • 8FC$PNQPOFOUTΛ࢖͏ͱ ෳ਺ϑϨʔϜϫʔΫରԠ͕Ͱ͖Δ • ៉ྷʹ͸͍͔ͣɺ  ϑϨʔϜϫʔΫόΠϯσΟϯάͷ༻ҙ  ίϯϙʔωϯτϥΠϑαΠΫϧͷিಥ΁ͷରॲ

    ͕ඞཁʹͳΔʢ͜ͱ΋͋Δʣ • ͔͠͠όΠϯσΟϯάΛͪΐͬͱॻ͚ͩ͘Ͱ ৽ϑϨʔϜϫʔΫʹରԠͰ͖ΔͷͰɺ ಓ۩ͱͯ͠͸ ͱͯ΋ྑ͍
  19. ͳΜ͔͖ͨ

  20. ͳΜ͔͖ͨ Vue.js

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

  22. 0OTFO 6*༻ 7VFKT όΠϯσΟϯά Browser <a> <ons-toolbar> <ons-button> <img> <div>

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

    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