170613-React-case

Transcript

1. 話題のReactを学ぶならココ！ 超初心者でも分かるReact入門&ハンズオン DOMO presents
2. 会社紹介 スマートフォンサイト最適化 タイアップ企画・制作 教育事業
3. React勉強方法＆ Mobifyの紹介
4. 参考：React勉強方法 • 公式のドキュメント、チュートリアル： https://facebook.github.io/react/ • 書籍（刊行順） ◦ 入門 React ―コンポーネントベースの Webフロントエンド開発 2015/4/3 ◦ JavaScript フレームワーク入門 2016/9/15 ◦ Webデベロッパーのための React開発入門: JavaScript UIライブラリの基本と活用 2016/11/25 ◦ WEB+DB PRESS Vol.97 (Reactで作るシングルページアプリケーション入門 ) 2017/2/24 ◦ ☆Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 2017/3/11 ☆おすすめ。新しい記法に対応。環境構築や周辺ツールの説明も豊富。 ◦ Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう 2017/3/28 UIの構築にReactを採用している。 Firebaseとの連携サンプルがある。記法も新し い。
5. 参考：React勉強方法２ • 動画 ◦ React for Beginners（https://reactforbeginners.com/） • Create React App (https://github.com/facebookincubator/create-react-app) ◦ 2016年7月にリリースされた簡単に環境構築するFacebook公式ツール ◦ Create React apps with no build configuration ◦ 環境構築ツールとして脅威のGithubStar 27,082 ◦ githubスター数の推移(http://andrewhfarmer.com/create-react-app/) • UIコンポーネントライブラリ ◦ Best UI Frameworks for your new React.js App. (https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651) 有名なMaterial-UI以外にもいくつか紹介されている
7. モバイルWeb スピード パフォーマンス
9. Progressive Web Apps High Performance Mobile Web Push Notifications AMP Store Integrations
10. 10 ▪ 画面ベースのWebアプリからAPIベースのSingle Page Applicationへの進化 MobifyのPWA Progressive Mobile WebによるSPA化 • 開発：期間短縮 => 通常より低いコスト • メンテナンス：容易 • 柔軟性：高い • パフォーマンス：２〜４倍高速 => CVR、AOVの向上 メリット
11. 11 ▪ React：ビューを生成 ▪ Redux：ステートを管理 ▪ Node.js/ Webpack/Babel/ES6 ：開発環境 ▪ Mobify Cloud：クラウドベースのインフラ ↓ これらの技術を利用して WebサイトをSPA化する PMWのテクノロジー • 豊富なコンポーネント • UI設計をスピーディに • 全体のパフォーマンスアップ • Mobifyのプラグイン導入による拡張（プッシュ、決済、コン テンツ、位置情報、AI、etc…） 技術的メリット
12. 12 特徴 HTML5 CSS3 ES6 React Redux Babel Webpack Reactベースのフレームワーク
13. 13 豊富なコンポーネント AccordionItemContent AccordionItem Accordion Badge Banner Breadcrumbs Button CardInput CarouselItem Carousel DangerousHTML Divider ExpiryDate Feedback …
14. 14 プラットフォームへの拡張
15. Google I/O17で紹介
16. 5/24 PWAサービス提供開始
17. Reactデベロッパー募集中！