IndexedDB, Worker, Server-side Rendering そしてフロントエンドの未来

GRAND FRONTEND OSAKA 2016にて発表した登壇資料です。

Transcript

1. IndexedDB, Worker, Server-side Rendereing
 そしてフロントエンドの未来 Aug 28, 2016 / GRAND FRONTEND OSAKA 2016 @armorik83
2. 奥野 賢太郎 @armorik83 フロントエンドエンジニア ng-kyoto代表
3. • フロントエンド界隈で最近聞くワード • 今後学びやすくするために広く浅く紹介 • フロントエンドの本質とは • 未来はどうなるのか？ • 未来を受け入れるためには？ 今日する話
4. 最近気になるワード
5. 最近気になるワード • PWA • GraphQL • Server-side Rendering
6. • Progressive Web Apps・ • ウェブとアプリの両方の利点を兼ね備える • Google I/O 2016でも多くの時間を割かれた PWA
7. • ネットワーク接続に依存しない • オフラインでも動作 • 常に最新の状態に保たれる • Progressive Enhancement・ • 機能は性能ごとに段階的に強化される • 低性能の端末でも最新端末でも利用できる PWAの特徴
8. • Web Components • Service Worker • IndexedDB PWA界隈でよく聞く用語
9. • UIの部品化 • jQuery, Bootstrapなどがあった • Web標準のUI部品化に関する規格 • 現在はまだWorking Draft • 現時点で実装しているのはChromeのみ • PolyfillとしてライブラリPolymerが利用可能 • https://shop.polymer-project.org/ Web Components
10. • Custom Elements・ • 既存にはない新しいHTML要素を定義できる • Templates・ • <template>タグ • Custom Elementsの雛形となるHTMLを定義 • Shadow DOM・ • DOMをカプセル化・ • CSSのスコープをShadow DOM内に限定 • 外部の干渉を防ぐ 主な仕様
11. • Web Workerの一種・ • 他には • Shared Worker・ • Audio Worker・
 など Service Worker
12. • 処理をメインとは別のスレッドに移す • バックグラウンドでの実行を可能に • UIを担当するメインスレッドの処理を
 中断・遅延させずに実行できるという利点 • Web WorkerからDOMにはアクセスできない そもそもWeb Workerとは
13. • Network Proxy・ • HTTPレスポンスを横取りできる • オフライン時の挙動を制御 • サーバ側の更新有無による適切なアクション • Cache API・ • キャッシュされたリソースを用いて
 オフラインでも動作する • Push API・ • Push通知の表示、制御が行える Service Workerの特徴
14. • ブラウザ内で扱える永続化用のインタフェースAPI • インデックスやトランザクションを扱える • スキーマに関してversionという概念がある • APIは低級 • Dexie.jsなどのライブラリを介したほうが扱いやすい IndexedDB
15. • Googleが運営するBaaS • 基本機能 • リアルタイムに更新されるNoSQLデータベース • OAuthなどの扱いやすい認証機構 • JSやAndroid, iOSに向けられたSDK • 豊富なドキュメント • PWA開発でFirebaseを組み合わせる例も見かける Firebase
16. ✔ PWA • GraphQL • Server-side Rendering 最近気になるワード
17. • クエリ言語 • Facebookによって開発 • 仕様書を公開 • RFCドラフト • W3Cによるものではないが注目の仕様 GraphQL
18. • REST API・ • 複数のエンドポイント • /user, /photo, /comment...・ • HTTPリクエスト頻発 • 結果の表示順が不明 • オールインワンのエンドポイントでは？ • リクエストは1回 • 重いのでユーザ体験が低下 現代のエンドポイント
19. • JSONに似た形式でクエリを記述 • クエリ構造と同形式のデータ構造で返ってくる • 描画に必要な情報を無駄なく取得 • Relay・ • ReactやGraphQLを横断的に扱えるフレームワーク • Facebook社のInstagramはRelayで開発 GraphQLの特徴
20. • SPAの欠点 • 空のHTML内にJSフレームワークがDOMを生成 • 生成には時間がかかる • 初期ビューは可能な限り高速に表示すべき • SEOの観点での懸念 • フロントエンドが生成するDOMはクロールできない なぜServer-side Rendering
21. • バックエンドでHTMLを生成してから返す • DOM生成コストの短縮 • 生成内容がバックエンドの時点で確定している • クローリング対象となる • 現代の需要に対して答えるための側面が強い • 未来感は無いがトレンド Server-side Rendering
22. フロントエンドの本質
23. • 出力 • バックエンドからのデータをユーザに提供したい • 入力 • バックエンドに送り永続化したい フロントエンドの本質
24. • バックエンドからのデータをユーザに提供 • 大量のデータ • 適切な粒度で画面に描画 • マークアップによる整合性 • デザインによる視認性 • コンポーネント指向という考え方 出力の本質
25. • クライアントでの入力 • フィールドへの入力 • クリックでの保存
 などなど… • バックエンドに送り永続化 • エンドポイントに適した形式へのデータ変換処理 • 前時代では考えられない厚さの
 JavaScript中間レイヤー 入力の本質
26. JavaScriptが書けるかどうか
27. ではない
28. • Observerパターン • Flux・ • CQRS/ES・ • リアクティブプログラミング • 与えられるまで何もするな • 与えられたら常に正しい反応をしろ • 他が何をしているか知る必要はない データフローの適切な扱い
29. • ブラウザのDOM描画からの解放 • Server-side Rendering・ • 仮想DOM • React Native, NativeScript・ • DOMを作りたいわけじゃない • 送られてきたデータをユーザに表示したいだけ • DOMの生成手段がなんなのか • その表示先がPCブラウザか、モバイル上か • もはや問題ではない 描画の抽象化
30. • 最新のWeb標準の仕様をどこまで追えるかのスキル • 自分が全部の仕様を追えなくてもいい • 追えてる人を見つけられるかのスキル • 変化を恐れないスキル Web標準への学習意欲
31. 未来もJavaScriptなのだろうか
32. • フクシア • Googleが開発中のオープンソースOS • Linuxカーネルを使っていない • 2016年8月15日にひっそりと公開 • Flutter・ • インタフェース用フレームワーク • Dart・ • ポストJavaScriptを目的に設計された言語 Fuchsia
33. Dart?
35. Thank you! Aug 28, 2016 / GRAND FRONTEND OSAKA 2016 @armorik83