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 説明資料

januswel

March 15, 2017
Tweet

More Decks by januswel

Other Decks in Programming

Transcript

  1. What is
    React Native?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  6. Native experience
    Web ্Ͱ͜ΕΒͷίϯϙʔωϯτΛ࠶࣮૷͢Δ͜ͱ͸Մ
    ೳ͕ͩɺͦΕͰ͸ωΠςΟϒͷରԠ͢Δίϯϙʔωϯτ
    ͕΋ͨΒ͢ମݧ·Ͱ࠶ݱ͢Δ͜ͱ͸Ͱ͖ͳ͍ɻ͞Βʹɺ
    ͜ͷ΍ΓํͰ͸ϓϥοτϑΥʔϜͷΞοϓσʔτʹΑΔ
    ԸܙΛڗडͰ͖ͳ͍ɻ

    View full-size slide

  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.”

    View full-size slide

  8. Learn once, write anywhere
    զʑ͸ʮҰ౓ॻ͍ͨΒͲ͜Ͱ΋ಈ͘ʯͱ͍͏͜ͱΛͦΕ
    ΄Ͳॏࢹ͍ͯ͠ͳ͍ɻҟͳΔϓϥοτϑΥʔϜ͸ҟͳΔ֎
    ݟɺख৮ΓɺೳྗΛ࣋ͭɻͦͷͨΊɺ·ͩϓϥοτϑΥʔ
    Ϝ͝ͱʹݸʑͷΞϓϦΛ։ൃ͢΂͖ͩͱߟ͍͑ͯΔɻ͕ɺ
    ಉ͡։ൃऀ͕ɺબΜͩϓϥοτϑΥʔϜ͢΂ͯͰɺجૅత
    ͳٕज़Λֶͼͳ͓͢͜ͱͳ͠ʹΞϓϦέʔγϣϯΛ࡞੒
    Ͱ͖ͳ͚Ε͹ͳΒͳ͍ɻզʑ͸͜ͷΞϓϩʔνΛʮҰ౓
    ֶΜͩΒͲ͜Ͱ΋ॻ͚ΔʯͱݺΜͰ͍Δɻ

    View full-size slide

  9. Learn once, write anywhere
    http://qiita.com/gonta616/items/050a72aadcce44ec9774

    View full-size slide

  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.

    View full-size slide

  11. Keeping development
    velocity
    Web ։ൃͰ͸ɺ୯७ʹϑΝΠϧΛอଘ͠ϒϥ΢βʔͰϦ
    ϩʔυ͢Ε͹݁Ռ͕ݟ͑ͨɻ͔͠͠ωΠςΟϒͰ͸ςΩ
    ετͷදࣔҐஔΛ਺ϐΫηϧม͑Δ͚ͩͷมߋͰ͋ͬͯ΋ɺ
    ͦͷͨͼʹ࠶ίϯύΠϧ͕ඞཁʹͳͬͨɻ݁Ռͱͯ͠ɺΤ
    ϯδχΞͷ࢓ࣄ଎౓͸େ෯ʹམͪͨɻ
    React ίϯϙʔωϯτ͸೚ҙͷλΠϛϯάͰͲ͏Έ͑Δ
    ͔Λฦ͚ͩ͢ͷ෭࡞༻ͷͳ͍ؔ਺ͳͷͰɺ௿ϨΠϠʔͷ
    ࣮૷Λؾʹ͢Δ͜ͱͳ͘ϏϡʔΛॻ͍͍ͯ͘͜ͱ͕Ͱ͖
    Δɻ

    View full-size slide

  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 ○? ○ ?

    View full-size slide