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
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Writing Fast Ruby
sferik
628
61k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Six Lessons from altMBA
skipperchong
27
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for Performance
lara
604
68k
How to Ace a Technical Interview
jacobian
276
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Become a Pro
speakerdeck
PRO
26
5.1k
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