こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA

Frontrend × Bonfire Frontend (https://frontrend.connpass.com/event/124995/) での発表資料です。

「こえのブログ」はアメブロに追加された音声配信機能です。新機能開発における技術選定、開発フローやドキュメント作成など「開発現場」に焦点を当ててお話します。

関連ブログ: https://developers.cyberagent.co.jp/blog/archives/20506/

Transcript

1. こえのブログでのPWA ~ 開発現場編 ~ 2019年4月15日 @Abema Towers Kazunari Hara
2. ようこそ Abema Towersへ
3. 原 一成 Hara Kazunari Web Developer @herablog
4. 新卒12年目
5. 新卒12年目
6. 2008 HTML CSS
7. 2010 JavaScript 2011 Node.js 2016 React, Redux, DevOps 2018 CDN HTML5 Web Applicationの つくりかた https://ameblo.jp/ca-1pixel/entry-1100959 8050.html アメブロ2016 ~ React/Reduxでつ くるIsomorphic web app ~ https://developers.cyberagent.co.jp/blog/archives/ 636/ Optimized Server-Side Web Application In 2018 https://developers.cyberagent.co.jp/blog/archi ves/16818/ Amebaプラットフォームの 作りかた https://www.slideshare.net/herablog/ameba-2 2035207
8. 2019 HTML / CSS JavaScript Node.js Opts / Infra CDN and PWA
9. 喋るだけで ブログになる
10. Demo: https://voice.ameba.jp/embed/kuroaroma-day/7q9eG1SVdlZrgUCtCUDl
11. なぜ今、音声投稿なのか モバイル テキスト +α
12. スマホの個人利用率 (30代, 2016) 90.4% http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html
13. データ消費量は増加 (一人, 月間) 約5倍 http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html
14. 本人の”声”でコンテンツ価値向上 https://voice.ameba.jp/emb ed/kobayashi-maya/rxxqHm 6s4iAqYRP4mjK5 https://voice.ameba.jp/e mbed/kose-sports/eaxzb 5mP6vMlw3FWpqX9 https://voice.ameba.jp/e mbed/toshl-official/9nzC7 iAFn6IDKHPerj6P
15. なぜWebアプリなのか クロスプラットフォーム 小さくリリースできる ブラウザ機能の充実
16. ネイティブアプリ のように動く
17. CSRで高速な アプリを目指す
18. Rendering on the Web: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
19. Rendering on the Web: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
20. Rendering on the Web: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
21. Rendering on the Web: https://developers.google.com/web/updates/2019/02/rendering-on-the-web Network JS GET / render GET /bundle.js FCP TTI
22. Network JS GET / render TTI FCP GET /bundle.js
23. Network JS GET / TTI GET /lazy.js GET /bundle.js FCP render
24. Network JS GET / FCP TTI GET /bundle.js GET /lazy.js render
25. PRPL Pattern (Push, Render, Pre-cache, Lazy load) CDN
27. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell Lazy Load Fragment PRPL Pattern <script type=”module”> await import(); await import(); await import();
28. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell Lazy Load Fragment (P) HTTP/2 Server Push
29. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell Lazy Load (P) Pre-cache with Service Worker
30. ブラウザ機能対応率 (こえのブログへのアクセスから, WebViewは除く) Service Worker 84.9% Static Import 88.9%
31. https://www.fastly.com/blog/optimizing-http2-server-push-fastly “Fastly’s server push mechanism won’t push the same resource twice over the same h2 connection”
32. Origin Servers Client DB CDN Edge CDN Edge CDN Edge CDN活用 計算量が多い
33. Origin Servers Client DB CDN Edge CDN Edge CDN Edge
34. できるだけ長く CDNキャッシュ する
35. Web Components with LitElement CSRのWebアプリ モバイルター ゲット コンポーネント Web標準 Web Components
36. コンポーネント指向での開発 記述内容の影響が絞られている事 による 「捨てやすさ > 再利用性」
37. コンポーネント指向での開発 <voice-app> <voice-header> <button type=”button”> メニューを開く</button> </voice-header> <voice-mic recording> </voice-mic> </voice-app> class VoiceMic extends LitElement { render() { const label = this.recording ? ‘停止する’ : ‘開始する’; } } class VoiceHeader extends LitElement { render() { return html` <slot></slot> `; } }
38. :host { --mic-size: var(--voice-mic-size, 72px); } .mic { height: var(--mic-size); } .icon { … } font-family: sans-serif; <voice-mic> <voice-editor> voice-mic { --voice-mic-size: 100px; } Custom Property Cascading Scoped
39. https://www.webcomponents.org/
40. 166 KB (gzip, style込み)
41. Lighthouseでhttps://voice.ameba.jp/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定しました。
42. WebでAudio Recording?
43. ブラウザの マイクを利用 navigator.mediaDevices .getUserMedia({ audio: { autoGainControl: false, channelCount: 1, echoCancellation: true, noiseSuppression: true, }, }) .then((stream) => { // use the stream }) .catch((err) => { // NotAllowedError or // NotFoundError });
44. マイクパー ミッション を取得 const installMicPermissionWatcher = async callback => { const permissionStatus = await navigator.permissions .query({ name: 'microphone' }); // granted or prompt or denied callback(permissionStatus.state); permissionStatus .addEventListener('change', () => callback(permissionStatus.state) ); };
45. マイクパー ミッション を取得
46. 音声を圧縮 WAV MP3
47. https://github.com/Kagami/vmsg Kagami/vmsg
48. https://developers.cyberagent.co.jp/blog/archives/20506/ 詳細は・・・ CDN/PWA/Speech Recognition/WASM/Web Components/Service Worker/Performance Budget etc...
49. 開発フロー
50. デザイン 実装 仕様 餅つき開発 細かい粒度でプルリクエスト 違ったら直せばいい 早い共通化より捨てやすい構造にする
52. 餅つきの結果 1,000コミット超え
53. 最速で プロトタイプ 改善サイクルを回せ、品質が向上する 無駄になることを恐れない Firebaseをフル活用
54. 2.5ヶ月 HTML + Pure JS Component すぐ
55. 2.5ヶ月 HTML + Pure JS Component すぐ
56. アクセシビリティ も標準対応 最初から対応するほうが簡単 ガイドラインにのっとり開発 https://openameba.github.io/a11y-guidelines/
59. https://www.slideshare.net/MarinaToki/ss-135424096 詳細はスライ ドで
60. デプロイ 心理的安全性 簡単にデプロイできることは、 プロダクト改善に役立つ サーバレス利用でめったに失敗しない
61. デプロイ 心理的安全性 932デプロイ
62. Perf Budget システム性能は時間とともに劣化す るもの 財政予算に見立てて、システム指標 を管理していく TTI Budget
63. Budgetの種類 (例) Timing: FCP、TTI、SpeedIndexなど Resource: ファイルサイズ、リクエスト数など Original: Time to Tweet
64. Budgetの決め方 (こえのブログの例) 1. 計測するページを決め、計測する 2. 競合を定義し、計測する 3. 最速だったので、競合より20%早い値を算出 4. それでも現状のが早かったので現状を維持す るBudgetを設定 (劣化を早い段階で防ぐ)
65. FCP: 1.8s -> 1.5s (Updated) TTI: 4s -> 3s (Updated) App shell JS size: 120KB Chunk JS size: 20KB
66. https://github.com/siddharthkp/bundlesize siddharthkp/bundlesize https://github.com/siddharthkp/bundlesize Front-End Performance Checklist 2019 https://twitter.com/katiehempenius/status/107547 8356311924737 Example of how perf budgets change by network connection
68. OSSのように 開発する 数カ月後の自分は他人・・・ 「共通言語」でいつでも開発者が 参加できる