Reactで作るDrupalサイト

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

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

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

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

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

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

なぜReactか

一番食えそうだから

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

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

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

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

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

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

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

デモ

デモの構成

Questions?

Reactで作るDrupalサイト

Reactで作るDrupalサイト

Shunsuke Watanabe

More Decks by Shunsuke Watanabe

Other Decks in Programming

Featured

Transcript