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
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
170
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
640
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Technology
See All in Technology
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
310
Building Products in the LLM Era
ymatsuwitter
10
6.1k
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
910
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.9k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
520
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
160
現場で役立つAPIデザイン
nagix
35
13k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
100
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
880
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
260
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
350
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Adopting Sorbet at Scale
ufuk
74
9.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
4 Signs Your Business is Dying
shpigford
182
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Done Done
chrislema
182
16k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Building Applications with DynamoDB
mza
93
6.2k
Side Projects
sachag
452
42k
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