react native: building native ios apps with javascript

Download React native: building native iOS apps with javascript

Post on 14-Jan-2017

918 views

Category:

Mobile

5 download

Embed Size (px)

TRANSCRIPT

  • React NativeCodePot 2015

    Jarek Potiuk CTO, Polidea

    1

  • Useful links

    http://www.reactnative.com/ - your starting page for everything react native

    http://facebook.github.io/react-native/docs/ - react native documentation

    http://facebook.github.io/react/ - your starting point to learn about react patterns and react.js

    http://facebook.github.io/react/docs/ - react (react.js) docs

    2

    http://www.reactnative.com/http://facebook.github.io/react-native/docs/http://facebook.github.io/react/http://facebook.github.io/react/docs/http://facebook.github.io/react/docs/

  • Workshop resources

    Github repository: https://github.com/potiuk/codepotreact

    Additional files for tasks: https://goo.gl/6evr5g

    3

    https://github.com/potiuk/codepotreacthttps://github.com/potiuk/codepotreacthttps://goo.gl/6evr5ghttps://goo.gl/6evr5ghttps://goo.gl/6evr5g

  • not a Hybrid App framework no HTML (DOM) no CSS (as we know it) no cross-platform app tool no, you cannot use jquery plugins with it

    What RN is not

    4

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    What RN is

    Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

    5

  • independent from: data models internal application logic application state machine design patterns for application architecture

    no two-way data-binding great for modern architectures (ex. DDD)

    and frameworks (ex. Flux)

    No application architecture binding

    6

  • Prerequisites

    Have MacBook Register at http://apple.developer.com Download XCode (7-beta or 6.4) and

    simulator (Preferences -> Downloads) ! Fullfill prerequisites from: http://facebook.

    github.io/react-native/docs/getting-started.html

    7

    http://apple.developer.comhttp://facebook.github.io/react-native/docs/getting-started.htmlhttp://facebook.github.io/react-native/docs/getting-started.htmlhttp://facebook.github.io/react-native/docs/getting-started.htmlhttp://facebook.github.io/react-native/docs/getting-started.html

  • TASK1. Create and run application

    Create project> npm install -g react-native-cli

    > react-native init CodepotReactMine

    In package.json, change react to ^0.10.0-rc and update:

    > npm update Open .xcodeproject in XCode Run the app in the simulator

    8

  • Take a good look at the files

    IntelliJ has good support (JSX Harmony) package.json -> js dependencies index.ios.json -> main file AppDelegate.m -> running app node_modules -> libraries (from package.

    json) iOS -> native runner CodepotReactTests

    9

  • Packager

    runs in the background bundles the files builds source maps serves the bundle file can be used to build phone deployment

    10

  • Components - fundamental building blocks

    components are state machines properties state internal logic render method JSX-based view model style can be nested

    11

  • Component Example

    12

  • Rethink established best practicesTM

    13

  • Everything* is javascript

    code is javascript

    styles are javascript

    JSX is javascript

    layout is javascript

    14

  • Not your grand-fathers javascript

    use strict Javascript runtime: JavascriptCore/V8 io.js platform (node rewritten) ES6 + some ES7 (draft):http://facebook.github.io/react-native/docs/javascript-environment.html#content

    Babel transpiler @flow - static code compilation

    15

    http://facebook.github.io/react-native/docs/javascript-environment.html#contenthttp://facebook.github.io/react-native/docs/javascript-environment.html#contenthttp://facebook.github.io/react-native/docs/javascript-environment.html#content

  • JSX

    var app = click

    var Nav, Profile;var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click"));

    Always Uppercase Component Names

    16

  • Styles

    similar to CSS no class dash-separated => camelBack (mixedCase) subset of CSS only flexbox layout is done in Javascript can be easily and predictably combined

    17

  • Layout

    Flexbox + some css Implemented by facebook in Javascripthttps://github.com/facebook/css-layout

    Subset of web layout No baggage Side note - it transpiles to C and Java (!)

    18

    https://github.com/facebook/css-layouthttps://github.com/facebook/css-layout

  • Advantages of using JS everywhere*

    Simple management and coordination Get rid of CSS/HTML baggage Can be optimized better Your styles and views more dynamic easier reuse of styles everything for component in one place

    19

  • Code for the rest of the workshop

    git clone http://github.com/potiuk/CodepotReact git checkout TASK1_DONE

    for next tasks: git checkout TASK2_TODO implement the TODOs git reset --hard git checkout TASK2_DONE

    20

    http://github.com/potiuk/CodepotReact

  • TASK2: Embedded assets and image tag

    https://facebook.github.io/react-native/docs/image.html

    Adding images to .xcasset Adding Image JSX Refer to png image with require

    21

    https://facebook.github.io/react-native/docs/image.htmlhttps://facebook.github.io/react-native/docs/image.html

  • TASK3: Remote image (and animated)

    Remote URL for the imagehttps://www.dropbox.com/s/5wzad6227j1ugkn/codepot_animate.gif?dl=1

    default image embedded automated fetch of the image support for animated gifs ( :D ) unfortunately buggy so we need to

    remove it :( and replace with gray image:https://www.dropbox.com/s/2pd4vb1147zupwq/codepot_gray.png?dl=1

    22

    https://www.dropbox.com/s/5wzad6227j1ugkn/codepot_animate.gif?dl=1https://www.dropbox.com/s/5wzad6227j1ugkn/codepot_animate.gif?dl=1https://www.dropbox.com/s/2pd4vb1147zupwq/codepot_gray.png?dl=1https://www.dropbox.com/s/2pd4vb1147zupwq/codepot_gray.png?dl=1

  • Developers toolchain part 1

    Packager Error diagnostic Live Reload Element Inspections Profiling Tests (JS + Obj-C) IDEs: IntelliJ/WebStorm (Nuclide soon ?? )

    23

  • Developers toolchain - Chrome

    Debugging via Chrome tools Modify data on-the fly with life reload Use React Chrome extension

    https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

    View virtual hierarchy and XCode hierarchy Modify code in debugger

    24

    https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=enhttps://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

  • Distributed documentation

    react-native docs react docs

    componentDidMount (component lifecycle) refs - referring to components ...

    github issues (!) AnimationExperimental (old)

    https://github.com/facebook/react-native/issues/46

    ListView implementation https://github.com/facebook/react-native/issues/499

    UIExplorer: https://github.com/facebook/react-native25

    https://github.com/facebook/react-native/issues/46https://github.com/facebook/react-native/issues/46https://github.com/facebook/react-native/issues/499https://github.com/facebook/react-native/issues/499https://github.com/facebook/react-native/issues/499https://github.com/facebook/react-native

  • Configure IntelliJ/Webstorm (optional) Add some life-cycle logs Set some breakpoints Enable live reload Add Chrome React extension Look at view hierarchy (XCode/Chrome) Add Chrome workspace mapping Checkout react-native and run UIExplorer

    TASK4: lets add some code

    26

  • TASK5. Add some action!

    Add button to click (Button ?) Style the button Highlight the button on press (extra!) Console log when the button is pressed

    27

  • Why react?

    28

  • States and Virtual View Hierarchy

    Component

    StateYour code

    Render(in javascript)

    View

    Virtual View Hierarchy Javascript objects

    Image

    Image

    Text

    React

    Build native views(native code)

    29

  • State changes

    Component

    State: {}

    Component

    State: {workshops: {...} }Update State

    Reconciliation

    Incremental changesAnimations

    Javascript

    Native code

    30

  • Incremental updates / animations

    31

    Update

    Remove Create

  • TASK6: Change component when state changes

    Initial: two images + button onClick: one image + text two separate renderings refactor to separate methods

    32

  • Animations

    LayoutAnimations Animated requestAnimationFrame Navigator scene transitions

    33

  • Layout animations

    React knows both states Animation of Create/Update/Deletehttps://github.com/facebook/react-native/issues/1440

    Presets: spring, linear, easeInOut Customisation options:

    Duration Opacity/ScaleXY Spring/Linear/EaseInEaseOut

    34

    https://github.com/facebook/react-native/issues/1440https://github.com/facebook/react-native/issues/1440

  • Animated

    Fine grained control Declarative Value animations still in javascript But potential to optimise it (async bridge) Looks like full native is in the works

    35

  • TASK7: Animate component state change

    Make component changes animate Try out different animation options Add second image Make original image animate up Make down image animate down Try various options

    36

  • More complex views reconciliation

    Reconciliation is simple (non-optimal) How does it know which