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
Repro の Web SDK 開発を支える技術 / How to deal with Web...
Search
cheezenaan
December 04, 2018
Programming
3
2.9k
Repro の Web SDK 開発を支える技術 / How to deal with Web SDK development at Repro
Repro Tech Meetup #5 - Frontend Reliablity,
Supported by NAVITIME JAPAN
cheezenaan
December 04, 2018
Tweet
Share
More Decks by cheezenaan
See All by cheezenaan
Progressive Repro Frontend #vuefes
cheezenaan
3
940
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
950
NEWT Backend Evolution
xpromx
1
140
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
NPOでのDevinの活用
codeforeveryone
0
900
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Goで作る、開発・CI環境
sin392
0
260
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
It's Worth the Effort
3n
185
28k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Ace a Technical Interview
jacobian
278
23k
A better future with KSS
kneath
238
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Transcript
Repro の Web SDK 開発を⽀える技術 Repro Tech Meetup #5 -
Frontend Reliability - supported by NAVITIME JAPAN #reprotech December 04, 2018 @cheezenaan
console.info(me) • Name: cheezenaan • Job: Software Engineer at Repro
Inc. (2018.08 - now) • Twitter: @cheezenaan • GitHub: cheezenaan
https://repro.io/
Web / App Marketing Automation https://repro.io/
https://repro.io/ アプリの継続利⽤を やめそうなユーザー だけに プッシュ通知を送りたい
https://prtimes.jp/main/html/rd/p/000000064.000013569.html
https://repro.io/
https://repro.io/
おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web
SDK" に求められていること • 実際の取り組み • まとめ
話すこと • JavaScript を⽤いた Web SDK 開発において⼤切にしている 価値観や考え⽅ • SDK
開発の現場におけるハマりどころや悩み、苦難 • どちらかというとポエム要素が多いかも
話さないこと • Repro 全体のアーキテクチャに関する説明 • 具体的なライブラリやフレームワークの使い⽅や設定 • 特定のブラウザやライブラリに対する愚痴
よろしくおねがいします
おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web
SDK" に求められていること • 実際の取り組み • まとめ
そもそも SDK とは?
そもそも SDK とは? • Software Development Kit の略 • つまり?
• アプリ提供者(サプライヤー)向けの便利なライブラリ集みたいなもの
Repro と SDK • SDK を通してアプリ利⽤者(ユーザー)の情報を Repro に送って • 送られてきたデータをもとにアプリの利⽤状況を解析したり
• ユーザーに対してマーケティング施策を実施する
None
Web SDK
Web (ブラウザ上で動作する) SDK
Web (ブラウザ上で動作する) SDK
ネイティブと Web のちがい ネイティブ(iOS / Android) Web OS Web ブラウザ
Web サイト SDK OS アプリケーション SDK
Web (ブラウザで動かす) SDK の難しさ • 考慮すべきレイヤーがひとつ増える • たったひとつ、されどひとつ • Web
ブラウザという、ひとつ増えたレイヤーに消耗する⽇々 • ブラウザプラットフォーム、あるいはバージョン間の差異
Fetch API String.prototype.includes Class declarations etc.
http://kangax.github.io/compat-table/es6/#ie11 does NOT work for IE11
おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web
SDK" に求められていること • 実際の取り組み • まとめ
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない 安⼼安全で 信頼できる SDK を 提供したい
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない &&
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない なるべく多くの Web ブラウザ上で 動かしたい
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない とはいえ
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない プラットフォーム / バージョン どこまで対応すればいいの
Repro の Web SDK に求められること • SDK を導⼊したアプリ本来の価値を毀損しないこと • SDK
がクラッシュしてもアプリの挙動を⽌めてはならない • SDK を導⼊したことでアプリの性能を悪化させてはならない • 分析やマーケティング施策へ活⽤するに⾜りうるデータを、 もれなく収集すること • データロストやデータの不備があってはならない ビジネス要求と 開発リソース次第
Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい
• ブラウザのプラットフォーム間、バージョン間における API 実装差分、 ユーザー⼊⼒の異常系チェック etc. • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に ⽴ち向かう
Repro の Web SDK "開発" に求められること • ミス少なくスピーディに、最速でユーザーに価値を届けたい • デグレ発⽣を最⼩限に抑えたい
• ブラウザのプラットフォーム間、バージョン間における API 実装差分、 ユーザー操作の異常系チェック • 開発速度の低下を最⼩限に抑えたい • 開発メンバーの増加、ビジネス要件の複雑化、コード規模の拡⼤ etc. に ⽴ち向かう 効率よく ラクして 開発したい
おしながき • "Web SDK を開発する" ということ、あるいはその難しさ • "Repro の Web
SDK" に求められていること • 実際の取り組み • まとめ
• ほぼ最新の Chrome を基準とした Graceful Degradation • ex. navigation.sendBeacon /
fetch API / XMLHttpRequest / ... • (標準化されていない)ブラウザ API を過信しない • ex. navigation.userAgent 安⼼安全で信頼できる SDK を届けるために(1)
安⼼安全で信頼できる SDK を届けるために(2) • 外部ライブラリへの依存を極⼒減らす • 「なにもしてないのにこわれた」を防ぎたい • 今のところは↓の 2
つくらいしか利⽤していない • bestiesjs/platform.js • js-cookie/js-cookie
• ファイルサイズは⼩さく保つ • 「Polyfill ⼊れるくらいなら⾃分で書く」というスタンス • babel-polyfill はファイルサイズ⼤きいので… 安⼼安全で信頼できる SDK
を届けるために(3)
• TypeScript を段階的にゆるく導⼊ • Language Server + Intellisense on VS
Code => コード補完++ • strict ルールを導⼊してバリデーションの記述を強制する • ドキュメンテーションを型アノテーションでカバーする • 迷ったらとりあえず FIXME(= any のエイリアス)をつける 効率よくラクして SDK を開発するために(1)
• Test, test, and test • Unit test は⼿厚く •
SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ 効率よくラクして SDK を開発するために(2)
効率よくラクして SDK を開発するために(2) • Test, test, and test • Unit
test は⼿厚く • SDK 単体のふるまいを正常系・異常系もれなく • E2E test は浅く広く • 主要なシナリオだけをクロスブラウザで確認してデグレを防ぐ
効率よくラクして SDK を開発するために(2) • TestCafe x BrowserStack => automated cross-browser
E2E testing • TestCafe 実⾏時のキャプチャがいいかんじに BrowserStack へ アップロードされる • デグレが発⽣した際の原因の切り分けに役⽴つ
効率よくラクして SDK を開発するために(3) • Semi-automated Deployment on CI • master
ブランチでの CI pass を確認後にスクリプトを実⾏すると • セマンティックバージョニングに基づいてバージョンをあげて • ビルド -> S3 へのアップロード -> CDN のキャッシュパージ • アプリ提供者は基本的にサイトや導⼊スニペットの書き換えなしに 常に最新の SDK を利⽤できる
まとめ • Web SDK 開発は "Web ブラウザ" という巨⼤な壁から逃げずに 向き合っていくこと •
安⼼安全で信頼できる SDK を、効率よくラクして開発するために • 依存すくなめ型すこしテストましまし • 静的型付き⾔語や Testing tool を活⽤して省⼒化・効率化
俺たちの戦いはこれからだ!
End