Reactで作るDrupalサイト

Transcript

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?