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
クロスプラットフォーム開発の真実
Search
Keisuke69
July 31, 2023
Programming
2
610
クロスプラットフォーム開発の真実
AWS DevDay2023でのセッション資料です。
React Nativeを例にクロスプラットフォームの理想と現実について個人的な経験を話しました。
Keisuke69
July 31, 2023
Tweet
Share
More Decks by Keisuke69
See All by Keisuke69
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
1.1k
波濤 / Surges
keisuke69
1
150
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
8.7k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
8.7k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.3k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
7.3k
フロントエンド開発者も知っておきたいAWS Lambda とサーバーレス / Serverless for frontend developers
keisuke69
6
7.8k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
4.6k
The Twelve-Factor App on AWS
keisuke69
16
5k
Other Decks in Programming
See All in Programming
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
590
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.6k
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
110
Ethereum_.pdf
nekomatu
0
370
EventSourcingの理想と現実
wenas
6
2.2k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
190
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.3k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
220
Realtime API 入門
riofujimon
0
140
Quine, Polyglot, 良いコード
qnighy
4
620
Featured
See All Featured
Building an army of robots
kneath
302
42k
Producing Creativity
orderedlist
PRO
341
39k
Designing the Hi-DPI Web
ddemaree
280
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Adaptive Systems
keathley
38
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
90
6.1k
Facilitating Awesome Meetings
lara
49
6.1k
Transcript
Singular Perturbations Inc Keisuke Nishitani クロスプラットフォーム開発の真実 理想と現実のギャップを暴く︕
CTO at Singular Perturbations Inc Keisuke Nishitani @Keisuke69 Programming is
a creative work. 🎨 Love Music ♫ Love Camping ⛺ Blog: https://www.keisuke69.net/ 💻 Everything will be serverless. ⚡
モバイルアプリの開発形態 • ネイティブ • AndroidまたはiOSのどちらかのみをターゲットとした開発 • 開発対象に応じて異なるプログラミング⾔語を⽤いる • 各プラットフォームのAPIを⽤いて開発する •
クロスプラットフォーム • 単⼀のコードベースで両プラットフォーム向けのアプリを開発 • 特徴の異なる様々なものが様々の提供者から提供されている • フレームワークの提供者が提供するAPIを⽤いて開発し、裏側でプラット フォーム固有のAPIが呼び出される
群雄割拠の歴史 年代 リリース 2007年 iPhone 2008年 Android 2009年 PhoneGap(Apache Cordova)
2010年 Titanium Mobile 2012年 Xamarin 2012年 Kotlin 2014年 Swift 2015年 React Native 2015年 Ionic 2018年 Flutter 2018年 Scade 2022年 .NET MAUI • iPhone登場以降、モバイルアプリの開 発を取り巻く環境は年々変わっている • PhoneGapがクロスプラットフォーム 開発の最古参︖ • クロスプラットフォーム開発には絶対 的なデファクトスタンダードが⽣まれ ていない ※正式リリース、またはそれに近いバージョンのリリースを基準とする
⼈はクロスプラットフォーム開発の夢を⾒る
⼈はクロスプラットフォーム開発の夢を⾒る • ネイティブアプリを開発するとなると両プラットフォームへの対 応が必要となる • プラットフォームごとにエンジニアを抱える必要性 • 同じアプリを出すにあたってそれぞれで対応が必要なため時間がかかる • 保守や機能強化でも多くの労⼒を必要とする
• 各OSごとにコードベースが別となり、再利⽤もできない
クロスプラットフォーム開発の理想 • 1つのコードベースだけで両プラットフォームへの対応が可能 • 1つのコードベースで両対応ということで開発リソースも半分にで きる • 各プラットフォームが持つ機能はフルに活⽤できる
現在の代表的なフレームワーク • ほぼ2強 • statista.com調べ • Flutter: 1位 46%、React Native:
2位 32% • Flutter • Google製 • プログラミング⾔語は Dart • 後発だが最近⼈気 • React Native • Meta社製 • プログラミング⾔語は JavaScript • Reactと書き⽅などが共通なのでReact経験者は⽐較的習得しやすい
現在の代表的なフレームワーク • ほぼ2強 • statista.com調べ • Flutter: 1位 46%、React Native:
2位 32% • Flutter • Google製 • プログラミング⾔語は Dart • 後発だが最近⼈気 • React Native • Meta社製 • プログラミング⾔語は JavaScript • Reactと書き⽅などが共通なのでReact経験者は⽐較的習得しやすい
なぜ使っているのか • 前⾝となるモバイルアプリの開発時に採⽤ • 当時ちゃんとしたエンジニアはおらず、深い理由なくiOS/Androidに対応す るために採⽤されたらしい • JavaScriptで書けるというのも理由だったらしい • なぜ、今も使っているのか
• モバイルアプリはその後作り直されている • 開発コストの問題 • iOSとAndroidのエンジニアをそれぞれ⽤意するコスト • それぞれのエンジニアを新たに探すコスト • 上記を踏まえた開発期間 • 当時の開発体制のスキルセット • 過去資産の流⽤性 • Flutterも気になるがDartを覚えたくはない
クロスプラットフォーム開発は幻想
苦労の歴史を振り返る ※React Native固有の問題を含む可能性があります
困難を極める脱Expo • 脱ExpoとはExpoを導⼊したReact NativeのプロジェクトからExpo を取り除くこと
そもそもExpoとは︖ Native OS React Native Expo App • React Nativeでの開発体験を向上
させるツールセットとサービス • アプリストアでの審査不要で更 新できるOTAなど利便性は⾼い • ⼀⽅でネイティブ機能の組み込 みや利⽤については制限がある
そもそもExpoとは︖ • React Nativeでの開発体験を向上 させるツールセットとサービス • アプリストアでの審査不要で更 新できるOTAなど利便性は⾼い • ⼀⽅でネイティブ機能の組み込
みや利⽤については制限がある Native OS React Native App Expo
困難を極める脱Expo • 脱ExpoとはExpoを導⼊したReact NativeのプロジェクトからExpo を取り除くこと • なぜ必要だったか • AndroidにおけるGPSの不具合がネイティブ側では対応され、React Native
でもそれに対応したバージョンがリリースされる • しかしExpoがしばらく対応しなかったため
困難を極める脱Expo • Expo ejectを実⾏するとReact Nativeではビルドできなくなった • Expo ejectしたくてもいくつかの処理がExpoによって提供されて いるライブラリを利⽤しているためejectだけでは不⾜ •
例えばGPS、カメラなど • すべて代替のライブラリへと差し替える必要性 • 頑張ってもプロダクトとしては何の進化もしていないという無⼒ 感
ネイティブに近い機能の実装は⻤⾨ • GPSやFile I/Oのようなデバイスに近いところの機能を実装しようとすると問題が起こりがち • そもそも期待通りに動かないケース • 著しく性能が出ないケース • AndroidとiOSで⼤きく違うからだと思われる
• AndroidでバックグラウンドでGPS取得ができない、など • Android、iOSともにこのあたりは制約は年々厳しくなっている • その差を吸収する有償ライブラリを導⼊して対応したがそれでもなかなか動かない • このライブラリの将来性も不安 • ⼤きめのサイズのファイルのアップロードがまともに動かない • S3へとアップロードするにあたり、ストリームで読み込みたかったもののReact Nativeでストリームを扱 う⽅法・ライブラリを⽚っ端から試してみたもののそもそも動かないことも多数 • AWS SDK for JavaScriptのlib-storageをReact Nativeで使おうとしたものの、ReadableStreamがないと⾔ われて使えない
Androidだけ激重 • 原因は不明だがとにかく遅い • 調べたところReact Nativeではあるあるの問題らしい • Hermesを有効にすることでだいぶ改善するもののやはり遅さは否 めない •
React Native⽤に最適化されたオープンソースのJavaScriptエンジン • シミュレータでの実⾏時に特に体感する • 結果的に普段の開発はiOSで動作確認をしつつ進めがちになる • これが新たな問題を⽣む
対応が置き去りにされる • サードパーティや各種サービスから公式のSDKが⽤意されていな いことが多い • Firebase • MapBox • deck.gl
• HERE • もちろんiOSやAndroid向けは存在する • コミュニティベースのものがある場合もあるが継続性に不安 • React Native Firebaseは公式に推奨されている • Maps SDK for React Nativeも公式が案内はしているがメンテナ不⾜であり 新バージョンへの対応に遅れ
その他にも多発する『Androidだけ』問題 • Androidでだけ崩れるレイアウト • iOSは割りと期待した通りにスタイリングされるがAndroidがそうならない ことが多い • Firebaseを使ったソーシャルログインの実装をしたが、Androidだ けログインできない •
react-native-videoで実装した動画再⽣でAndroidだけ動画の下に表 ⽰される謎の⿊い線 • 全般的にiOSでは期待通りに動くけどAndroidでは動かないという 事象が発⽣することが多い
その他 • 突然シミュレータでまともに動かせなくなるということが定期的に起こ る • iOSがXcode14.1以上でビルドしたものじゃないとストアに提出できな くなったものの、利⽤しているReact Nativeのバージョンが14.1ではう まくビルドできない問題 •
iOSのためにAndroidも巻き添えになる • 使ってるReact Nativeのバージョンが依存するgradleのバージョンと、 利⽤するライブラリが依存するgradleのバージョンが衝突 • Xcodeのアップデートは⻤⾨ • ビルドができなくなることも多い
そもそも新しいアプリを作って Androidですっとビルドできた試しがない
再掲: クロスプラットフォーム開発の理想 • 1つのコードベースだけで両プラットフォームへの対応が可能 • 1つのコードベースで両対応ということで開発リソースも半分にで きる • 各プラットフォームが持つ機能はフルに活⽤できる
クロスプラットフォーム開発の現実 • 1つのコードベースだけで両プラットフォームへの対応が可能(理想) • 実際にはどちらかが意図した通りに動かないケースも多い • この場合、プラットフォームで分岐させて各プラットフォーム向けの処理をわけ ることも多い • 1つのコードベースで両対応ということで開発リソースも半分にできる
(理想) • 実際にはプラットフォーム差異の吸収などに時間を取られる • なんならクロスプラットフォーム開発がゆえのハマりポイントも多くネイティブ 開発より時間がかかる可能性もある • 各プラットフォームが持つ機能はフルに活⽤できる(理想) • 期待通り動かないことも多い • ネイティブへのブリッジを作ることが可能だがそれをやるならネイティブで開発 したいお気持ち
クロスプラットフォーム開発の現実 • なぜか削られるエンジニアリソース • 本来、iOSとAndroidで1⼈ずつなのになぜかクロスプラットフォームだと1 ⼈になったりしがち • 希少なエンジニア • iOSとAndroidのエンジニアすらWebエンジニアと⽐べると少ないというの
にクロスプラットフォーム開発のエンジニアはもっと少ない • React NativeはReact使えればまだなんとかなるものの、ネイティブに近い 機能は苦労が伴う
クロスプラットフォーム開発に振り回される⽇々
結論 ⻑期的に⾒たらネイティブで開発したほうがいい
⻑期的に⾒たらネイティブで開発すべき • WebにおけるReactのような存在が⽣まれないまま流⾏が⼊れ替わ り続けている • 開発が終了した場合には⽬も当てられない • クロスプラットフォーム開発がゆえの不⽑な時間が減る • プロダクトとして⻑⽣きさせることを決めたタイミングでネイ
ティブに書き換えるべき
それでも、⼈はクロスプラットフォーム開発の夢を⾒る
気になることとかあったらいつでも @Keisuke69までDMください Photo by Daniel Andrade on Unsplash