Successfully reported this slideshow.
Your SlideShare is downloading. ×

React系(別言語含む)の サーバーサイドレンダリング について考えよう

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Re-frame and A-Frame
Re-frame and A-Frame
Loading in …3
×

Check these out next

1 of 29 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to React系(別言語含む)の サーバーサイドレンダリング について考えよう (20)

More from Kazuhiro Hara (20)

Advertisement

Recently uploaded (20)

React系(別言語含む)の サーバーサイドレンダリング について考えよう

  1. 1. React系(別言語含む)の サーバーサイドレンダリング について考えよう SPAとSSR、現実解について考えてみる 2016/10/07 Okachi.js vol.0
  2. 2. 登壇者 {:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
  3. 3. Clojure / ClojureScript でElectronアプリケーションを 作るためのスターターキット / プラットホーム ● オープンソースにてGitHubにて公開 ● MITライセンス ● 現在のスター数 : 230 http://descjop.org/
  4. 4. 先週、こんな発表をしました http://www.slideshare.net/karadweb/clojure-react
  5. 5. React系のサーバーサイドレンダリングについて ● そもそもサーバーサイドレンダリングって何さ? ○ というかSPAって何? ○ 以下SSRとだけ書きます ● SSRどこが使っているか? ● SSRやってみたことある? ○ システム構成図、従来の Webアプリとの違い ○ Node.jsをサーバにしないケースのパターンについて ● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分 ● SSRが有効なサイト、あまりよくないサイト
  6. 6. SPAとSSR って何?話
  7. 7. SPAについて ● シングルページWebアプリケーション(SPA)は、 最近注目を集めている Webアプリケーションのアーキテクチャです。 SPAは、ユーザがアプリケーションを使っている間、 Webページ全体をロードすることがなく、 レスポンスが高速で UI/UXに優れているという利点を持っています。 かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、 近年ではJavaScriptを使ったSPAが現実的になってきています。 http://www.oreilly.co.jp/books/9784873116730/
  8. 8. SPAの例 Pintarest https://jp.pinterest.com/
  9. 9. SSR(サーバーサイドレンダリング)について (Reactベースのアプリケーションの文脈で) ● Webアプリケーションに用意されているURLにアクセスした時に、 DOMの構築をフロントエンド側で行うと、一瞬表示されていない状態になる ● 初期表示状態が決まっているなら、 サーバー側で初期状態のDOMレンダリングを完了した状態で返せばいい ● 共通の半描画状態の画面を出したりローディング画像を出すアプローチもある
  10. 10. なぜSSRなのか?について ● URLに対する情報のアクセシビリティ・セマンティック性を確保しておく ○ ブラウザを通したURLに対するアクセシビリティ・セマンティック性とは少し別 ○ SEOの問題はあまり心配しなくていいらしい (自分で実験したわけではない ) ● パフォーマンスの問題 ○ ブラウザでURLを直接アクセスした時に表示が完了するまでの時間の短縮化
  11. 11. SSRと一口に言っても? ● React標準のスタイルでサポートされているやり方 ○ react-dom/serverを使う ■ https://facebook.github.io/react/docs/environments.html ● 上記と同じことを他言語環境でエミュレートする ● せめてJSON部分だけHTMLに埋め込む ○ TwitterやFacebookなど ● 原始的に出力するdivを切り分けて読み込み後は元のdivを消すとか... <div id=”ssr”> ここにサーバーで出力した結果を埋め込む </div> <div id=”react-app”> ここはReactが使う</div>
  12. 12. アーキテクチャの違い(ざっくり) 従来のWebApp APIベースのWebApp SSR込みのWebApp WebApp & View BrowserHTML WebApp & JSON & layout Browser Base HTML JSON WebApp & View BrowserHTML WebApp & JSON & layout BrowserJSON URLアクセス時 URLアクセス時 URLアクセス時 画面遷移時
  13. 13. そもそもSSRする必要があるのか? ある ない Reactで複雑な状態遷移を扱うようなことが前提のWebアプリケーションなら、 Accessible Rich Internet Applications(WEI-ARIA)を全力で頑張る方向に 倒したほうが良くないか? ☞
  14. 14. なぜn言語(JavaScript以外)でのSSRは難しいか n言語に限らず難しい問題(react-rails, React.NET, react-python, react-php-v8jsなど は公式に出ている...) ● Reactのレンダリングは、同一のものをHTMLに埋め込んで返せばいい訳ではない ○ data-reactidの指定と、data-react-checksumの指定が必要 ○ data-reactidを埋め込んだHTMLに対してadler32でチェックサムを作成 ○ ただ、0.14.0 -> 15.0で少し変更があった (data-reactidベースからdata-reactrootベースへ) ■ https://facebook.github.io/react/blog/2016/04/07/react-v15.html ● Reactと違うエコシステム、違うテンプレートスタイル
  15. 15. Java系での実装方法 大きく分けて2種類 ● 独自にReactのdomを再実装 ● Javaのnashornを利用 ● 別の道... Node.jsサーバーを立てる
  16. 16. SSRどこ使話
  17. 17. SSR採用サイト IDEO https://www.ideo.com/jp/
  18. 18. SSR採用サイト Netflix https://www.netflix.com/jp/
  19. 19. SSR使っていない例 Instagram https://www.instagram.com/
  20. 20. その他、SSR使っているところ 知ってたら教えてください!(ここに書きます)
  21. 21. SSRやってみたことある話
  22. 22. SSRやってみた方 ● どんなやり方で? ● どういうタイプのサイトで?
  23. 23. 原の場合(要参照) http://www.slideshare.net/karadweb/clojure-react
  24. 24. SSRのアリ、ナシ、 メリットデメリット、 コスト感、難しそうな部分
  25. 25. アリ、ナシ、メリットデメリット、コスト感、難しそう? ● みんなで考えてみましょう HTML CSS Client / JSServer / JSServer / TmplServer / CtrlServer / Model
  26. 26. SSRどこで活きるのか
  27. 27. SSRが有効なサイト、あまりよくないサイトまとめ ● みんなで考えてみましょう
  28. 28. Okachi.js 第1回目の予定 2016/11/18 Okachi.js vol.1
  29. 29. Okachi.js vol.1 なにやる? ● React Nativeアプリ -> [日野さん] ● Electron ● ハイブリッドiPhone & Android ● Web VR -> [原話す、ちょっとだけ] ● npmパッケージマネージャー(橋本氏ライブラリリリース) ● Virtual Domコード・リーディング ● SPA(WAI-ARIA) -> [] ● Swift(?) -> Okachi.swiftにて ● Angular JS 2.0 ● Node Red -> [永井さん、ちょっとだけ] ● Plone のフロントエンド -> [寺田さん] ● サーバーレス系 : firebase ● プログレッシブWebアプリ ● HTTP2 ● Service Worker

×