![Virtual DOMで画面を組み立てる
var HelloWorld = React.createClass({
getInitialState: function() {
return { message: 'Hello World' };
},
onClick: function() {
var messages = ['Hello World!', 'Hello HTML5 Conference', 'Hello React!'];
var message = messages[Math.floor(Math.random() * 3)];
this.setState({ message: message });
},
render: function() {
return (
<div>
<p>{ this.state.message } />
<p><input type="button" onClick={ this.onClick } value="ようこそ、Reactの世界へ！"/></p>
</div>
);
}
});
JavaScript（JSX）で
表現されたDOM](https://image.slidesharecdn.com/html5js-160905031413/85/Html5-JS-24-320.jpg)
Html5/JSモバイルアプリ最前線
- 8. 簡単に歴史から 2011年：Titanium vs. PhoneGap Titanium: masuidriveさん、id:naoya、JustSystem浮川さん、事例にいとまが無い PhoneGap: 認知度も事例も微妙。ユーザーも伸び悩み。Monaca登場。 2012年：AdobeがPhoneGapを作っていたNitobiを買収し、Cordovaが誕生。Apacheに。 2013年：IonicやOnsen UIが登場。じわじわCordovaが広がっていく。 2014年：Electronの前進であるAtom Shellが登場。デスクトップ向け。 2015年：React Native登場。すぐに熱狂的なファンが集まり、一躍メジャープレイヤーに。 今年：Angular 2に対応したNativeScriptも徐々に注目され、より選択肢が増えていく... ※ 非JSのXamarinや、プロダクトではない「Progressive Web Apps」は除いています
- 9. Cordovaについて
- 10. Cordovaとは？ ● Web技術とネイティブ技術の合わせ技。 ● WebViewを用いてUIを表現する。 ● 様々なモバイルOS※ に向けて完全なクロスプラッ トフォームアプリを作れる。 ※: Android, iOS, Windows, Blackberry, Ubuntu, Firefox OS, Web OS, FireOS
- 11. Cordova開発チーム
- 13. Cordovaの特徴 ● WebViewなのでWebの開発そのもの ● 完全なクロスプラットフォーム開発 ● 多くのソリューションで採用
- 15. 課題 パフォーマンス
- 16. 主な理由 ■ WebViewのレンダリングが遅い ■ フレームワークが遅い ■ アプリが60fpsに最適化されていない
- 17. WKWebView、Crosswalkへの切り替え $ # iOSでWKWebViewエンジンを用いる $ cordova plugin add cordova-plugin-wkwebview-engine $ # AndroidでBlinkエンジンを用いる $ cordova plugin add cordova-plugin-crosswalk-webview
- 21. Angular 2とReact ● フルスタックフレームワーク ● TypeScriptがほぼ必須 ● UI用のライブラリ ● ReduxやMobxなどと組み合わせる ● Virtual DOM ● CSSのカプセル化 ● モダンな実装 ● Universal JavaScript
- 23. Reactとは Facebookが開発するVirtual DOMフレームワーク React Nativeアプリの例 イベントダッシュボード ReactとReact Native ● ReactJSはJavaScriptライブラリ。フロントエンドと サーバーサイドレンダリングの両方に対応。 ● React NativeはReactJSを用いてモバイルアプリを 開発するためのフレームワーク。
- 24. Virtual DOMで画面を組み立てる var HelloWorld = React.createClass({ getInitialState: function() { return { message: 'Hello World' }; }, onClick: function() { var messages = ['Hello World!', 'Hello HTML5 Conference', 'Hello React!']; var message = messages[Math.floor(Math.random() * 3)]; this.setState({ message: message }); }, render: function() { return ( <div> <p>{ this.state.message } /> <p><input type="button" onClick={ this.onClick } value="ようこそ、Reactの世界へ！"/></p> </div> ); } }); JavaScript（JSX）で 表現されたDOM
- 25. ReactDOMとReact Native React ReactDOM React Native Reactのレンダラーとして、 ブラウザー（DOM）を使うかReact Nativeを使うかの違い
- 26. React Nativeの特徴 ● Learn once, write anywhere. ● ネイティブUIをiOS/Android/Win別に実装 ● React.js開発に慣れていれば簡単
- 27. React Nativeのコンポーネント ● <p>も<div>も<button>もすべてネイティブUI。 ● CSSもパースされネイティブウィジェットで描画。 ● 開発者は自分でコンポーネントを開発できるほか、多くの コンポーネントがレジストリに掲載されている。 コンポーネント検索 https://JS.coach
- 29. Reactクローンも多い Weex Framework ● React Nativeをフォークしたフレームワーク、Alibaba開発 ● Vue 2.0ではネイティブレンダリングとしてサポートされるようです Riot.js ● Reactライクなライブラリで、Reactと比べてコードがシンプルに ● ES6で記述できるので取っつきやすい
- 30. 課題 パフォーマンス
- 32. ReactDOM＋Cordova ● WebView（HTML＋CSS）を使用した、自由なUI実装 ● ほかのWebライブラリを組み合わせることができる http://touchstonejs.io/ https://onsen.io/react/
- 34. Progressive Web Appsの特徴 ● Service Workersをネイティブ層として使用 ● ブラウザ自体をネイティブアプリに近づける ● iOSに未対応（Under Consideration） ● 考え方はハイブリッドアプリに近い PhoneGap is cease to exist, but not yet？
- 35. 3者の比較
- 36. Cordova React Native Progressive Web Apps 開発チーム Apacheコミュニティ MS、Adobeが中心 Facebook Google Chrome & Polymer UIの記述 HTML、CSS React Component HTML、CSS JSフレームワーク 制限なし React 制限なし パフォーマンス △ ○ △ デバイス機能 ○ ○ △ 配布手段 アプリストア アプリストア Webサイト 対応端末 iOS、Android、Win Univ. iOS、Android、Win Univ. Android 共通：どれもツールは充実しており、無料で手軽に始められる。
- 37. 所感 ● Cordova: すでに太いレールが敷かれているが、新しさはない ● React Native: 皆がバラバラにレールを敷いているが、刺激的で活発 ● Progressive Apps: 難しさがないため広がりに期待 実際に試すことで、 メリット・デメリットが見えてくると思います
- 38. 時間があればデモ
- 39. Cordovaことはじめ $ npm -g install cordova $ cordova create helloworld $ cd helloworld $ cordova add platform ios $ cordova add platform android $ cordova serve # HTTPサーバー経由で配信 $ cordova build # アプリをビルド
- 40. Cordova上でUIフレームワークを使用する Monaca CLIを通じてOnsen UIを使った例： $ npm install -g monaca $ monaca create helloworld ? Choose a category: (Use arrow keys: ↑ ↓ →) > Onsen UI and Angular 2 Onsen UI and React Ionic Sample Apps $ monaca preview # HTTPサーバーで表示 $ monaca debug # 実機デバッグ $ monaca remote build ios # リモートビルド ホットリロードに対応
- 41. React Native編 $ npm install -g react-native-cli $ react-native init helloworld # iOSアプリを実行する $ react-native run-ios # Androidアプリを実行する $ react-native run-android
- 42. ありがとうございました