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

Getting Started with React Native

Getting Started with React Native

Presenting a talk on React Native at the Google Developers Group DevFest 2016, Ahmedabad

Mahendra Liya

November 26, 2016
Tweet

Other Decks in Technology

Transcript

  1. Agenda • Native vs Cross-platform • React and Core Concepts

    • Intro to React Native • Who is using React Native? • Setup and HelloReact example
  2. Native vs Cross-platform • Has been an ongoing debate •

    Advantages of Cross-platform: • Reduced development cost & time • Better code reuse and maintenance • Allows to launch on more than one platform • Disadvantages of Cross-platform: • Sluggish performance • Don’t get “natural” native app feel • Platform specific UI / UX issues
  3. What do we infer? • There is no silver bullet

    – no “One Size Fits All” • Native apps and cross-platform apps both have their own place • Each mobile project should be evaluated separately • Clients’ budget and expected timeframe plays a vital role
  4. React and Core Concepts • JavaScript library developed by Facebook

    for building user-interfaces • Its – Declarative and Component-based • React was inspired by XHP, which is a component framework for PHP • The problem with XHP was: dynamic web applications require many roundtrips to the server and XHP didn’t solve this • React was created by Jordan Walke, a software engineer at Facebook, with intension to take XHP to the browser using JavaScript. And the result was ReactJS • In the MVC paradigm, React is just the View (V) part.
  5. Continues… • DOM Manipulation is expensive • ReactJS is the

    first one to address this seriously, making it a faster UI rendering library • It works by storing the application state internally, and re-rendering the content to the browser (DOM Manipulation) only when when the state changes • React App has a shape of a tree of components. When an update happens, it usually only affects a sub-tree. React only re-renders this sub-tree and not the entire page. • Facebook built an effective “diff-ing” algorithm which understands when the state tree has changed. • The initial conventional approach of “diff-ing” has an O(n^3) complexity where n is the number of nodes in the tree. For a large web-application with 10K DOM nodes, the “diff-ing” of tree would require 17 minutes on a 1 GHz CPU. • Facebook engineers were, initially, able to optimize it to O(n^2) complexity but later were able to achieve O(n) complexity by using a Hash map of DOM elements containing unique keys
  6. Core Concepts • Virtual DOM • Declarative Components • One-Way

    Data Flow • “Learn once, write anywhere” as oppposed to “Write once, run anywhere”
  7. Declarative Components • React is Declarative and not Imperative •

    Declarative is saying – what you want • Imperative is saying – how to achieve it Declarative A tower of 3 blocks Imperative 1. Put block A 2. Put block B on A 3. Put block C on B
  8. One-Way Data Flow • In React, the data flow is

    in one direction: Handle Event -> Update State -> Re-render to Virtual DOM -> Reconcile Browser DOM • In other words, if you create a form that updates state, when you update the form you’ll have to use onChange on the element and dispatch a function. • Two-way binding on the other hand, directly links the state to the element, so if one changes, the other immediately changes as well. • React doesn’t allow HTML to change the component. The HTML can only raise events which the component responds to.
  9. Intro to React Native • React Native is a framework

    for building native apps with React. • React Native comes with all the core concepts of React discussed earlier • Its still coded in JavaScript and most importantly, the mobile apps developed with React Native don’t run inside a WebView / UIWebView • Currently, supports iOS and Android • React Native allows faster app building by eliminating the need to recompile the code each time you make some change. It allows to run new code while retaining the existing application state. • Uses same fundamental UI building blocks as regular iOS and Android apps. • It combines smoothly with components written in Java, Objective-C or Swift.
  10. Setup • Well documented setup instructions https://facebook.github.io/react-native/docs/getting-started.html 1. brew install

    node 2. brew install watchman 3. npm install -g react-native-cli 4. Download and Install Android SDK - Make sure to install Marshmallow 5. Setup the ANDROID_HOME environment variable and add the tools and platform-tools directory to the path export ANDROID_HOME=~/Library/Android/sdk Export PATH=${PATH}:${ANDROID_HOME}/tools Export PATH=${PATH}:${ANDROID_HOME}/platform-tools 6) react-native init HelloWorld && cd HelloWorld 7) react-native run-android