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
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.6k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.8k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
OPENLOGI Company Profile
hr01
0
67k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
210
Operating Operator
shhnjk
1
580
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.8k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
120
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
110
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Adopting Sorbet at Scale
ufuk
77
9.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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