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

2016/11/28 dots. フロントエンドエンジニア部創⽴ビアバッシュ & LT会

•

•

•

•

•

×

○

•

Browser

Angular 1

•

• onsToolbar

• onsButton

• …

Browser

React

⁉

Browser

Angular 1

•

BrowserBrowser

Angular 1

•

•

React

Browser

Angular 1

•

•

•

Browser

FW FW

…

☠

FWReact

FW

…

☠

Browser

Angular 1

•

•

•

Browser

FW FWReact

Browser

<a><img><div>

•

•

Browser

<a>

<img><div>

<ons-toolbar>

<ons-button>

Angular 1

<img><div>

•

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> ); }

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

Browser

<a> <ons-toolbar>

<ons-button>

<img><div>

••

render() {return (

<Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> ); }

React

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() { // } }

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() { // } }

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() { // } }

••

•

•

•

Vue.js

•

http://www.timqian.com/star-history/

Browser

<a> <ons-toolbar>

<ons-button>

<img><div>

Vue.js 2

••

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