React-Native is Facebook's React based native application framework. You can write iOS applications using native Views and Controls, while the whole application logic is written in Javascript (the good parts of it in fact). Soon Android version will be released but for now we can build iOS apps with it.
4. ● 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
5. 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
6. ● 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
7. 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
8. 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
9. 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
10. Packager
● runs in the background
● bundles the files
● builds source maps
● serves the bundle file
● can be used to build phone deployment
10
11. Components - fundamental building blocks
● components are state machines
● properties
● state
● internal logic
● render method
● JSX-based view model
● style
● can be nested
11
15. 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
16. 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
17. 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
18. Layout
● Flexbox + some css
● Implemented by facebook in … Javascript
https://github.com/facebook/css-layout
● Subset of web layout
● No baggage
● Side note - it transpiles to C and Java (!)
18
19. 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
20. 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
21. 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
22. TASK3: Remote image (and animated)
● Remote URL for the image
https://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
26. ● 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
27. 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
29. States and Virtual View Hierarchy
Component
State
Your
code
Render
(in javascript)
View
Virtual View Hierarchy
Javascript objects
Image
Image
Text
React
Build native views
(native code)
29
32. TASK6: Change component when state changes
● Initial: two images + button
● onClick: one image + text
● two separate renderings
● refactor to separate methods
32
34. Layout animations
● React knows both states
● Animation of Create/Update/Delete
https://github.com/facebook/react-native/issues/1440
● Presets: spring, linear, easeInOut
● Customisation options:
○ Duration
○ Opacity/ScaleXY
○ Spring/Linear/EaseInEaseOut
34
35. 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
36. 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
37. 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
38. TASK8. Using key to aid animation
● Make the bottom image same as top
● Animate the bottom image instead of top
38
39. Networking
● Fetch - standard (HTML5)
● Uses promises
● JSON support built in javascript
● Dynamic structures are good :)
● Asynchronous communication
39
40. 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
41. 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
42. 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
43. 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
44. Separating components
● Separate components to separate files
● module.exports
● require(“<relative path>”)
● Components:
○ Show list conditional button
○ Initial screen
○ Waiting screen
○ List screen
44
45. TASK11: ShowListButton as separate component
● ShowListButton conditionally shows
● “isVisible” bool property
● “clicked” callback function
45
46. TASK12: Common styles extracted
● separate out button style to
common/CommonStyles.js
46
47. 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
48. TASK14: separate out initial screen
● Separate out the intial screen to separate
component
● Pass callbacks to the components to fetch
data (!)
48
50. 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
51. Integration with ObjC/Swift
● Custom Access to APIs
http://facebook.github.io/react-native/docs/native-modules-ios.html#content
● Custom native UI components
http://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 app
http://facebook.github.io/react-native/docs/embedded-app-ios.html#content
● Can work with cocoapods
51
52. 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
60. 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
61. 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