61
React Native CodePot 2015 Jarek Potiuk CTO, Polidea 1

React native: building native iOS apps with javascript

  • Upload
    polidea

  • View
    951

  • Download
    5

Embed Size (px)

Citation preview

Page 1: React native: building native iOS apps with javascript

React NativeCodePot 2015

Jarek Potiuk CTO, Polidea

1

Page 2: React native: building native iOS apps with javascript

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

Page 3: React native: building native iOS apps with javascript

Workshop resources

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

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

3

Page 4: React native: building native iOS apps with javascript

● 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

Page 5: React native: building native iOS apps with javascript

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

Page 6: React native: building native iOS apps with javascript

● 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

Page 7: React native: building native iOS apps with javascript

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

Page 8: React native: building native iOS apps with javascript

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

Page 9: React native: building native iOS apps with javascript

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

Page 10: React native: building native iOS apps with javascript

Packager

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

10

Page 11: React native: building native iOS apps with javascript

Components - fundamental building blocks

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

11

Page 12: React native: building native iOS apps with javascript

Component Example

12

Page 13: React native: building native iOS apps with javascript

Rethink established best practicesTM

13

Page 14: React native: building native iOS apps with javascript

Everything* is javascript

● code is javascript

● styles are … javascript

● JSX is … javascript

● layout is … javascript

14

Page 15: React native: building native iOS apps with javascript

Not your grand-father’s 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

Page 16: React native: building native iOS apps with javascript

JSX

var app = <Nav color="blue"> <Profile>click</Profile> </Nav>

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

Always Uppercase Component Names

16

Page 17: React native: building native iOS apps with javascript

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

Page 18: React native: building native iOS apps with javascript

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

Page 19: React native: building native iOS apps with javascript

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

Page 20: React native: building native iOS apps with javascript

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

Page 21: React native: building native iOS apps with javascript

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

Page 22: React native: building native iOS apps with javascript

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

Page 23: React native: building native iOS apps with javascript

Developer’s toolchain part 1

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

23

Page 24: React native: building native iOS apps with javascript

Developer’s 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

Page 25: React native: building native iOS apps with javascript

“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

Page 26: React native: building native iOS apps with javascript

● 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: let’s add some code

26

Page 27: React native: building native iOS apps with javascript

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

Page 28: React native: building native iOS apps with javascript

Why react?

28

Page 29: React native: building native iOS apps with javascript

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

Page 30: React native: building native iOS apps with javascript

State changes

Component

State: {}

Component

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

Reconciliation

Incremental changesAnimations

Javascript

Native code

30

Page 31: React native: building native iOS apps with javascript

Incremental updates / animations

31

Update

Remove Create

Page 32: React native: building native iOS apps with javascript

TASK6: Change component when state changes

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

32

Page 33: React native: building native iOS apps with javascript

Animations

● LayoutAnimations● Animated● requestAnimationFrame● Navigator scene transitions

33

Page 34: React native: building native iOS apps with javascript

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

Page 35: React native: building native iOS apps with javascript

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

Page 36: React native: building native iOS apps with javascript

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

Page 37: React native: building native iOS apps with javascript

More complex views reconciliation

● Reconciliation is simple (non-optimal)● How does it know which Image is which?● Imagine list with many items● “key” property is a key to solve it

37

Page 38: React native: building native iOS apps with javascript

TASK8. Using key to aid animation

● Make the bottom image same as top● Animate the bottom image instead of top

38

Page 39: React native: building native iOS apps with javascript

Networking

● Fetch - standard (HTML5)● Uses promises● JSON support built in javascript● Dynamic structures are good :)● Asynchronous communication

39

Page 40: React native: building native iOS apps with javascript

TASK9: fetch data for workshops

● Fetch data: https://backend.codepot.pl/api/workshops/

● Response is a json file (Hint! .json() )● Save workshops to “workshops” key in

state● Update console logs● Make the text showing what’s going on:

○ “Fetching” -> “Fetched <number> of workshops”

40

Page 41: React native: building native iOS apps with javascript

ListView

● NOT the same as UITableView● Immutable data (clone)● Sections support● Still problems with really long lists● Other implementations exist https://github.

com/aksonov/react-native-tableview

41

Page 42: React native: building native iOS apps with javascript

TASK9. Show workshops in list view

● Add conditional button “show list” after workshops are fetched

● Replace image with list after it’s clicked● Change initial size (gotcha!)

42

Page 43: React native: building native iOS apps with javascript

Componentisation

● The logic is in one index.ios.js● It’s more and more difficult to reason

about it● Components

○ small○ self-contained○ can be moved around

● Properties● Common parts (ex. styles)can be re-used

43

Page 44: React native: building native iOS apps with javascript

Separating components

● Separate components to separate files● module.exports● require(“<relative path>”)● Components:

○ Show list conditional button○ Initial screen○ Waiting screen○ List screen

44

Page 45: React native: building native iOS apps with javascript

TASK11: ShowListButton as separate component

● ShowListButton conditionally shows● “isVisible” bool property● “clicked” callback function

45

Page 46: React native: building native iOS apps with javascript

TASK12: Common styles extracted

● separate out button style to common/CommonStyles.js

46

Page 47: React native: building native iOS apps with javascript

TASK13: Separate ListView to a separate List component

● Put list view to separate component passing workshops to it

● Make sure no ListView is needed in the index.ios.js

47

Page 48: React native: building native iOS apps with javascript

TASK14: separate out initial screen

● Separate out the intial screen to separate component

● Pass callbacks to the components to fetch data (!)

48

Page 49: React native: building native iOS apps with javascript

Extras

49

Page 50: React native: building native iOS apps with javascript

Navigators

● NavigatorIOS○ small, limited API○ Javascript + ObjC○ animations/behoviour of native UIKit navigator○ navigation bar can be only slightly modified○ some bugs (community maintained)

● Navigator○ Extensive API○ Javascript○ Navigation/BreadCrumbNavigation○ Animations are not perfect (yet)

50

Page 51: React native: building native iOS apps with javascript

Integration with ObjC/Swift

● Custom Access to APIshttp://facebook.github.io/react-native/docs/native-modules-ios.html#content

● Custom native UI componentshttp://facebook.github.io/react-native/docs/native-components-ios.html#content

● Direct Properties manipulation http://facebook.github.io/react-native/docs/direct-manipulation.html#content

● RCTView can be embedded in native apphttp://facebook.github.io/react-native/docs/embedded-app-ios.html#content

● Can work with cocoapods

51

Page 52: React native: building native iOS apps with javascript

Native/Javascript bridge

● Not in UI thread● Asynchronous, serializable communication● Batching requests● Lots of optimisations already● Potential optimisations in the future● Flexible threading model

52

Page 53: React native: building native iOS apps with javascript

Deployment options

53

Page 54: React native: building native iOS apps with javascript

Internal Architecture

54

Page 55: React native: building native iOS apps with javascript

Standalone app

55

Page 56: React native: building native iOS apps with javascript

Development

56

Page 57: React native: building native iOS apps with javascript

Debugging

57

Page 58: React native: building native iOS apps with javascript

Remote server

58

Page 59: React native: building native iOS apps with javascript

Live update - AppHub

59

Page 60: React native: building native iOS apps with javascript

What Facebook wants to achieve?

What they tell● Learn once - write anywhere● No “cross-platform app framework”● Less complex apps

What they don’t tell● Common code shared as libs● Dynamic app updates (A/B testing)

60

Page 61: React native: building native iOS apps with javascript

Is it ready yet?

● Still beta and changing fast● Still some (small) issues with performance● Have not tested with really big application● Some components are of beta quality● Some components done by community● Community is small but growing (Stack

Overflow)● Documentation is heavily “distributed”

61