Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

623 views

Published on

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

Speaker Deck 版はこちら:
https://speakerdeck.com/n_matagawa/onsen-ui-2-kai-fa-niokeru-js-huremuwakuchong-tu-shi-li-ji

Published in: Software
  • Be the first to comment

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

  1. 1. 2016/11/28 dots. フロントエンドエンジニア部 創⽴ビアバッシュ & LT会
  2. 2.
  3. 3. • • • • × ○
  4. 4.
  5. 5. Browser Angular 1 • • onsToolbar • onsButton • …
  6. 6. Browser React ⁉ Browser Angular 1 •
  7. 7. BrowserBrowser Angular 1 • • React
  8. 8. Browser Angular 1 • • • Browser FW FW … ☠ FWReact
  9. 9. FW … ☠ Browser Angular 1 • • • Browser FW FWReact
  10. 10. Browser <a> <img> <div> • •
  11. 11. Browser <a> <img> <div> <ons-toolbar> <ons-button> Angular 1 <img> <div> •
  12. 12. 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. 13. 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> ); } React
  14. 14. Browser <a> <ons-toolbar> <ons-button> <img> <div> • • render() { return ( <Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> ); } React
  15. 15. 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() { // } }
  16. 16. 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() { // } }
  17. 17. 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() { // } } • •
  18. 18. • • •
  19. 19. Vue.js
  20. 20. • http://www.timqian.com/star-history/
  21. 21. Browser <a> <ons-toolbar> <ons-button> <img> <div> Vue.js 2 • •
  22. 22. Browser <a> <ons-toolbar> <ons-button> <img> <div> Vue.js 2 • • Thank you for listening! 既にOnsen UI を使っている⽅は是⾮ GitHub スターを〜! https://github.com/OnsenUI/OnsenUI リリースは Twitter で告知します https://twitter.com/Onsen_UI_ja

×