Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
カンムでの React Native の 歴史と現在 / React Native in Kanmu
mururu
September 03, 2020
Technology
1
250
カンムでの React Native の 歴史と現在 / React Native in Kanmu
mururu
September 03, 2020
Tweet
Share
More Decks by mururu
See All by mururu
Go で始める将棋 AI
mururu
1
1.5k
カンム と React Native / Kanmu React Native
mururu
0
2.5k
Go製のネットワーククライアントに対する継続的 / Fuzzing for network client in Go
mururu
4
1.9k
Building FIDO2 server in Go
mururu
2
4.8k
「ElixirがリアルタイムWebに強い」 というのは本当か?
mururu
13
6.1k
Erlang: Improve the performance of cryptographic functions by AES-NI
mururu
1
150
Treasure Data Summer Intern 2015 Final Report
mururu
0
2.9k
Elixir 1.0
mururu
3
570
Why Elixir
mururu
9
2k
Other Decks in Technology
See All in Technology
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
2
170
20230117_JAWS-UG_朝会_41_LT資料
tsumita
0
290
LINE iOSエンジニアの日々 / LINE iOS Engineer Days
line_developers
PRO
1
120
マネーフォワードクラウドを支える事業者基盤
machisuke
0
150
Virtual Thread - 導入の背景と、効果的な使い方 -
skrb
3
230
FlexScan HD2452Wの 後継を探して
tring
0
120
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
5
1.1k
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
210
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
8
1.7k
The Stable Team - 機能する安定したチームをつくる - / The Stable Team
takaking22
14
7.4k
「エセ自己組織化」症候群から脱却し、約束を守るプロフェッショナルなアジャイルチームになるには -アジャイル時代のマネジメント進化論- / #RSGT2023
visional_engineering_and_design
43
22k
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
160
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
116
7.6k
A Philosophy of Restraint
colly
193
15k
Agile that works and the tools we love
rasmusluckow
320
20k
Automating Front-end Workflow
addyosmani
1351
200k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
Done Done
chrislema
178
14k
How to Ace a Technical Interview
jacobian
270
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
KATA
mclloyd
12
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
How to train your dragon (web standard)
notwaldorf
66
4.2k
Transcript
カンムでの React Native の 歴史と現在 Kanmu, Inc. 伊藤 友気 【Kanmu
× Nature】React Native Meetup
2 伊藤 友気 Kanmu, Inc. @mururu @murururu ⾃⼰紹介
3 バンドルカードを作ってます
4 歴史 現在の構成 これから 1 2 3 アジェンダ
歴史 1
6 バンドルカードのはじまり • バンドルカードの前にやっていたプロダクトの反省 から⾃分たちでカードを発⾏するべきだと判断 • 当時の開発チーム • 開発者3⼈(内⼀⼈は兼デザイナー) •
3⼈とも Web の開発経験はあったがネイティブ開 発経験はない
7 バンドルカードのはじまり • 2015年12⽉ 開発開始 • 2016年9⽉ iOS版リリース • 2016年12⽉
Android版リリース
8 なぜ React Native だったのか • ネイティブ開発経験のない少数の開発者で、素早く アプリをそれなりのクオリティでリリースしたかっ た
9 課題① Android 版リリース 開発初期は iOS のみでとりあえず実装してリリース し、Android 版もそこまで⼤きな変更は必要ないと⾒ 込んでいた
実際にはアニメーション系などいくつかクラッシュす る部分の発⽣や、iOS しか対応していないライブラリ なども導⼊してしまっていた プラットフォームによる分岐、機能の変更などによ り、なんとかリリースにこぎつける 後にアプリケーションレベルでのプラットフォームご との分岐は解消 →
10 課題② Android 4.4 系対応 もともと Android 4.4 系で原因特定が難しいクラッ シュが発⽣しがちであった
Android の 64bit 対応のため React Native 0.60 への アップデートを試みた所、Android 4.4 系でのクラッ シュが爆増し断念 4.4 系のサポート終了を決定 終了までの間 Multiple APK にして 64bit対応版/⾮対応 版を別ブランチで管理 →
現在の構成 2
12 現在の構成 • React Native, JavaScript, Flow, Redux, Storybook, Firebase
など • ⽇常のほとんどの開発が React の世界のエコシステ ムの範囲ですんでいる • Expo は使っていない • リリースサイクルはおよそ週1
13 ビルド/リリース周り • 基本的にビルド/リリースはfastlaneで完結させ、CI はBitriseにのせている • lint や Jest でのテストなどは社内の別のプロジェク
トと共通で CircleCI 利⽤ • 開発版の社内への配布は DeployGate を利⽤
14 ビルド/リリース周り
15 API 連携 • JSON Hyper-Schema からAPIクライアントの実装を ⾃動⽣成している • バックエンドのAPIサーバーも同じスキーマからリク
エスト/レスポンスの構造体やバリデーション実装を ⾃動⽣成している
16 デバッグ • react-native-debugger • react-devtools や redux-devtools 相当の機能 •
ネットワークのデバッグ • ネイティブのエレメントの検証など • Flipper に移⾏予定
17 Storybook • いわゆるUIコンポーネントカタログ的にはなっておら ず、コンポーネント開発時にコンポーネントのみを確 認するような⽤途で利⽤している • ほぼ全てのコンポーネント/ページをStorybook化して いる •
Storyshots で Snapshot testing を⾏っている
18 • Sentry • 当初よりエラートラッキングに利⽤ • Firebase Crashlytics • クラッシュレポート
• Firebase で記録しているイベント紐付けられる ので便利 エラートラッカー/クラッシュレポート
19 • Analytics • ⾏動ログは Firebase Analytics で収集 • react-navigation
の遷移イベントをフックにペー ジ遷移のトラッキングなども • Remote Config • 任意のタイミングで表⽰を切り替えたい場合 (ex. アドホックな⽂⾔の変更 • A/B テスト Firebase の他の機能
これから 3
21 TypeScript 移⾏ • 現状は Flow + JavaScript • そろそろ
Flow をサポートしないライブラリも出て きているので、⾝動きが取れなくなる前に TypeScript に移⾏したい • 変換ツールもあるが⼀筋縄では⾏かない感じがして いるので、泥臭い作業になりそう
22 デザイン連携の効率化 • 現状、実装とデザインの⼀致してない部分がある • ⼀貫したUIを素早く効率的に提供できるようにした い • Atomic Design
ベースでコンポーネントをデザイ ナーと共に認識を合わせながら整理している
まとめ 4
24 まとめ • Web の開発者ならば基本的に開発にはすぐ⼊れる • ただしハマったときはネイティブの知識がないとや はりしんどい • バンドルカードは都度ハマりながら進んできました
We are hiring!
おわり