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
   ͸͍͍ͧ ΞγΞϧגࣜձࣾ ຢ઒ ঘथ
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)VC
    TUBS
    Λ৳͹͍ͯ͠ΔϑϨʔϜϫʔΫ ग़య
    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