react native: building native ios apps with javascript
Post on 14-Jan-2017
944 Views
Preview:
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
Workshop resources
● Github repository: https://github.com/potiuk/codepotreact
● Additional files for tasks: https://goo.gl/6evr5g
3
● 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
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-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
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
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
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
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
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
Developer’s toolchain part 1
● Packager● Error diagnostic● Live Reload● Element Inspections● Profiling● Tests (JS + Obj-C)● IDEs: IntelliJ/WebStorm (Nuclide soon ?? )
23
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
“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
● 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
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
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 Image is which?● Imagine list with many items● “key” property is a key to solve it
37
TASK8. Using key to aid animation
● Make the bottom image same as top● Animate the bottom image instead of top
38
Networking
● Fetch - standard (HTML5)● Uses promises● JSON support built in javascript● Dynamic structures are good :)● Asynchronous communication
39
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
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
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
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
Separating components
● Separate components to separate files● module.exports● require(“<relative path>”)● Components:
○ Show list conditional button○ Initial screen○ Waiting screen○ List screen
44
TASK11: ShowListButton as separate component
● ShowListButton conditionally shows● “isVisible” bool property● “clicked” callback function
45
TASK12: Common styles extracted
● separate out button style to common/CommonStyles.js
46
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
TASK14: separate out initial screen
● Separate out the intial screen to separate component
● Pass callbacks to the components to fetch data (!)
48
Extras
49
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
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
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
Deployment options
53
Internal Architecture
54
Standalone app
55
Development
56
Debugging
57
Remote server
58
Live update - AppHub
59
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
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
top related