Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IndexedDB, Worker, Server-side Rendering そしてフロン...

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

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

OKUNOKENTARO

August 28, 2016
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

  1. • ネットワーク接続に依存しない • オフラインでも動作 • 常に最新の状態に保たれる • Progressive Enhancement・ •

    機能は性能ごとに段階的に強化される • 低性能の端末でも最新端末でも利用できる PWAの特徴
  2. • UIの部品化 • jQuery, Bootstrapなどがあった • Web標準のUI部品化に関する規格 • 現在はまだWorking Draft

    • 現時点で実装しているのはChromeのみ • PolyfillとしてライブラリPolymerが利用可能 • https://shop.polymer-project.org/ Web Components
  3. • Custom Elements・ • 既存にはない新しいHTML要素を定義できる • Templates・ • <template>タグ •

    Custom Elementsの雛形となるHTMLを定義 • Shadow DOM・ • DOMをカプセル化・ • CSSのスコープをShadow DOM内に限定 • 外部の干渉を防ぐ 主な仕様
  4. • Network Proxy・ • HTTPレスポンスを横取りできる • オフライン時の挙動を制御 • サーバ側の更新有無による適切なアクション •

    Cache API・ • キャッシュされたリソースを用いて
 オフラインでも動作する • Push API・ • Push通知の表示、制御が行える Service Workerの特徴
  5. • Googleが運営するBaaS • 基本機能 • リアルタイムに更新されるNoSQLデータベース • OAuthなどの扱いやすい認証機構 • JSやAndroid,

    iOSに向けられたSDK • 豊富なドキュメント • PWA開発でFirebaseを組み合わせる例も見かける Firebase
  6. • REST API・ • 複数のエンドポイント • /user, /photo, /comment...・ •

    HTTPリクエスト頻発 • 結果の表示順が不明 • オールインワンのエンドポイントでは? • リクエストは1回 • 重いのでユーザ体験が低下 現代のエンドポイント
  7. • クライアントでの入力 • フィールドへの入力 • クリックでの保存
 などなど… • バックエンドに送り永続化 •

    エンドポイントに適した形式へのデータ変換処理 • 前時代では考えられない厚さの
 JavaScript中間レイヤー 入力の本質
  8. • Observerパターン • Flux・ • CQRS/ES・ • リアクティブプログラミング • 与えられるまで何もするな

    • 与えられたら常に正しい反応をしろ • 他が何をしているか知る必要はない データフローの適切な扱い
  9. • ブラウザのDOM描画からの解放 • Server-side Rendering・ • 仮想DOM • React Native,

    NativeScript・ • DOMを作りたいわけじゃない • 送られてきたデータをユーザに表示したいだけ • DOMの生成手段がなんなのか • その表示先がPCブラウザか、モバイル上か • もはや問題ではない 描画の抽象化
  10. • フクシア • Googleが開発中のオープンソースOS • Linuxカーネルを使っていない • 2016年8月15日にひっそりと公開 • Flutter・

    • インタフェース用フレームワーク • Dart・ • ポストJavaScriptを目的に設計された言語 Fuchsia