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. ࣄނͷܦҢ  ౰ॳͷϥΠϒϥϦઃܭ Browser Angular 1 ౰ॳ͸ ಛఆͷϑϨʔϜϫʔΫͷ֦ு ͱ࣮ͯ͠૷ •

    "OHVMBSϞδϡʔϧͱ࣮ͯ͠૷ ʢ"OHVMBSΛ֦ுʣ ΞϓϦ • onsToolbar ˞0OTFO 6*࣌୅ͷݹ͍࣮૷ͷ࿩Ͱ͢ • onsButton • … "OHVMBSσΟϨΫςΟϒ܈
  2. ࣄނͷܦҢ  ಛఆͷϑϨʔϜϫʔΫʹґଘͨ݁͠Ռʜ Browser Angular 1 •೥ 3FBDU͕രൃతʹීٴ • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ

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

    3FBDU͕രൃతʹීٴ • "OHVMBSϞδϡʔϧͷ࢖͍ճ͠͸ෆՄೳ • ৽͍͠ϑϨʔϜϫʔΫ༻ͷ࣮૷Λͦͷ౎౓࡞Δ͔ʁ ˠ ͍΍ແཧɺࢮ͵ Browser FW FW ͱ͍͏͜ͱͰ React
  4. Browser ࣄނͷܦҢ  8FC$PNQPOFOUTʹΑΔ࠶ར༻ՄೳԽ <a> <img> <div> <ons-toolbar> <ons-button> Angular

    1 <img> <div> • "OHVMBSσΟϨΫςΟϒΛࣺͯɺ $VTUPN&MFNFOUTͰ࠶࣮૷ ഁغ ϒϥ΢βΛ্ॻ͖ ʢΧελϜཁૉΛొ࿥ʣ ʢ৽ͨʹ࣮૷ʣ ͜ΕͰͲΜͳϑϨʔϜϫʔΫͰ΋࢖͑Δ
  5. ୈͷࣄނ  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> ); } ˞ޡͬͨྫ
  6. ୈͷࣄނ  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
  7. ୈͷࣄނ  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 ʹ͸ෆཁ
  8. ୈͷࣄނ  "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 όΠϯσΟϯά
  9. ୈͷࣄނ  "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 όΠϯσΟϯά
  10. ୈͷࣄނ  "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ϑϨʔϜϫʔΫͱͷؒͰ͸ ίϯϙʔωϯτϥΠϑαΠΫϧ͕িಥ͢Δ৔߹͕͋Δ
  11. 0OTFO 6*༻ 7VFKT όΠϯσΟϯά Browser <a> <ons-toolbar> <ons-button> <img> <div>

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