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
Yearly Web 2019
Search
Jxck
December 14, 2019
Technology
0
210
Yearly Web 2019
Looking back 2019 Web technology.
at #devfest19
https://tokyo.gdgjapan.org/devfest2019
Jxck
December 14, 2019
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
720
tc39_study_2
jxck
1
12k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1.1k
Periodic Background Sync
jxck
0
590
Podcast over PWA
jxck
0
290
webbundle_study
jxck
2
650
Other Decks in Technology
See All in Technology
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
150
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
380
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
280
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
120
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
270
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
370
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
170
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Side Projects
sachag
455
43k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
14k
Transcript
Yearly Web 2019 #DevFest19 #devfest19 2019/12/14 Jxck
None
mozaic.fm ep61: Yearly Web 2019
2019 年の Web を振り返る
Dark Mode High Contrast Mode
Media Queries Level 5 • prefers-color-scheme ◦ OS に設定した色を取得 •
prefers-contrast ◦ コントラストを高く • prefers-reduced-motion ◦ チラつきなどの動きを抑制 • prefers-reduced-transparency ◦ 透過表現を抑制 • inverted-colors ◦ 色の反転 • forced-colors ◦ 特定の色の強制
<portal>
<portal> 8 • 画面遷移を CSS でアレンジ ◦ アニメーションできる ◦ 先読みでシームレスに
• 展開できる iframe ◦ 中身を操作はできない ◦ postMessage は可能 • まだ完成とは程遠い ◦ まだバグが多い ◦ 最近 History が修正 ◦ 今日は Canary が Crash ◦ 遊ぶにはちょうど良い
WASM / WASI
WASM/WASI 2019/3: WASI • WASM というポータブルなバイナリ仕様ができた • これでシステムプログラミングもしたい • POSIX
ではなくモダンな設計にしよう 2019/11: Bytecode Alliance • WASM / WASI やってこうぜ • Moziila, Fastly, Intel, Redhat etc 2019/12: WASM W3C Recommendation • WASM はもう安心して使ってください
WebAuthN
WebAuthN • Authenticator を使った認証 API ◦ Yubikey, Touch ID, Win
Hello etc ◦ 二段階/二要素/パスワードレスなどが可能 ◦ github, google, yahoo などが対応開始 • ログインの選択肢が増加 ◦ どう実装するのが正解かは難しい ◦ ユーザも Authenticator にまだ慣れてない ◦ フローやリカバリや普及などは来年以降
ES/JS
ES2019 • Optional catch binding • JSON superset • Symbol.prototype.description
• Function.prototype.toString • Object.fromEntries • Well-formed JSON.stringify • String.prototype.{trimStart,trimEnd} • Array.prototype.{flat,flatMap}
Private Class Fields class Counter { // Class Field (stage
3) // Private Field (stage 3) #count = 0 }
Nullish Coalescing/Optional Chaining // nullish Coalescing (stage 3) // param
が false/0/'' の時も上書き param = param || 'default' // param が null/undefined の時だけ上書き param = param ?? 'default' // optional chaining (stage 4) o = {a: {b: {c: 10}} // error にはならない o?.a?.b?.x // undefined
Promise.any/allSettled // allSettled (stage 4) // 全部完了するまで実施 Promise.allSettled([ fetch('/1'), fetch('/2'),
fetch('/3') ]) // any (stage 3) // どれかが成功するまで実施 Promise.any([ fetch('/1'), fetch('/2'), fetch('/3') ])
Intelligent Tracking Prevention
ITP • 合意の無いトラッキングはダメです ◦ 3rd Party Cookie などの制限へ • Safari
だけではない ◦ 2019/2: Safari ITP2.1 ◦ 2019/4: Safari ITP2.2 ◦ 2019/6: Edge Tracking Protection ◦ 2019/9: Safari ITP2.3 ◦ 2019/9: Firefox Tracking Protection ◦ 2019/12: Edge Tracking Protection Update
Project Fugu
Close the Gap • Native File System API • Periodic
Background Sync • Contact Picker API • SMS Receiver API • etc etc
DoH
DNS over HTTPS/TLS • DNS クエリも暗号化 ◦ プライバシー保護 ◦ 改竄の防止
◦ 1.1.1.1 や 8.8.8.8 が対応開始 • できないことも増える ◦ フィルタリング ◦ ペアレンタルコントロール ◦ ISP からの反対 ◦ Opt-Out (canary domain)や適用範囲などの議論
Edge
MS Edge over Chromium • 2018 に EdgeHTML の開発終了発表 •
Edge のレンダリングエンジンを Chromium に • ロゴもでき Beta も順調? • 来年にはリリースされそう
WebPackaging
WebPackaging • Signed HTTP Exchange ◦ レスポンスに署名をする ◦ どこから取得しても自分のドメインで表示 ◦
AMP の URL 問題を解決 • WebBundles ◦ 複数のレスポンスを 1 ファイルにまとめる ◦ ローカルに保存して AirDrop でサイトを共有したり • WebPackaging ◦ WebBundles + Signed HTTP Exchange
WebTransport WebCodecs
ゲームで本当に欲しかったもの • 通信 ◦ Fetch でも WebSocket でも WebRTC でもない
◦ Client/Server で UDP でバイナリ送りたい ◦ WebTransport • 描画 ◦ DOM でも Canvas でもない ◦ Codec -> Video したい ◦ WebCodecs • ゲーム業界中心に割と盛り上がりつつある
WebComponents v1
WebComponents v0 -> v1 • Chrome で v0 を deprecate
する計画 ◦ 2020/2 Chrome80 まで延期 ◦ reverse origin trial ◦ polyfill for v0 • HTML Modules は? ◦ JSON / HTML などまとめて Synthetic Modules の提案 ◦ 今は問題が見つかり議論中
Same Site Cookie
Same Site Cookie Lax by default • Same Site Cookie
◦ Cookie を同じサイトでしか送られなくする ◦ これまでは設定によって CSRF 対策に活用 • by default M80 ◦ Chrome 80 がデフォルトにするアナウンス ◦ 安全性を優先 ◦ しかし壊れるサイトが多く出る ◦ 来年の 2 月までに直す必要
TLS1.0/1.1
TLS1.0/1.1 Deprecate • TLS は 1.2 以降を使うべき ◦ 1.0/1.1 は削除
◦ 各ブラウザやサービスが削除を始めている • Chrome も UI を変更 ◦ 79 (2020/1): Not Secure 表示 ◦ 80 (2020/3): Block
and more & more...
Jack thanks