Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IndexedDB, Worker, Server-side Rendering そしてフロントエンドの未来
Search
OKUNOKENTARO
August 28, 2016
Technology
15
2.6k
IndexedDB, Worker, Server-side Rendering そしてフロントエンドの未来
GRAND FRONTEND OSAKA 2016にて発表した登壇資料です。
OKUNOKENTARO
August 28, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
110
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.2k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
580
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
920
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.3k
Other Decks in Technology
See All in Technology
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
競技としてのKaggle、役に立つKaggle
yu4u
3
1k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
Azureの基本的な権限管理の勉強会
yhana
0
410
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
260
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
190
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
590
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The Pragmatic Product Professional
lauravandoore
25
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
BBQ
matthewcrist
80
8.8k
Teambox: Starting and Learning
jrom
128
8.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Unsuck your backbone
ammeep
663
57k
Become a Pro
speakerdeck
PRO
11
4.5k
Statistics for Hackers
jakevdp
789
220k
RailsConf 2023
tenderlove
4
540
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Transcript
IndexedDB, Worker, Server-side Rendereing そしてフロントエンドの未来 Aug 28, 2016 / GRAND
FRONTEND OSAKA 2016 @armorik83
奥野 賢太郎 @armorik83 フロントエンドエンジニア ng-kyoto代表
• フロントエンド界隈で最近聞くワード • 今後学びやすくするために広く浅く紹介 • フロントエンドの本質とは • 未来はどうなるのか? • 未来を受け入れるためには?
今日する話
最近気になるワード
最近気になるワード • PWA • GraphQL • Server-side Rendering
• Progressive Web Apps・ • ウェブとアプリの両方の利点を兼ね備える • Google I/O 2016でも多くの時間を割かれた
PWA
• ネットワーク接続に依存しない • オフラインでも動作 • 常に最新の状態に保たれる • Progressive Enhancement・ •
機能は性能ごとに段階的に強化される • 低性能の端末でも最新端末でも利用できる PWAの特徴
• Web Components • Service Worker • IndexedDB PWA界隈でよく聞く用語
• UIの部品化 • jQuery, Bootstrapなどがあった • Web標準のUI部品化に関する規格 • 現在はまだWorking Draft
• 現時点で実装しているのはChromeのみ • PolyfillとしてライブラリPolymerが利用可能 • https://shop.polymer-project.org/ Web Components
• Custom Elements・ • 既存にはない新しいHTML要素を定義できる • Templates・ • <template>タグ •
Custom Elementsの雛形となるHTMLを定義 • Shadow DOM・ • DOMをカプセル化・ • CSSのスコープをShadow DOM内に限定 • 外部の干渉を防ぐ 主な仕様
• Web Workerの一種・ • 他には • Shared Worker・ • Audio
Worker・ など Service Worker
• 処理をメインとは別のスレッドに移す • バックグラウンドでの実行を可能に • UIを担当するメインスレッドの処理を 中断・遅延させずに実行できるという利点 • Web WorkerからDOMにはアクセスできない
そもそもWeb Workerとは
• Network Proxy・ • HTTPレスポンスを横取りできる • オフライン時の挙動を制御 • サーバ側の更新有無による適切なアクション •
Cache API・ • キャッシュされたリソースを用いて オフラインでも動作する • Push API・ • Push通知の表示、制御が行える Service Workerの特徴
• ブラウザ内で扱える永続化用のインタフェースAPI • インデックスやトランザクションを扱える • スキーマに関してversionという概念がある • APIは低級 • Dexie.jsなどのライブラリを介したほうが扱いやすい
IndexedDB
• Googleが運営するBaaS • 基本機能 • リアルタイムに更新されるNoSQLデータベース • OAuthなどの扱いやすい認証機構 • JSやAndroid,
iOSに向けられたSDK • 豊富なドキュメント • PWA開発でFirebaseを組み合わせる例も見かける Firebase
✔ PWA • GraphQL • Server-side Rendering 最近気になるワード
• クエリ言語 • Facebookによって開発 • 仕様書を公開 • RFCドラフト • W3Cによるものではないが注目の仕様
GraphQL
• REST API・ • 複数のエンドポイント • /user, /photo, /comment...・ •
HTTPリクエスト頻発 • 結果の表示順が不明 • オールインワンのエンドポイントでは? • リクエストは1回 • 重いのでユーザ体験が低下 現代のエンドポイント
• JSONに似た形式でクエリを記述 • クエリ構造と同形式のデータ構造で返ってくる • 描画に必要な情報を無駄なく取得 • Relay・ • ReactやGraphQLを横断的に扱えるフレームワーク
• Facebook社のInstagramはRelayで開発 GraphQLの特徴
• SPAの欠点 • 空のHTML内にJSフレームワークがDOMを生成 • 生成には時間がかかる • 初期ビューは可能な限り高速に表示すべき • SEOの観点での懸念
• フロントエンドが生成するDOMはクロールできない なぜServer-side Rendering
• バックエンドでHTMLを生成してから返す • DOM生成コストの短縮 • 生成内容がバックエンドの時点で確定している • クローリング対象となる • 現代の需要に対して答えるための側面が強い
• 未来感は無いがトレンド Server-side Rendering
フロントエンドの本質
• 出力 • バックエンドからのデータをユーザに提供したい • 入力 • バックエンドに送り永続化したい フロントエンドの本質
• バックエンドからのデータをユーザに提供 • 大量のデータ • 適切な粒度で画面に描画 • マークアップによる整合性 • デザインによる視認性
• コンポーネント指向という考え方 出力の本質
• クライアントでの入力 • フィールドへの入力 • クリックでの保存 などなど… • バックエンドに送り永続化 •
エンドポイントに適した形式へのデータ変換処理 • 前時代では考えられない厚さの JavaScript中間レイヤー 入力の本質
JavaScriptが書けるかどうか
ではない
• Observerパターン • Flux・ • CQRS/ES・ • リアクティブプログラミング • 与えられるまで何もするな
• 与えられたら常に正しい反応をしろ • 他が何をしているか知る必要はない データフローの適切な扱い
• ブラウザのDOM描画からの解放 • Server-side Rendering・ • 仮想DOM • React Native,
NativeScript・ • DOMを作りたいわけじゃない • 送られてきたデータをユーザに表示したいだけ • DOMの生成手段がなんなのか • その表示先がPCブラウザか、モバイル上か • もはや問題ではない 描画の抽象化
• 最新のWeb標準の仕様をどこまで追えるかのスキル • 自分が全部の仕様を追えなくてもいい • 追えてる人を見つけられるかのスキル • 変化を恐れないスキル Web標準への学習意欲
未来もJavaScriptなのだろうか
• フクシア • Googleが開発中のオープンソースOS • Linuxカーネルを使っていない • 2016年8月15日にひっそりと公開 • Flutter・
• インタフェース用フレームワーク • Dart・ • ポストJavaScriptを目的に設計された言語 Fuchsia
Dart?
None
Thank you! Aug 28, 2016 / GRAND FRONTEND OSAKA 2016
@armorik83