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 &nbsp Firebase
• Firebase Hosting   Firebase
• Netlify: All-in-one platform for automating modern web projects
• Cloud Functions - クラウド サービスを構築して接続するためのサーバーレス環境   Google Cloud Platform
• つらいこともあるが、そこを楽しめる人にきてもらい広めてもらえれば良い