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

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

2. •

3. •
•
•
•
×
○

4. •

5. Browser
Angular 1
•
• onsToolbar
• onsButton
• …

6. Browser
React
⁉
Browser
Angular 1
•

7. BrowserBrowser
Angular 1
•
•
React

8. Browser
Angular 1
•
•
•
Browser
FW FW
…
☠
FWReact

9. FW
…
☠
Browser
Angular 1
•
•
•
Browser
FW FWReact

10. Browser
<a>
<img>
<div>
•
•

11. Browser
<a>
<img>
<div>
<ons-toolbar>
<ons-button>
Angular 1
<img>
<div>
•

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. 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. Browser
<a> <ons-toolbar>
<ons-button>
<img>
<div>
•
•
render() {
return (
<Navigator initialRoute={{component: MainPage}}
renderPage={this.renderPage} />
);
}
React

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. 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. 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. •
•
•

20. Vue.js

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

22. Browser
<a> <ons-toolbar>
<ons-button>
<img>
<div>
Vue.js 2
•
•

23. 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