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

Slide 1

Slide 1 text

Repro の Web SDK 開発を⽀える技術 Repro Tech Meetup #5 - Frontend Reliability - supported by NAVITIME JAPAN #reprotech December 04, 2018 @cheezenaan

Slide 2

Slide 2 text

console.info(me) • Name: cheezenaan • Job: Software Engineer at Repro Inc. (2018.08 - now) • Twitter: @cheezenaan • GitHub: cheezenaan

Slide 3

Slide 3 text

https://repro.io/

Slide 4

Slide 4 text

Web / App Marketing Automation https://repro.io/

Slide 5

Slide 5 text

https://repro.io/ アプリの継続利⽤をやめそうなユーザーだけにプッシュ通知を送りたい

Slide 6

Slide 6 text

https://prtimes.jp/main/html/rd/p/000000064.000013569.html

Slide 7

Slide 7 text

https://repro.io/

Slide 8

Slide 8 text

https://repro.io/

Slide 9

Slide 9 text

おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ

Slide 10

Slide 10 text

話すこと • JavaScript を⽤いた Web SDK 開発において⼤切にしている  価値観や考え⽅ • SDK 開発の現場におけるハマりどころや悩み、苦難 • どちらかというとポエム要素が多いかも

Slide 11

Slide 11 text

話さないこと • Repro 全体のアーキテクチャに関する説明 • 具体的なライブラリやフレームワークの使い⽅や設定 • 特定のブラウザやライブラリに対する愚痴

Slide 12

Slide 12 text

よろしくおねがいします

Slide 13

Slide 13 text

おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ

Slide 14

Slide 14 text

そもそも SDK とは？

Slide 15

Slide 15 text

そもそも SDK とは？ • Software Development Kit の略 • つまり? • アプリ提供者(サプライヤー)向けの便利なライブラリ集みたいなもの

Slide 16

Slide 16 text

Repro と SDK • SDK を通してアプリ利⽤者(ユーザー)の情報を Repro に送って • 送られてきたデータをもとにアプリの利⽤状況を解析したり • ユーザーに対してマーケティング施策を実施する

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Web SDK

Slide 19

Slide 19 text

Web (ブラウザ上で動作する) SDK

Slide 20

Slide 20 text

Web (ブラウザ上で動作する) SDK

Slide 21

Slide 21 text

ネイティブと Web のちがいネイティブ(iOS / Android) Web OS Web ブラウザ Web サイト SDK OS アプリケーション SDK

Slide 22

Slide 22 text

Web (ブラウザで動かす) SDK の難しさ • 考慮すべきレイヤーがひとつ増える • たったひとつ、されどひとつ • Web ブラウザという、ひとつ増えたレイヤーに消耗する⽇々 • ブラウザプラットフォーム、あるいはバージョン間の差異

Slide 23

Slide 23 text

Fetch API String.prototype.includes Class declarations etc.

Slide 24

Slide 24 text

http://kangax.github.io/compat-table/es6/#ie11 does NOT work for IE11

Slide 25

Slide 25 text

おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ

Slide 26

Slide 26 text

Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、  もれなく収集すること • データロストやデータの不備があってはならない

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい • ブラウザのプラットフォーム間、バージョン間における API 実装差分、  ユーザー⼊⼒の異常系チェック etc. • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に  ⽴ち向かう

Slide 34

Slide 34 text

Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい • ブラウザのプラットフォーム間、バージョン間における API 実装差分、  ユーザー操作の異常系チェック • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に  ⽴ち向かう効率よくラクして開発したい

Slide 35

Slide 35 text

おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web SDK" に求められていること • 実際の取り組み • まとめ

Slide 36

Slide 36 text

• ほぼ最新の Chrome を基準とした Graceful Degradation • ex. navigation.sendBeacon / fetch API / XMLHttpRequest / ... • (標準化されていない)ブラウザ API を過信しない • ex. navigation.userAgent 安⼼安全で信頼できる SDK を届けるために(1)

Slide 37

Slide 37 text

安⼼安全で信頼できる SDK を届けるために(2) • 外部ライブラリへの依存を極⼒減らす • 「なにもしてないのにこわれた」を防ぎたい • 今のところは↓の 2 つくらいしか利⽤していない • bestiesjs/platform.js • js-cookie/js-cookie

Slide 38

Slide 38 text

• ファイルサイズは⼩さく保つ • 「Polyﬁll ⼊れるくらいなら⾃分で書く」というスタンス • babel-polyﬁll はファイルサイズ⼤きいので… 安⼼安全で信頼できる SDK を届けるために(3)

Slide 39

Slide 39 text

• TypeScript を段階的にゆるく導⼊ • Language Server + Intellisense on VS Code => コード補完++ • strict ルールを導⼊してバリデーションの記述を強制する • ドキュメンテーションを型アノテーションでカバーする • 迷ったらとりあえず FIXME(= any のエイリアス)をつける効率よくラクして SDK を開発するために(1)

Slide 40

Slide 40 text

• Test, test, and test • Unit test は⼿厚く • SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ効率よくラクして SDK を開発するために(2)

Slide 41

Slide 41 text

効率よくラクして SDK を開発するために(2) • Test, test, and test • Unit test は⼿厚く • SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ

Slide 42

Slide 42 text

効率よくラクして SDK を開発するために(2) • TestCafe x BrowserStack => automated cross-browser E2E testing • TestCafe 実⾏時のキャプチャがいいかんじに BrowserStack へ  アップロードされる • デグレが発⽣した際の原因の切り分けに役⽴つ

Slide 43

Slide 43 text

効率よくラクして SDK を開発するために(3) • Semi-automated Deployment on CI • master ブランチでの CI pass を確認後にスクリプトを実⾏すると • セマンティックバージョニングに基づいてバージョンをあげて • ビルド -> S3 へのアップロード -> CDN のキャッシュパージ • アプリ提供者は基本的にサイトや導⼊スニペットの書き換えなしに  常に最新の SDK を利⽤できる

Slide 44

Slide 44 text

まとめ • Web SDK 開発は "Web ブラウザ" という巨⼤な壁から逃げずに  向き合っていくこと • 安⼼安全で信頼できる SDK を、効率よくラクして開発するために • 依存すくなめ型すこしテストましまし • 静的型付き⾔語や Testing tool を活⽤して省⼒化・効率化