Download - 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