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
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
Porting a visionOS App to Android XR
akkeylab
0
220
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
5.3k
C++20 射影変換
faithandbrave
0
560
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.9k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
370
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
337
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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