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
950
Other Decks in Programming
See All in Programming
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.1k
dynamic!
moro
9
6.9k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
私はどうやって技術力を上げたのか
yusukebe
43
18k
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
CSC509 Lecture 03
javiergs
PRO
0
330
Model Pollution
hschwentner
1
190
XP, Testing and ninja testing ZOZ5
m_seki
3
400
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.2k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
It's Worth the Effort
3n
187
28k
RailsConf 2023
tenderlove
30
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Cost Of JavaScript in 2023
addyosmani
53
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Building an army of robots
kneath
306
46k
Into the Great Unknown - MozCon
thekraken
40
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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