17. React Nativeをやんや

Show Notes

なぜ、React Native を選んだのか

• React Native - A framework for building native apps using React
• Monaca - HTML5 ハイブリッドアプリ開発プラットフォーム
• Our Projects - Open Source at Facebook - Facebook Code
• React Native ShowCase
• 別荘&コンドミニアムをレンタル - Airbnb
  • すべて、React Native で作られているらしい
• 【増枠しました！】React.js meetup × React Native meetup - connpass
• Androider から見る React Native // Speaker Deck
• React Native at Instagram
  • Instagram は React Native と Native のコードでできている

React Native のつらみ

• Web 開発者が React Native で 開発から本番運用までして辛かった事 // Speaker Deck
• React Native 開発のつらい点まとめ – MMiyauchi Blog
  • ことあるごとに、パッケージを追加していく開発スタイル
  • React Native のアップデートでコンポーネントがエラーとなることがよくある
  • React と React Native が同時にアップデートされる
• React v15.5.0 - React Blog
  • React が prop-types と createReactClass を外部化
• GitHub - reactjs/react-codemod: React codemod scripts
  • prop-types を置換してくれるツール
• CharlesMangwa/react-native-simple-markdown: React Native Markdown component (iOS & Android)
• 日本語 — WordPress
  • WP REST API v2 Documentation
  • Wordpress を API として利用し、React Native のアプリケーションを作っている
• Web での React のライフサイクルメソッドがネイティブアプリにマッチしているとはいえない
• Phenomic, a modular website compiler (static site generator)
• React Native に Web を寄せる
• lelandrichardson/react-primitives: Primitive React Interfaces Across Targets
• Web は Native に寄せていくか
• Web エンジニアは Web の考えで、Native コードを書いてしまう
• React Native の Scene は画面を積み上げていく形、画面遷移は Web の Routing と異なる
• よく使われる定番のパッケージすら安定していない・ハマる
• aksonov/react-native-router-flux: React Native Router based on new ReactNavigation.org API
  • 小さなツラミがいっぱいあるライブラリ
• Race condition when quickly navigating between scenes · Issue #1266 · aksonov/react-native-router-flux
  • Scene の高速移動するとおきるバグ
• React Navigation
  • 日本では React Navigation は日本の文献が少なく、react-native-router-flux のほうが多い
• 公式のドキュメントを読んでおくべき
• GitHub Issues を読んでる - React Native は、Issue が 1100 以上ある - Issue が多いと、問題解決をしている Issue がありそう
• react-native-router-flux 導入時に出る No bundle url present
  • Qiita の記事に引用されたことがある
• @providesModule naming collision error after installing react-native-router-flux · Issue #1816 · aksonov/react-native-router-flux
  • 引用された Issue
• Error with the latest version of React Native 0.43.0 · Issue #1761 · aksonov/react-native-router-flux
  • yugo がコメントをしている Issue
• V4 announcement, v3 is obsolete now; closes #1,#2,#3,#4,#5,#6,#7,#8,#… · aksonov/react-native-router-flux@c9a632c
  • V4 docs; closes #1,closes #2,closes #3,closes #4,closes #5,closes #6,… · aksonov/react-native-router-flux@97e89ae
  • react-native-router-flux version 4 へアップデートする際の対応
• React Naitve で YouTube 埋め込もうとしたら 1 日潰した話
• inProgress-team/react-native-youtube: A <YouTube/> component for React Native.
• jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
  • デバッガの動作が不安定で重いこともある
• 初期起動時エラーを起こすことがある
• Expo — Easily build React Native applications
• CocoaPods.org
• Native に精通していないと、ビルド実行時のエラー対応がつらい

iOS Android の各 OS の整合性、各ライブラリの考え方

• Picker
• yugo さんのツイート: "探すより作るほうが 20 倍くらい早かった https://t.co/Th30mSW5ZD"
  • 自前で作った Picker
• Learn once, write anywhere
• Vue.js Meetup - connpass
• Weex - The Apache Software Foundation!
• 「Write once, run everywhere」「Write once, run anywhere」
• 「Learn once, write anywhere」は現実を帯びてる

React Native Meetup

• React native で 8 個アプリを作って 1 個リリースして 使ったおすすめツールを紹介
• React Native Meetup #6 - connpass
  • 日本での盛り上がりについて
• 【名古屋城】React Native Meetup in 名古屋城 - compass

まとめ

• 今後、React Native とどのように付き合っていくか
• スピードは力
• jQuery
  • Write less do more
• 共通化できるところは共通化していく
• Read Me · Redux
• BFF Backend For Frontend
• Firebase
• mBaaS でサーバー開発不要！ - ニフティクラウド mobile backend
• satsuki0221/react-native-ncmb: Use Nifty mobile backend 's REST API to correspond to React Native
  • yugo が作成したニフティクラウド mobile backend の REST API を使用して React Native に対応するもの
• Firebase Realtime Database   Firebase
• Firebase Hosting   Firebase
• Netlify: All-in-one platform for automating modern web projects
• Cloud Functions - クラウド サービスを構築して接続するためのサーバーレス環境   Google Cloud Platform
• つらいこともあるが、そこを楽しめる人にきてもらい広めてもらえればよい