AmplifyとReact/ReactNativeでマルチプラットフォームアプリを1ヶ月で作るAmplify meetup #02宮近 雄宇 / Yu Miyachika2020/11/27
View Slide
宮近 雄宇 / Yu Miyachika● フロントエンドエンジニア● SIer4年 -> フリーランス11年目● iOSは4のころから● Reactはここ2年● 好きなAWSAmplify, CodeBuild
お仕事について● お客様のDXのお手伝い● 3-4週でPoCをスクラム開発● スプリント期間は1日
すなわち・・・
アジリティ特化型エンジニア
だから・・・
と相性がよかった
特にReactとの組み合わせが最高ここ1年半、たくさんPoC開発やってきました
Amplifyの端的なメリット● 開幕15分でHTTPSのURLが払い出せる● 次の30分でAppSyncが立つ● 提供する価値に注力できるアジリティ重視のPoCにピッタリ!!
Amplifyの端的なデメリット● Cloud Formationの知識がないとツライ● カスタマイズしたいときはちょっと大変● 更新頻度高すぎて「いつの間に…」事案
そろそろ本題。
少し前までのモバイル開発のつらみ● フロントエンド/バックエンド● 記述量に対して得られるアウトカムが低い● OSS無しでは非同期処理がつらい● UIのステート管理がつらい⇨ とにかくDX(Developer Experience)が悪い
ソフトウェア開発は10年で大きく進化● BaaS● クロスプラットフォーム● async / await● 宣言的UI
従来のモバイル開発環境もがんばってきた● Swift UI / Combine framework● Kotlin / Coroutines⇨ FacebookがReact NativeでWeb開発者をつれてきてしまった⇨ GoogleがAndroid開発をFlutterで再定義してしまった(ついでにiOSも)
モバイル開発はクロスプラットフォーム+BaaSが台頭React Native + AWS AmplifyFlutter + Firebase日本でもじわじわ人口増加中日本ではあまり…海外では結構多い?
引越し先をさがそう…可否 / 興味 AWS Amplify Google FirebaseReact Native ○ / ◎ ○ / ○Flutter ✗(→△) / ✗ ○ / △React NativeならReactだしAmplifyあるし簡単っしょ決定
コロナで完全リモート開始から数ヶ月たったある日…プロダクトオーナーS氏社内でポッドキャスト始めたんだけど、ちょっと視聴ストリーミングアプリつくってほしいな〜?わたし過去にSwiftでやっちゃってるからReact Native+Amplifyの素振りしながらでもいっすか?えー?いいよ
開発開始。
実はストリーミングアプリ、得意分野だったのです● 無料音楽レーベルの公式アプリを2010年に個人リリース● 2016年にSwiftで書き直してリニューアルストリーミングアプリ=技術的お砂場の位置付け
開発開始から2日目…リスナーはポッドキャストの各回を選択して視聴することができるAppSync DynamoDBS3React NativeアプリAmplify APIAmplify Storage
開発開始から2日目…ちょっとデザイナーにも参加してもらって真面目にプロダクトバックログ書くわわたし昔2週間、下手すると1ヶ月ぐらいかけてたことが2日…2日…デザイナーH氏ウィッスープロダクトオーナーS氏
開発開始から2週間後…システムは、ユーザーを認証・認可できる(ログイン機能)管理者は、エピソードを投稿・編集・削除できる(管理画面)リスナーは、もっとかっこいいアプリをさわりたい(デザイン適用)
開発開始から2週間後…AppSync DynamoDBS3React NativeアプリAmplify APIAmplify StorageReact管理画面S3CloudFrontWAFAmplify HostingCognitoAmplify Authシステムは、ユーザーを認証・認可できる(ログイン機能)管理者は、エピソードを投稿・編集・削除できる(管理画面)リスナーは、もっとかっこいいアプリをさわりたい(デザイン適用)
TIPS: マルチフロントエンドの魔法の言葉$ amplify pull
開発開始から2週間後…よっしゃ運用周りもうちょい充実させたら内部向けリリースするぞわたしReact Native、レイアウトとルーティングが違うだけであとReactと全部同じやんデザイナーH氏ウィッスープロダクトオーナーS氏
開発開始から1ヶ月後…リスナーはSlackのBotで新着エピソードの配信を知ることができるリスナーはプッシュ通知で新着エピソードの配信を知ることができるあと色々細かいところ…
開発開始から1ヶ月後…AppSync DynamoDBS3React NativeアプリAmplify APIAmplify StorageReact管理画面S3CloudFrontWAFAmplify HostingCognitoAmplify AuthLambda(Slack)Lambda(PUSH通知)CloudWatchEvent(定期実行)Amplify FunctionSlackFCMリスナーはSlackのBotで新着エピソードの配信を知ることができるリスナーはプッシュ通知で新着エピソードの配信を知ることができる?
Amplify Push Notificationsにしたかった● Amplify Push Notificationsの実体はAWS Pinpoint● Firebase Analytics + Firebase Cloud Messaging的存在● AWS SNSと比べて、マーケティング寄り● 導通の確立に関するドキュメントが手薄い● トライして撃沈しました(当時は)
TIPS: APIとFunctionをつなぐ方法クエリの定義 ディレクティブ Function名LambdaResolverがこれだけで仕上がるDataSource,Resolver, Role, VTL…さよなら…戻り値の型
なにはともあれ1ヶ月で完成。
React Native + Amplify、どうだったか● Reactで作ったhooksや通信部分を流用できる● Amplifyの文脈は全く一緒● コード記述量の投資対効果抜群● レイアウトとルーティングは違う● 各ネイティブの知識は必要なときもある
React / React Native + Amplifyでマルチフロントエンド開発やっていきましょう!
ご清聴ありがとうございました