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.8k
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
920
Other Decks in Programming
See All in Programming
フロントエンドテストの育て方
quramy
9
2.5k
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
ベクトル検索システムの気持ち
monochromegane
30
8.9k
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1k
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
140
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
3.7k
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
130
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
A designer walks into a library…
pauljervisheath
205
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fireside Chat
paigeccino
37
3.3k
GitHub's CSS Performance
jonrohan
1030
460k
Code Reviewing Like a Champion
maltzj
522
39k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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