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
カンムでの React Native の 歴史と現在 / React Native in Kanmu
Search
mururu
September 03, 2020
Technology
1
500
カンムでの React Native の 歴史と現在 / React Native in Kanmu
mururu
September 03, 2020
Tweet
Share
More Decks by mururu
See All by mururu
Go で始める将棋 AI
mururu
1
2.9k
カンム と React Native / Kanmu React Native
mururu
0
3.7k
Go製のネットワーククライアントに対する継続的 / Fuzzing for network client in Go
mururu
4
2.7k
Building FIDO2 server in Go
mururu
2
7k
「ElixirがリアルタイムWebに強い」 というのは本当か?
mururu
13
6.5k
Erlang: Improve the performance of cryptographic functions by AES-NI
mururu
1
250
Treasure Data Summer Intern 2015 Final Report
mururu
0
3.1k
Elixir 1.0
mururu
3
850
Why Elixir
mururu
9
2k
Other Decks in Technology
See All in Technology
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
An introduction to Claude Code SDK
choplin
3
2.5k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
200
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
250
"Découvrir le Liberland"
rlifchitz
0
120
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
160
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
190
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
16
4.7k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
770
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
480
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Done Done
chrislema
184
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Site-Speed That Sticks
csswizardry
10
710
Fireside Chat
paigeccino
37
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
95
6.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
460
140k
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!
おわり