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

Slide 1

Slide 1 text

IndexedDB, Worker, Server-side Rendereing  そしてフロントエンドの未来 Aug 28, 2016 / GRAND FRONTEND OSAKA 2016 @armorik83

Slide 2

Slide 2 text

奥野賢太郎 @armorik83 フロントエンドエンジニア ng-kyoto代表

Slide 3

Slide 3 text

• フロントエンド界隈で最近聞くワード • 今後学びやすくするために広く浅く紹介 • フロントエンドの本質とは • 未来はどうなるのか？ • 未来を受け入れるためには？今日する話

Slide 4

Slide 4 text

最近気になるワード

Slide 5

Slide 5 text

最近気になるワード • PWA • GraphQL • Server-side Rendering

Slide 6

Slide 6 text

• Progressive Web Apps・ • ウェブとアプリの両方の利点を兼ね備える • Google I/O 2016でも多くの時間を割かれた PWA

Slide 7

Slide 7 text

• ネットワーク接続に依存しない • オフラインでも動作 • 常に最新の状態に保たれる • Progressive Enhancement・ • 機能は性能ごとに段階的に強化される • 低性能の端末でも最新端末でも利用できる PWAの特徴

Slide 8

Slide 8 text

• Web Components • Service Worker • IndexedDB PWA界隈でよく聞く用語

Slide 9

Slide 9 text

• UIの部品化 • jQuery, Bootstrapなどがあった • Web標準のUI部品化に関する規格 • 現在はまだWorking Draft • 現時点で実装しているのはChromeのみ • PolyfillとしてライブラリPolymerが利用可能 • https://shop.polymer-project.org/ Web Components

Slide 10

Slide 10 text

• Custom Elements・ • 既存にはない新しいHTML要素を定義できる • Templates・ • タグ • Custom Elementsの雛形となるHTMLを定義 • Shadow DOM・ • DOMをカプセル化・ • CSSのスコープをShadow DOM内に限定 • 外部の干渉を防ぐ主な仕様

Slide 11

Slide 11 text

• Web Workerの一種・ • 他には • Shared Worker・ • Audio Worker・  など Service Worker

Slide 12

Slide 12 text

• 処理をメインとは別のスレッドに移す • バックグラウンドでの実行を可能に • UIを担当するメインスレッドの処理を  中断・遅延させずに実行できるという利点 • Web WorkerからDOMにはアクセスできないそもそもWeb Workerとは

Slide 13

Slide 13 text

• Network Proxy・ • HTTPレスポンスを横取りできる • オフライン時の挙動を制御 • サーバ側の更新有無による適切なアクション • Cache API・ • キャッシュされたリソースを用いて  オフラインでも動作する • Push API・ • Push通知の表示、制御が行える Service Workerの特徴

Slide 14

Slide 14 text

• ブラウザ内で扱える永続化用のインタフェースAPI • インデックスやトランザクションを扱える • スキーマに関してversionという概念がある • APIは低級 • Dexie.jsなどのライブラリを介したほうが扱いやすい IndexedDB

Slide 15

Slide 15 text

• Googleが運営するBaaS • 基本機能 • リアルタイムに更新されるNoSQLデータベース • OAuthなどの扱いやすい認証機構 • JSやAndroid, iOSに向けられたSDK • 豊富なドキュメント • PWA開発でFirebaseを組み合わせる例も見かける Firebase

Slide 16

Slide 16 text

✔ PWA • GraphQL • Server-side Rendering 最近気になるワード

Slide 17

Slide 17 text

• クエリ言語 • Facebookによって開発 • 仕様書を公開 • RFCドラフト • W3Cによるものではないが注目の仕様 GraphQL

Slide 18

Slide 18 text

• REST API・ • 複数のエンドポイント • /user, /photo, /comment...・ • HTTPリクエスト頻発 • 結果の表示順が不明 • オールインワンのエンドポイントでは？ • リクエストは1回 • 重いのでユーザ体験が低下現代のエンドポイント

Slide 19

Slide 19 text

• JSONに似た形式でクエリを記述 • クエリ構造と同形式のデータ構造で返ってくる • 描画に必要な情報を無駄なく取得 • Relay・ • ReactやGraphQLを横断的に扱えるフレームワーク • Facebook社のInstagramはRelayで開発 GraphQLの特徴

Slide 20

Slide 20 text

• SPAの欠点 • 空のHTML内にJSフレームワークがDOMを生成 • 生成には時間がかかる • 初期ビューは可能な限り高速に表示すべき • SEOの観点での懸念 • フロントエンドが生成するDOMはクロールできないなぜServer-side Rendering

Slide 21

Slide 21 text

• バックエンドでHTMLを生成してから返す • DOM生成コストの短縮 • 生成内容がバックエンドの時点で確定している • クローリング対象となる • 現代の需要に対して答えるための側面が強い • 未来感は無いがトレンド Server-side Rendering

Slide 22

Slide 22 text

フロントエンドの本質

Slide 23

Slide 23 text

• 出力 • バックエンドからのデータをユーザに提供したい • 入力 • バックエンドに送り永続化したいフロントエンドの本質

Slide 24

Slide 24 text

• バックエンドからのデータをユーザに提供 • 大量のデータ • 適切な粒度で画面に描画 • マークアップによる整合性 • デザインによる視認性 • コンポーネント指向という考え方出力の本質

Slide 25

Slide 25 text

• クライアントでの入力 • フィールドへの入力 • クリックでの保存  などなど… • バックエンドに送り永続化 • エンドポイントに適した形式へのデータ変換処理 • 前時代では考えられない厚さの  JavaScript中間レイヤー入力の本質

Slide 26

Slide 26 text

JavaScriptが書けるかどうか

Slide 27

Slide 27 text

ではない

Slide 28

Slide 28 text

• Observerパターン • Flux・ • CQRS/ES・ • リアクティブプログラミング • 与えられるまで何もするな • 与えられたら常に正しい反応をしろ • 他が何をしているか知る必要はないデータフローの適切な扱い

Slide 29

Slide 29 text

• ブラウザのDOM描画からの解放 • Server-side Rendering・ • 仮想DOM • React Native, NativeScript・ • DOMを作りたいわけじゃない • 送られてきたデータをユーザに表示したいだけ • DOMの生成手段がなんなのか • その表示先がPCブラウザか、モバイル上か • もはや問題ではない描画の抽象化

Slide 30

Slide 30 text

• 最新のWeb標準の仕様をどこまで追えるかのスキル • 自分が全部の仕様を追えなくてもいい • 追えてる人を見つけられるかのスキル • 変化を恐れないスキル Web標準への学習意欲

Slide 31

Slide 31 text

未来もJavaScriptなのだろうか

Slide 32

Slide 32 text

• フクシア • Googleが開発中のオープンソースOS • Linuxカーネルを使っていない • 2016年8月15日にひっそりと公開 • Flutter・ • インタフェース用フレームワーク • Dart・ • ポストJavaScriptを目的に設計された言語 Fuchsia