onsen ui 2 開発における js フレームワーク衝突事例集
Post on 08-Jan-2017
215 views
TRANSCRIPT
![Page 1: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/1.jpg)
2016/11/28 dots. フロントエンドエンジニア部創⽴ビアバッシュ & LT会
![Page 2: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/2.jpg)
•
![Page 3: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/3.jpg)
•
•
•
•
×
○
![Page 4: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/4.jpg)
•
![Page 5: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/5.jpg)
Browser
Angular 1
•
• onsToolbar
• onsButton
• …
![Page 6: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/6.jpg)
Browser
React
⁉
Browser
Angular 1
•
![Page 7: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/7.jpg)
BrowserBrowser
Angular 1
•
•
React
![Page 8: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/8.jpg)
Browser
Angular 1
•
•
•
Browser
FW FW
…
☠
FWReact
![Page 9: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/9.jpg)
FW
…
☠
Browser
Angular 1
•
•
•
Browser
FW FWReact
![Page 10: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/10.jpg)
Browser
<a><img><div>
•
•
![Page 11: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/11.jpg)
Browser
<a>
<img><div>
<ons-toolbar>
<ons-button>
Angular 1
<img><div>
•
![Page 12: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/12.jpg)
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> ); }
![Page 13: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/13.jpg)
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
![Page 14: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/14.jpg)
Browser
<a> <ons-toolbar>
<ons-button>
<img><div>
••
render() {return (
<Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> ); }
React
![Page 15: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/15.jpg)
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() { // } }
![Page 16: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/16.jpg)
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() { // } }
![Page 17: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/17.jpg)
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() { // } }
••
![Page 18: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/18.jpg)
•
•
•
![Page 19: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/19.jpg)
![Page 20: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/20.jpg)
Vue.js
![Page 21: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/21.jpg)
•
http://www.timqian.com/star-history/
![Page 22: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/22.jpg)
Browser
<a> <ons-toolbar>
<ons-button>
<img><div>
Vue.js 2
••
![Page 23: Onsen UI 2 開発における JS フレームワーク衝突事例集](https://reader034.vdocuments.net/reader034/viewer/2022042505/5871b0701a28abda6a8b67d3/html5/thumbnails/23.jpg)
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