170613-React-case

5a3b7a1116982e5443fcd627bbf542b8?s=47 nakazawa
June 15, 2017
130

 170613-React-case

5a3b7a1116982e5443fcd627bbf542b8?s=128

nakazawa

June 15, 2017
Tweet

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勉強方法2 • 動画 ◦ 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以外にもいくつか紹介されている
  6. None
  7. モバイルWeb スピード パフォーマンス

  8. None
  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化 •

    開発:期間短縮 => 通常より低いコスト • メンテナンス:容易 • 柔軟性:高い • パフォーマンス:2〜4倍高速 => 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デベロッパー募集中!