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
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
520
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
AIでLINEスタンプを作ってみた
eycjur
1
220
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
ProxyによるWindow間RPC機構の構築
syumai
3
1k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
旅行プランAIエージェント開発の裏側
ippo012
2
850
Rancher と Terraform
fufuhu
2
200
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
470
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
私の後悔をAWS DMSで解決した話
hiramax
4
190
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Site-Speed That Sticks
csswizardry
10
810
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Making Projects Easy
brettharned
117
6.4k
Building Adaptive Systems
keathley
43
2.7k
BBQ
matthewcrist
89
9.8k
The Invisible Side of Design
smashingmag
301
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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