Repro の Web SDK 開発を支える技術 / How to deal with Web SDK development at Repro

Repro Tech Meetup #5 - Frontend Reliablity,
Supported by NAVITIME JAPAN

Transcript

1. Repro の Web SDK 開発を⽀える技術 Repro Tech Meetup #5 - Frontend Reliability - supported by NAVITIME JAPAN #reprotech December 04, 2018 @cheezenaan
2. console.info(me) • Name: cheezenaan • Job: Software Engineer at Repro Inc. (2018.08 - now) • Twitter: @cheezenaan • GitHub: cheezenaan
3. https://repro.io/
4. Web / App Marketing Automation https://repro.io/
5. https://repro.io/ アプリの継続利⽤を やめそうなユーザー だけに プッシュ通知を送りたい
6. https://prtimes.jp/main/html/rd/p/000000064.000013569.html
7. https://repro.io/
8. https://repro.io/
9. おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ
10. 話すこと • JavaScript を⽤いた Web SDK 開発において⼤切にしている
 価値観や考え⽅ • SDK 開発の現場におけるハマりどころや悩み、苦難 • どちらかというとポエム要素が多いかも
11. 話さないこと • Repro 全体のアーキテクチャに関する説明 • 具体的なライブラリやフレームワークの使い⽅や設定 • 特定のブラウザやライブラリに対する愚痴
12. よろしくおねがいします
13. おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ
14. そもそも SDK とは？
15. そもそも SDK とは？ • Software Development Kit の略 • つまり? • アプリ提供者(サプライヤー)向けの便利なライブラリ集みたいなもの
16. Repro と SDK • SDK を通してアプリ利⽤者(ユーザー)の情報を Repro に送って • 送られてきたデータをもとにアプリの利⽤状況を解析したり • ユーザーに対してマーケティング施策を実施する
18. Web SDK
19. Web (ブラウザ上で動作する) SDK
20. Web (ブラウザ上で動作する) SDK
21. ネイティブと Web のちがい ネイティブ(iOS / Android) Web OS Web ブラウザ Web サイト SDK OS アプリケーション SDK
22. Web (ブラウザで動かす) SDK の難しさ • 考慮すべきレイヤーがひとつ増える • たったひとつ、されどひとつ • Web ブラウザという、ひとつ増えたレイヤーに消耗する⽇々 • ブラウザプラットフォーム、あるいはバージョン間の差異
23. Fetch API String.prototype.includes Class declarations etc.
24. http://kangax.github.io/compat-table/es6/#ie11 does NOT work for IE11
25. おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ
26. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない
27. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない 安⼼安全で 信頼できる SDK を 提供したい
28. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない &&
29. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない なるべく多くの Web ブラウザ上で 動かしたい
30. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない とはいえ
31. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない プラットフォーム / バージョン どこまで対応すればいいの
32. Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、
 もれなく収集すること • データロストやデータの不備があってはならない ビジネス要求と 開発リソース次第
33. Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい • ブラウザのプラットフォーム間、バージョン間における API 実装差分、
 ユーザー⼊⼒の異常系チェック etc. • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に
 ⽴ち向かう
34. Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい • ブラウザのプラットフォーム間、バージョン間における API 実装差分、
 ユーザー操作の異常系チェック • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に
 ⽴ち向かう 効率よく ラクして 開発したい
35. おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ
36. • ほぼ最新の Chrome を基準とした Graceful Degradation • ex. navigation.sendBeacon / fetch API / XMLHttpRequest / ... • (標準化されていない)ブラウザ API を過信しない • ex. navigation.userAgent 安⼼安全で信頼できる SDK を届けるために(1)
37. 安⼼安全で信頼できる SDK を届けるために(2) • 外部ライブラリへの依存を極⼒減らす • 「なにもしてないのにこわれた」を防ぎたい • 今のところは↓の 2 つくらいしか利⽤していない • bestiesjs/platform.js • js-cookie/js-cookie
38. • ファイルサイズは⼩さく保つ • 「Polyfill ⼊れるくらいなら⾃分で書く」というスタンス • babel-polyfill はファイルサイズ⼤きいので… 安⼼安全で信頼できる SDK を届けるために(3)
39. • TypeScript を段階的にゆるく導⼊ • Language Server + Intellisense on VS Code => コード補完++ • strict ルールを導⼊してバリデーションの記述を強制する • ドキュメンテーションを型アノテーションでカバーする • 迷ったらとりあえず FIXME(= any のエイリアス)をつける 効率よくラクして SDK を開発するために(1)
40. • Test, test, and test • Unit test は⼿厚く • SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ 効率よくラクして SDK を開発するために(2)
41. 効率よくラクして SDK を開発するために(2) • Test, test, and test • Unit test は⼿厚く • SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ
42. 効率よくラクして SDK を開発するために(2) • TestCafe x BrowserStack => automated cross-browser E2E testing • TestCafe 実⾏時のキャプチャがいいかんじに BrowserStack へ
 アップロードされる • デグレが発⽣した際の原因の切り分けに役⽴つ
43. 効率よくラクして SDK を開発するために(3) • Semi-automated Deployment on CI • master ブランチでの CI pass を確認後にスクリプトを実⾏すると • セマンティックバージョニングに基づいてバージョンをあげて • ビルド -> S3 へのアップロード -> CDN のキャッシュパージ • アプリ提供者は基本的にサイトや導⼊スニペットの書き換えなしに
 常に最新の SDK を利⽤できる
44. まとめ • Web SDK 開発は "Web ブラウザ" という巨⼤な壁から逃げずに
 向き合っていくこと • 安⼼安全で信頼できる SDK を、効率よくラクして開発するために • 依存すくなめ型すこしテストましまし • 静的型付き⾔語や Testing tool を活⽤して省⼒化・効率化
45. 俺たちの戦いはこれからだ！
46. End