Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is React Native?

What is React Native?

React.js x React Native meetup 説明資料



March 15, 2017


  1. What is React Native?

  2. Basic specifications ࠷৽όʔδϣϯ 0.42.0 ରԠϓϥοτϑΥʔϜ iOS, Android, (UWP) ߋ৽ස౓ ݄ʹ

    1 ճ ݴޠ ECMAScript 2015 ඪ४ಉࠝπʔϧηοτ flow, Jest ඞཁͳ஌ࣝɾεΩϧ React.js, Xcode, gradle https://github.com/Microsoft/react-native-windows https://facebook.github.io/react-native/blog/2017/01/07/monthly-release-cadence.html
  3. Roadmap https://github.com/facebook/react-native/wiki/Roadmap https://react-native.canny.io/feature-requests • A standard navigation library for hybrid

    apps • Better maps • An improved ListView • Improved packager • Turn on Nodes by default for new React Native apps • Significantly improve performance, focusing on Android • Share C++ code between Android and iOS bridges • Faster app reloads during development • Better templates for creating new apps • A better "create-react-native-app" workflow • A new React Native tutorial
  4. Learn once, write anywhere Keeping development velocity https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/ Merits for

    React.js developers for native developers Native experience for users
  5. Native experience It's possible to reimplement these components on the

    web, but our reimplementations never feel exactly like their native counterparts, and they also don't get updated automatically with changes to the platform.
  6. Native experience Web ্Ͱ͜ΕΒͷίϯϙʔωϯτΛ࠶࣮૷͢Δ͜ͱ͸Մ ೳ͕ͩɺͦΕͰ͸ωΠςΟϒͷରԠ͢Δίϯϙʔωϯτ ͕΋ͨΒ͢ମݧ·Ͱ࠶ݱ͢Δ͜ͱ͸Ͱ͖ͳ͍ɻ͞Βʹɺ ͜ͷ΍ΓํͰ͸ϓϥοτϑΥʔϜͷΞοϓσʔτʹΑΔ ԸܙΛڗडͰ͖ͳ͍ɻ

  7. Learn once, write anywhere It's worth noting that we're not

    chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”
  8. Learn once, write anywhere զʑ͸ʮҰ౓ॻ͍ͨΒͲ͜Ͱ΋ಈ͘ʯͱ͍͏͜ͱΛͦΕ ΄Ͳॏࢹ͍ͯ͠ͳ͍ɻҟͳΔϓϥοτϑΥʔϜ͸ҟͳΔ֎ ݟɺख৮ΓɺೳྗΛ࣋ͭɻͦͷͨΊɺ·ͩϓϥοτϑΥʔ Ϝ͝ͱʹݸʑͷΞϓϦΛ։ൃ͢΂͖ͩͱߟ͍͑ͯΔɻ͕ɺ ಉ͡։ൃऀ͕ɺબΜͩϓϥοτϑΥʔϜ͢΂ͯͰɺجૅత ͳٕज़Λֶͼͳ͓͢͜ͱͳ͠ʹΞϓϦέʔγϣϯΛ࡞੒

    Ͱ͖ͳ͚Ε͹ͳΒͳ͍ɻզʑ͸͜ͷΞϓϩʔνΛʮҰ౓ ֶΜͩΒͲ͜Ͱ΋ॻ͚ΔʯͱݺΜͰ͍Δɻ
  9. Learn once, write anywhere http://qiita.com/gonta616/items/050a72aadcce44ec9774

  10. Keeping development velocity When building on the web, we can

    simply save our files and reload the browser to see the result of our changes. On native, however, we need to recompile after every change, even if we just want to shift text a few pixels over on the screen. As a result, engineers end up working a lot more slowly Since React components are just pure, side-effect-free functions that return what our views look like at any point in time, we never need to read from our underlying rendered view implementation in order to write to it.
  11. Keeping development velocity Web ։ൃͰ͸ɺ୯७ʹϑΝΠϧΛอଘ͠ϒϥ΢βʔͰϦ ϩʔυ͢Ε͹݁Ռ͕ݟ͑ͨɻ͔͠͠ωΠςΟϒͰ͸ςΩ ετͷදࣔҐஔΛ਺ϐΫηϧม͑Δ͚ͩͷมߋͰ͋ͬͯ΋ɺ ͦͷͨͼʹ࠶ίϯύΠϧ͕ඞཁʹͳͬͨɻ݁Ռͱͯ͠ɺΤ ϯδχΞͷ࢓ࣄ଎౓͸େ෯ʹམͪͨɻ React

    ίϯϙʔωϯτ͸೚ҙͷλΠϛϯάͰͲ͏Έ͑Δ ͔Λฦ͚ͩ͢ͷ෭࡞༻ͷͳ͍ؔ਺ͳͷͰɺ௿ϨΠϠʔͷ ࣮૷Λؾʹ͢Δ͜ͱͳ͘ϏϡʔΛॻ͍͍ͯ͘͜ͱ͕Ͱ͖ Δɻ
  12. Comparison way native experience development velocity developers in Japan React

    Native React.js ◦ ◦ ◦ Cordova any ☓ ◦ ? Titanium MVC ˚ ☓ ? NativeScript AngularJS ◦? ◦ ◦ Weex Vue.js ◦? ☓? ˚ Flutter Dart ◦? ◦ ?