以下の内容についてまとめました。 * Reactとはなにか * Reactを選ぶ理由は何か * DrupalとReactの組み合わせ構成 技術的詳細は一切出てきません、スーツの方向けの内容です。

1. Reactで作る
Drupalサイト
Drupal梅田 #2
2018/02/19
渡辺俊輔@craftgear

2. Reactとは facebookが開発し、オープンソースとして公開
しているUI開発用ライブラリ。
シンプルな設計と豊富なエコシステムを備え、
Single Page Application 作成用ライブラリとし
てトップシェアを占める。
ベンチャーからfortune500企業まで、世界中
で利用者多数。

3. Single
Page
Application
AjaxからSPAへ
Asynchronous javascript and
XMLHttpRequest (2005)
同時期にリリースされたRuby on Railsでも採
用され、RoR普及と相まって一般へ。
部分的なUIの更新が徐々にページ全体、サイ
ト全体へと拡大されてゆき、Single Page
Applicationと呼ばれるようになった。

4. ➔ 軽快な操作性によるユーザー体験の向上
➔ 自社サービスに合わせたUIの作り込みを容易にする
➔ プロプライエタリな独自技術を必要としない
➔ UIとバックエンドの分離開発
SPAのメリット

5. ➔ コードが複雑になる
➔ DOM操作が重い
➔ SEOで不利
SPAのデメリット

6. ライブラリが進化
2005
2006
2009
2010
2011
2013
2014
2016
Ajax / RoR
jQuery
AngularJS
Backbone
Web Components
React / Polymer
Vuejs
Angular2
(Safariがflashのサポートを終了)
モジュール化
コンポーネント化
VirtualDOM

7. なぜReactか

8. 一番食えそうだから

9. 1
HNTrends
https://www.hntrends.com/
YCombinatorが運営するテック系フォーラム
HackerNewsでの求人動向をまとめたもの

12. 採用実績
https://github.com/facebook/react/wik
i/Sites-Using-React

13. Nativeへの展開
https://facebook.github.io/react-native/

14. John Resig曰く
「ほとんどReact使ってるよ」
jQuery作者もすなるReact

15. ヘッドレス
あるいはデカップルドとは

16. CMSから描画機能を省いたもの
要はAPIサーバのこと
(REST/GraphQL)

17. Resevoir
https://github.com/acquia/reservoir
詳しくはDrupalマガジン雫のこちらの記事へ
http://shizuku.io/about-reservoir

18. デモ

19. デモの構成

20. Questions?