View
321
Download
0
Category
Preview:
Citation preview
ReactNa�ve実践談
ShareWis Inc.
@Kuchitama
Copyright @kuchitama, All rights reserved. 1
自己紹介
@Kuchitama(国平清貴)(株)シェアウィズ チーフエンジニア
Scala忍者
最近Rubyばっかり1児の父
Copyright @kuchitama, All rights reserved. 2
シェアウィズ大阪発 EdTech スタートアップ
Webサービス
ShareWis
ShareWisACT(近日ShareWisと統合)
その他
キャリアアップ研修
こういうのに興味がアレばご連絡ください https://goo.gl/amuTfMCopyright @kuchitama, All rights reserved. 3
シェアウィズのサービス
ShareWisReactNa�ve製https://youtu.be/qPecv5iSVIY
Copyright @kuchitama, All rights reserved. 4
質問
React使ったことあるひと？
Copyright @kuchitama, All rights reserved. 5
質問
スマーフォンアプリ作ったことあるひと？
Copyright @kuchitama, All rights reserved. 6
質問
ReactNa�ve使ったことあるひと？
Copyright @kuchitama, All rights reserved. 7
質問
ReactNa�veでアプリ作ってみたいひと？
Copyright @kuchitama, All rights reserved. 8
質問
ReactNa�veでアプリ作ってみたいひと？
やめておけ！！！！
Copyright @kuchitama, All rights reserved. 9
おしながきReactNativeとは
ReactNativeのエコシステム
Pros/Cons
実際に困ったこと
何に向いているのか
ReactNative開発でコケないために
Copyright @kuchitama, All rights reserved. 10
ReactNa�veとは
Copyright @kuchitama, All rights reserved. 11
ReactNa�veとはFB製のiOS/Androidアプリ開発環境
Copyright @kuchitama, All rights reserved. 12
ReactNa�veとはWrite once, Run everywhereここにいるみなさんには馴染み深いはず
Copyright @kuchitama, All rights reserved. 13
ReactNa�veとはWrite once, Run everywhere
Learn once, Write everywhere
1度学べば何でも作れる
Copyright @kuchitama, All rights reserved. 14
ReactNa�veとはLearn once, Write everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる
Copyright @kuchitama, All rights reserved. 15
ReactNa�veとはLearn once Run everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる
Copyright @kuchitama, All rights reserved. 16
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 17
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 18
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 19
ReactNa�veのエコシステム
Copyright @kuchitama, All rights reserved. 20
ReactNa�veのエコシステム
Package Managernpm/yarn
yarnオススメ(実際、利用中)
詳しくは@tan_go238 さんの発表で
rnpm
ReactNativeライブラリ用のパッケージマネージャ
ネイティブライブラリのリンクをある程度自動でやってくれる
Copyright @kuchitama, All rights reserved. 21
ReactNa�veのエコシステム
Con�nuous Integra�onシェアウィズ社の変遷
1. CircleCI
2. BuddyBuild
3. Jenkins
その他
MicroSoft Mobile CenterCopyright @kuchitama, All rights reserved. 22
ReactNa�veのエコシステム
Distribu�onAppHub(利用中)
MicroSoft CodePush
※リリース済みのアプリに対して、ストアを通すこと無くバージョンアップできる※ReactNativeは内部にJSがバンドルされてるだけなので、それを差し替える
Copyright @kuchitama, All rights reserved. 23
ReactNa�veのエコシステム
Librarieshttps://github.com/jondot/awesome-react-native
Copyright @kuchitama, All rights reserved. 24
Pros/Cons
Copyright @kuchitama, All rights reserved. 25
ProsReactのノウハウがそのまま使える
Reactの本読んだらReactNativeが書けた
Web技術でアプリが実装できる
ES2015/2016とか
ちょっと違うけどStyleSheetとか
1ソースでiOS/Android両方できる
画面によってOSごとにソースを分けることもできる
ネイティブパフォーマンス
Copyright @kuchitama, All rights reserved. 26
Consとはいえ、Native知識は必要
バージョンアップ早すぎ
OS/端末のバージョンアップへの追従
人材確保(採用)
Copyright @kuchitama, All rights reserved. 27
実際に困ったこと
Copyright @kuchitama, All rights reserved. 28
実際に困ったことタブレット対応
スタイル崩れる崩れる
結局、端末解像度に応じて、パターンを用意することに
つらい
Copyright @kuchitama, All rights reserved. 29
実際に困ったことバージョン設定の分散
package.json - ReactNativeアプリとしてのバージョン
Info.plist - iOSアプリとしてのバージョン
build.gradle - Androidアプリとしてのバージョン
つらい
Copyright @kuchitama, All rights reserved. 30
実際に困ったことReactNative本体のバージョンアップ
1ヶ月ごとにリリース
破壊的変更が結構入る
特にスタイルは崩れやすい
外部ライブラリが追従してない
マイグレーションでネイティブコードの変更が上書きされる
つらすぎるCopyright @kuchitama, All rights reserved. 31
実際に困ったこと
その他
Redux導入
いろいろライブラリはある
けど正直面倒
油断するとメモリを圧迫
テスト
Copyright @kuchitama, All rights reserved. 32
ReactNa�ve開発でコケないために
Copyright @kuchitama, All rights reserved. 33
ReactNa�ve開発でコケないために
開発着手前のライブラリ選定
開発が活発か？
リリースサイクルは？
Androidに対応しているか？
Copyright @kuchitama, All rights reserved. 34
ReactNa�ve開発でコケないために
Na�veではダメですか？
iOS/Androidエンジニアが居ないと厳しい
タブレット対応するなら現状はネイティブが絶対楽
そもそもNativeの方が情報量が多い
てゆうか、メジャーリリースされてないツールを使うんですか？
Copyright @kuchitama, All rights reserved. 35
ReactNa�ve開発でコケないために
Cordovaではダメですか？
Cordovaの方がまだ情報量が多い
React使えばいいんじゃない？
そこまでパフォーマンス重要ですか？
メジャーリリースされてないツールを使うんですか？
Copyright @kuchitama, All rights reserved. 36
じゃぁ何に向いてるのさ
List(Webエンジニアしかいない(ヒト)
外部に依頼できない(主にカネ)
iOS/Android分けて作る余裕がない(ヒト、カネ、時間)
パフォーマンス必須
).forall突然のScala
Copyright @kuchitama, All rights reserved. 37
最後に
Copyright @kuchitama, All rights reserved. 38
早くメジャーリリースしてくださいよ！！
Copyright @kuchitama, All rights reserved. 39
補足資料http://artsy.github.io/blog/2016/08/15/React-Native-at-Artsy/
http://qiita.com/kiita312/items/8afed1d3cb47d097ac32
Copyright @kuchitama, All rights reserved. 40
Recommended