Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend

Slide 1

Slide 1 text

高品質のWebアプリケーションをつくるために Web App Checklist - To make high quality app for better user experience 2019.05.18 Inside Frontend @Abema Towers / Kazunari Hara & tokimari Web App Checklist

Slide 2

Slide 2 text

原一成 Kazunari Hara Web Developer @ CyberAgent Twitterer Beer, Cat, Karting, Family @herablog

Slide 3

Slide 3 text

ときまり tokimari Frontend Engineer @ CyberAgent Accessibility Police Beer, Cat, Knitting @tokimariri

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

喋るだけでブログになる投稿機能 Post function that creates blog entry just by speaking

Slide 6

Slide 6 text

幅広いユーザー投稿/閲覧スタイル Post function that creates blog entry just by speaking お風呂中にも子供を抱っこしていても、料理中でも寝ながらでも投稿、閲覧ができます

Slide 7

Slide 7 text

Slide 8

Slide 8 text

no genre title 13 a11y 文字のコントラストは4.5:1以上 14 a11y 色だけで説明しない 15 a11y 要素の選択は適切に 16 a11y キー操作だけで利用できる 17 a11y,UX フォーカスを可視化する 18 UX スクロール位置を復元 19 UX,a11y 修正・削除ができる 20 UX 継続的なモニタリング 21 UX ストレスのない遷移とローディング 22 UX レイアウトを固定する 23 a11y,UX 突然音を出さない 24 Security セキュリティ監査する no genre title 1 UX 適切なレンダリングパターンを選択 2 Perf 安定したサーバレスポンス 3 Perf 圧縮したメディアフォーマットを利用 4 Perf,UX リソースを必要なタイミングで読み込む 5 Perf Webパフォーマンスを監視 6 UX Oﬀ the main thread 7 UX オフラインでも利用できる 8 UX モバイルでもデスクトップでも使える 9 PWA メタデータを提供 10 DX OSSのように開発 11 UX Progressive Enhancement 12 a11y,SEO 画像に代替テキストを設定する Checklist: 36

Slide 9

Slide 9 text

Slide 10

Slide 10 text

適切なレンダリングパターンを選択 Perf Checklist. 01 Select appropriate rendering pattern for your app.

Slide 11

Slide 11 text

Rendering on the Web https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Slide 12

Slide 12 text

　 TTI = FCP 　 Inﬂexible Server Side Rendering ロジックはサーバー側 GET / Network JS TTIはJS構成に依存する Logics are in server side TTI depends on JS architecture

Slide 13

Slide 13 text

Optimized Server-Side Web Application In 2018 https://developers.cyberagent.co.jp/blog/archives/16818/

Slide 14

Slide 14 text

Server Side Rendering Website アメーバニュース Ameba News はやいFCP https://news.ameba.jp/entry/20190516-669/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。 Fast FCP

Slide 15

Slide 15 text

SSR with hydration 　 Flexible 　 TTI >>>> FCP データを使ってクライアントで描画 GET / Network JS DATA={} bundle.js render(DATA) Client rendering with initial data

Slide 16

Slide 16 text

アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ https://developers.cyberagent.co.jp/blog/archives/636/

Slide 17

Slide 17 text

SSR with Hydration App アメーバブログ Ameba Blog https://ameblo.jp/ca-seo/entry-12458541240.htmlをMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。 TTIが遅くなりがち Slow TTI

Slide 18

Slide 18 text

Client Side Rendering 　 Flexible, Fast TTFB 　 TTI >>>> FCP GET / FCP TTI Network JS bundle.js render() FCPはもっと遅くなることも

Slide 19

Slide 19 text

GET / FCP TTI JS app.js render() ● H2 Server Push (Preload) ● Web Components ... こえのブログはCSRを選択できるだけはやい CSRに挑戦 JSの並列配信 Parallel JS requests Our challenge was to make CSR app as fast as possible 小さいJS Light JS

Slide 20

Slide 20 text

Lighthouse Performance 程々にはやいFCP とはやいTTI https://voice.ameba.jp/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。 So-so fast FCP and fast TTI.

Slide 21

Slide 21 text

安定したサーバレスポンス Keep fast and consistent server response. Perf Checklist. 02

Slide 22

Slide 22 text

Server response is fundamental for web performance. サーバレスポンスは根本的サーバレスポンスが遅いと何も表示されない Waiting with blank page when server response is too slow.

Slide 23

Slide 23 text

Reasons for server-side latency. サーバ遅延の要因 ● 地理 Location ● 計算量 Computation ● キャパシティ Capacity ● リダイレクト Redirect ● DBクエリ DB Queries ...

Slide 24

Slide 24 text

Use CDN for edge side caching.こえのブログで利 CDNキャッシュの利用高キャッシュヒット率でオリジンサーバーに 1度しかリクエストしない Only requests content to the origin server once because of high cache hit ratio.

Slide 25

Slide 25 text

Cache content in CDN as long as possible. できるだけ長く CDNキャッシュ長いTTLと Surrogate Keyを指定 JavaScript TTL: 30days Key: web/release Entry data 30days blogger/${ID} entry/${ID} Setting long TTL and Surrogate Key

Slide 26

Slide 26 text

Event-driven cache purging. イベント駆動キャッシュパージ onDeploy onUpdate Purging with Surrogate Key web/release entry/${ID}

Slide 27

Slide 27 text

Edge-side computing. エッジサイドコンピューティング URLからSurrogate Key を抽出 sub vcl_fetch { declare local var.SurrogateKey STRING; if (req.http.x-url ~ "/([a-z0-9-]{3,24})/([a-zA-Z0-9]+)") { set var.SurrogateKey = var.SurrogateKey + " blogger/" + re.group.1 + " entry/" + re.group.2; // e.g. ogger/abcde", "entry/12345" } set beresp.http.Surrogate-Key = var.SurrogateKey; } Extracting surrogate keys from URL

Slide 28

Slide 28 text

圧縮したメディアフォーマットを利用 Select optimized media format. Perf/UX Checklist. 03

Slide 29

Slide 29 text

According to Lighthouse, the size of images could still be reduced. まだまだ減らせる画像容量

Slide 30

Slide 30 text

List of image ﬁle formats 画像フォーマット ● JPEG ● Progressive JPEG ● PNG ● WebP ● SVG ● Animation GIF 画質を指定して利用ファイルサイズに注意高圧縮動画のが軽いことも

Slide 31

Slide 31 text

ImageOptim https://imageoptim.com/

Slide 32

Slide 32 text

List of image CDN providers. Image CDN ● Akamai ● Cloudinary ● Imgix ● Fastly ● Hayabusa

Slide 33

Slide 33 text

List of image CDN providers. Image CDN ● Akamai ● Cloudinary ● Imgix ● Fastly ● Hayabusa こえのブログで利用

Slide 34

Slide 34 text

サムネイルは低クオリティ指定自動判定で WebP配信 Pixel ratio指定 /image.jpg?auto=webp /image.jpg?dpr=${window.devicePixelRatio} /image.jpg?quality=60

Slide 35

Slide 35 text

リソースを必要なタイミングで読み込む Load resources when necessity. Perf/UX Checklist. 04

Slide 36

Slide 36 text

画像の遅延読み込み Image lazy-loading 無駄な画像をリクエストしない Reducing unnecessary image requests

Slide 37

Slide 37 text

ブラウザ標準遅延読み込み Native lazy-loading

Slide 38

Slide 38 text

Feature Detection if ('loading' in HTMLImageElement.prototype) { // Use Native lazy-loading } else { // Use Intersection Observer (or polyﬁll) }

Slide 39

Slide 39 text

スクリプトの遅延読み込み index.html (Entrypoint) voice-app.js (App shell) voice-home.js (Fragment) voice-editor.js (Fragment) import(‘’) import(‘’) Script lazy-loading

Slide 40

Slide 40 text

Webパフォーマンスを監視 Monitor web performance constantly. Perf Checklist. 05

Slide 41

Slide 41 text

Start Performance Budgeting https://addyosmani.com/blog/performance-budgets/

Slide 42

Slide 42 text

パフォーマンスバジェットは超えちゃいけない制限 Performance budget is a limit for pages which the team is not allowed to exceed. Timing Resource Rule カスタム指標もOK Custom metrics are also available

Slide 43

Slide 43 text

“Performance budgets are not just thresholds. Much like a ﬁnancial budget, they're something consciously spent.“ Addy Osmani Perf指標を財政予算に見立てて管理

Slide 44

Slide 44 text

こえのブログ Perf Budget Perf Budget Values. Entrypoint HTML <= 14KB App Shell JS <= 120KB Chunk JS <= 20KB FCP on Fast 3G <= 1.5s TTI on Fast 3G <= 3s 品質劣化をはやめに検知するため、アグレッシブな設定 Aggressive budgets to ﬁnd out quality deterioration 予算オーバーするとデプロイできない CI stops deployment if resource size exceeds the budget

Slide 45

Slide 45 text

Oﬀ the main thread Perf Checklist. 06

Slide 46

Slide 46 text

メインスレッド Main Thread ロングタスクはユーザー操作をブロックする Long-task blocks user input

Slide 47

Slide 47 text

Web Worker上のWASMで音声変換 Audio transcoding by WASM in Web Worker WAV MP3

Slide 48

Slide 48 text

Comlink https://github.com/GoogleChromeLabs/comlink

Slide 49

Slide 49 text

オフラインでも利用できる Respond with a 200 when oﬄine. UX Checklist. 07

Slide 50

Slide 50 text

回線が常にあるとは限らない Network is not always available. 常にはやいとも限らない Network is not always fast.

Slide 51

Slide 51 text

Service Worker Precache index.html Revision:adcoaeo voice-app.js Revision:4f39dn3 logo.svg Revision:mfj48dj Revision変わったファイルのみ再取得ビルドした全アセットをプリキャッシュ Precaching all assets Re-fetching only updated scripts

Slide 52

Slide 52 text

Workbox.routing.registerNavigationroute( '/index.html', { whitelist: [ /^\/editor/, /^\/embed/, ... ] }, ); 特定パスへのナビゲーションリクエスト時にプリキャッシュした index.htmlを返却する Return precache HTML when navigation request Service Worker Precache

Slide 53

Slide 53 text

オフラインでの録音が可能 Oﬄine recording is available.

Slide 54

Slide 54 text

モバイルでもデスクトップでも使える Usable on all devices. UX Checklist. 08

Slide 55

Slide 55 text

and more devices...

Slide 56

Slide 56 text

メディアクエリ Media Queries @media screen and (min-width: 1025px) { :root { --app-header-height: 60px; --app-page-background-color: var(--clr-whitesmoke); --app-drawer-width: 400px; } } カスタムプロパティで全体レイアウトを一箇所で指定 Set layout as custom properties in root selector.

Slide 57

Slide 57 text

レスポンシブ画像 Responsive Images

Slide 58

Slide 58 text

Image CDN /image.jpg? width=640& dpr=${window.devicePixelRatio}

Slide 59

Slide 59 text

Desktop PWA でも使える Also available as Desktop PWA

Slide 60

Slide 60 text

メタデータを提供 Provide app meta data. PWA Checklist. 09

Slide 61

Slide 61 text

Web App Manifest { “name”: “こえのブログ by Ameba”, “description”: “「こえのブログ」は...”, “lang”: “ja-JP”, “icons”: [...], “background_color”: “#ﬀf”, “theme_color”: “#ﬀf”, “start_url”: “/?source=homescreen”, “scope”: “/”, “display”: “standalone” } iOS 12.2での対応によりスタンドアローンで OAuthも利用可能に OAuth is available in standalone mode on later iOS 12.2

Slide 62

Slide 62 text

Meta for Social Media. SNS用メタデータ

Slide 63

Slide 63 text

The new evergreen Googlebot https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html SEOハックにさようなら Goodbye SEO Hacks.

Slide 64

Slide 64 text

YHAAAAAAAA!

Slide 65

Slide 65 text

OSSのように開発 Have OSS-like development style. checklist. DX DX Checklist. 10

Slide 66

Slide 66 text

README.md

Slide 67

Slide 67 text

CONTRIBUTING.md

Slide 68

Slide 68 text

CHANGELOG.md

Slide 69

Slide 69 text

よいLGTM Good LGTM makes developers comfortable.

Slide 70

Slide 70 text

LTTM (Chrome Extension) https://chrome.google.com/webstore/detail/lttm/jdidcgkdggndpodjbipodfefnpgjooeh

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

Progressive Enhancement Checklist. 11 UX

Slide 73

Slide 73 text

こえのブログの”投稿” ＝アメブロのプラスの投稿機能投稿の推奨環境を制限 ● iPhone Safari 11.3~ ● Android Chrome 61~ “Posting by voice” is an additional feature of Ameblo. Limit browsers:

Slide 74

Slide 74 text

● IE11~ ● Edge ● Android OS 5~ ● iOS11~ こえのブログの”閲覧” ＝アメブロの標準機能 “Browsing” Koe-no-blog is a standard feature of Ameblo. User can experience it by followings browsers:

Slide 75

Slide 75 text

Progressive Enhancement Graceful Degradation 動作しないブラウザを起点に機能を考えない Don't think the feature based on the legacy browser that doesn’t work. Kazunari Hara

Slide 76

Slide 76 text

{ "builds": [ { "name": "esm-bundled", "browserCapabilities": ["es2015","modules"], "js": { "minify": true }, … "bundle": true, "addServiceWorker": false }, { "name": "es5-bundled", "js": { "compile": "es5", "minify": false, "transformModulesToAmd": true }, … "bundle": true, "addServiceWorker": false } ] } ● ES Modules bundled file ● ES5 bundled file CDNで別のファイルを配信 Deliver another assets file by CDN. Method 1

Slide 77

Slide 77 text

PASS ./build/es5-bundled/src/components/voice-app.js: 124.69KB < maxSize 140KB PASS ./build/esm-bundled/src/components/voice-app.js: 77.81KB < maxSize 120KB PASS ./build/es5-bundled/src/components/voice-embed.js: 21.49KB < maxSize 25KB PASS ./build/esm-bundled/src/components/voice-embed.js: 18.61KB < maxSize 20KB PASS ./build/es5-bundled/src/components/lazy-resources.js: 17.36KB < maxSize 20KB PASS ./build/esm-bundled/src/components/lazy-resources.js: 12.26KB < maxSize 15KB PASS ./build/es5-bundled/index.html: 9.47KB < maxSize 14KB PASS ./build/esm-bundled/index.html: 3.15KB < maxSize 14KB File size reduced: -37% ESModules bundle < ES5 bundle CDNで別のファイルを配信 Method 1 Deliver another assets ﬁle by CDN.

Slide 78

Slide 78 text

● Web Share API ● Network Information API ● Intersection Observer ● Vibration API ● etc... Provide better experience with new technologies 新しい技術をより良い体験に Web Share API Original Dialog Method 2

Slide 79

Slide 79 text

● Web Share API Only Safari, Android chrome 新しい技術をより良い体験に Method 2

Slide 80

Slide 80 text

画像に代替テキストを設定する Checklist. 12 a11y, SEO Provide text alternatives for any non-text content.

Slide 81

Slide 81 text

画像の内容を伝えるあらゆるユーザーエージェントに Provide content of images to various user agents.

Slide 82

Slide 82 text

Screen reader, Google bots, etc... 画像の内容を伝えるあらゆるユーザーエージェントに Provide content of images to various useragents.

Slide 83

Slide 83 text

画像の”内容”を伝える Convey “content” of images.

Slide 84

Slide 84 text

マイページ投稿する alt=”投稿” 画像の”内容”を伝える Convey “content” of images. 新規タブで開く

Slide 85

Slide 85 text

下で説明投稿のイメージ画像 alt=”” ”意味”を持たない場合 Some images have no meaning.

Slide 86

Slide 86 text

文字のコントラストは4.5:1以上 Checklist. 13 a11y The text has a contrast ratio of at least 4.5: 1.

Slide 87

Slide 87 text

閲覧の状況で見え方は違う How user sees it depends on the situation. ● 視力 Sight ● 色覚異常 Color blindness ● 外出先 Outside ● etc…

Slide 88

Slide 88 text

画像引用: 信号機に夕日が差し込み反射すると何色かまったくわからないことがある https://dm2.co.jp/2015/11/shingouki.html Situation to view ? 閲覧の状況？

Slide 89

Slide 89 text

とはいえ現実はｷﾋﾞｼｲ But the reality is so diﬃcult.

Slide 90

Slide 90 text

Ameba Green: 4.26:1 とはいえ現実はｷﾋﾞｼｲ But the reality is so diﬃcult. Dark Green Green Light Green

Slide 91

Slide 91 text

Too low (2.8:1)→ little higher (4.3:1) Use high contrast color for text ● Ameba Green: for logo, icon / 4.26:1 ● Dark Green: for text / 4.66:1 1か0かではなく、まずは向上する At ﬁrst, we improve contrast a little more than now.

Slide 92

Slide 92 text

色だけで説明しない Checklist. 14 a11y Do not convey information only with visual color meaning.

Slide 93

Slide 93 text

Which is active ? Before

Slide 94

Slide 94 text

Which is active ? Before / in monochrome

Slide 95

Slide 95 text

Which is active ? 1.08:1

Slide 96

Slide 96 text

色の見え方は人それぞれ色の違いなしに見分けられるのが良い → モノクロで確認する Make identiﬁcation possible without color distinction. So, check in monochrome. Depending on the person, the way they see color changes.

Slide 97

Slide 97 text

画像引用: 信号機に夕日が差し込み反射すると何色かまったくわからないことがある https://dm2.co.jp/2015/11/shingouki.html and situation to view 閲覧の状況

Slide 98

Slide 98 text

Which is active ? After

Slide 99

Slide 99 text

Which is active ? After / in monochrome

Slide 100

Slide 100 text

要素の選択は適切に Checklist. 15 a11y, SEO Select appropriate elements according to the speciﬁcation.

Slide 101

Slide 101 text

クロちゃんのブログ

Machine Readability Bot, Screen Reader, RSS, SNS medias, ...

Slide 102

Slide 102 text

, ● Keyboard accessible ● Visible focus 「らしさ」を再実装しない Do not redevelopment it’s “likeness”.

● nothing

Slide 103

Slide 103 text

キー操作だけで利用できる Checklist. 16 a11y Make all functionality available from keyboard.

Slide 104

Slide 104 text

まだ見ぬ未来のデバイス、ちょっと変わったUI キー操作できる If it can be operated with the keyboard, ＝色々なデバイスで操作できる it can be operated with various devices

Slide 105

Slide 105 text

　　　　　　　　　　　　ちょっと変わったUI Slightly odd UI component

Slide 106

Slide 106 text

操作対象が移る場合、特に注意 Be especially careful when the operation target changes. Example 1

Slide 107

Slide 107 text

Accessible Samples WAI-ARIA Authoring Practices 1.1 https://www.w3.org/TR/wai-aria-practices

Slide 108

Slide 108 text

page navigation on SPA Example 2

Slide 109

Slide 109 text

if (prevPage && prevPage !== currentPage) { const title = `${title} | ${siteName}`； const announcer = document.getElementById('js-announcer'); window.document.title = title; if (announcer) { announcer.innerHTML = documentTitle; } document.body.focus(); }

… Move focus, Read title Example 2

Slide 110

Slide 110 text

Move focus, Read title Example 2

Slide 111

Slide 111 text

フォーカスを可視化する Checklist. 17 a11y, UX Visualize keyboard focus indicator.

Slide 112

Slide 112 text

focusは何を操作するか The focus indicates what to operate.

Slide 113

Slide 113 text

a, button { outline: none; } focusを可視化する Visualize the focus style.

Slide 114

Slide 114 text

focusを可視化する a, button { outline: none; } Visualize the focus style.

Slide 115

Slide 115 text

.drawer-list > a { color: var(--app-dark-text-color); font-size: 1.4rem; -webkit-tap-highlight-color: var(--app-focus-background-color); outline: none; text-decoration: none; } .drawer-list > a:focus { background-color: var(--app-focus-background-color); } スタイル適用 → 標準スタイル削除 Apply your own focus style and then remove the default style.

Slide 116

Slide 116 text

Slide 117

Slide 117 text

スクロール位置を復元 Checklist. 18 UX Restore scroll position when returning to the page.

Slide 118

Slide 118 text

非同期コンテンツではうまくいかない？ Can't restore scroll position with asynchronous rendering?

Slide 119

Slide 119 text

janpaul123/delayed-scroll-restoration-polyﬁll

Slide 120

Slide 120 text

if (isChrome) { if ('scrollRestoration' in window.history) { // ブラウザの復元処理を使わない window.history.scrollRestoration = 'manual'; } var scriptEl = document.createElement('script'); scriptEl.setAttribute('src', 'node_modules/delayed-scroll-restoration-polyﬁll/ index.js'); scriptEl.setAttribute('defer', 'defer'); document.body.appendChild(scriptEl); } 基本はブラウザ任せ Use browser's standard process.

Slide 121

Slide 121 text

if (isChrome) { if ('scrollRestoration' in window.history) { // ブラウザの復元処理を使わない window.history.scrollRestoration = 'manual'; } var scriptEl = document.createElement('script'); scriptEl.setAttribute('src', 'node_modules/delayed-scroll-restoration-polyﬁll/ index.js'); scriptEl.setAttribute('defer', 'defer'); document.body.appendChild(scriptEl); } マニュアル操作にする Use manual operation if possible.

Slide 122

Slide 122 text

修正・削除ができる Checklist. 19 UX, a11y Can be edited and deleted.

Slide 123

Slide 123 text

人間は間違える生き物 UIも最適じゃないかもしれない完璧よりも、ミスを許容できることが重要 Human beings make mistakes. It’s important to be able to ﬁx mistakes.

Slide 124

Slide 124 text

● 重要なデータはindexedDBへ保存 ● ブラウザバック時に保存を提示記事更新時に保存→提示 Save to indexdDB every time important data is updated, and restore it at the required timing.

Slide 125

Slide 125 text

継続的なモニタリング Checklist. 20 UX, Perf Reduce monitoring cost by automation.

Slide 126

Slide 126 text

System Conﬁguration GCS /api/* /assets/* PURGE

Slide 127

Slide 127 text

Datadog https://app.datadoghq.com/

Slide 128

Slide 128 text

Stackdriver https://cloud.google.com/stackdriver/

Slide 129

Slide 129 text

System Conﬁguration Error GCS /api/* /assets/* PURGE

Slide 130

Slide 130 text

Alert to Slack

Slide 131

Slide 131 text

Sentry https://sentry.io/

Slide 132

Slide 132 text

Speedcurve https://speedcurve.com/

Slide 133

Slide 133 text

Firebase Performance Monitoring https://firebase.google.com/docs/perf-mon/ Trying out ﬁrebase

Slide 134

Slide 134 text

GCS /api/* /assets/* PURGE 社内ログシステム System Conﬁguration 投稿監視チーム DELETE PATCH Error pub/sub Error Error

Slide 135

Slide 135 text

Good Night However, until you hear an alert

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

Slide 138

Slide 138 text

● アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog https://developers.cyberagent.co.jp/blog/archives/20506/ ● アクセシブルなブログ開発、その後どうなったの https://www.slideshare.net/MarinaToki/ss-135424096 ● こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA - Speaker Deck https://speakerdeck.com/herablog/koe-no-blog-pwa ● こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4 https://speakerdeck.com/herablog/pwa-night-vol-dot-4 Related Slides

Slide 139

Slide 139 text

AMA B-4 Thank you! https://app2.sli.do/event/ppjicyvn/live/questions