@matteomanchi

Matteo Manchi

ROME 24-25 MARCH 2017

React Native for multi-platform mobile applications

@matteomanchi

https://github.com/Takeno/react-native-sample-codemotion-2017

Sample code

@matteomanchi

Mobile Development

@matteomanchi

… but necessary.

Mobile Development

Native is hard…

@matteomanchi

Different platforms

@matteomanchi

Different languages

@matteomanchi

Different look

@matteomanchi

But what if we can use technologies we know?

Mobile Development

@matteomanchi

■ Web developer friendly■ Native UI (vs WebView)■ Live Reload (vs Compile&Wait)■ Declarative UI (vs Imperative UI)■ Multi-platform support (vs specific support)■ Open Source

Why React Native?

@matteomanchi

Matteo ManchiFull stack developerReact enthusiastCo-founder of RomaJSCEO at ImprontaAdvance@matteomanchihttps://github.com/takeno

About Me

@matteomanchi

Web Developer

My journey to app development

⬇Mobile site version

⬇Mobile application ➡➡ WTF?

@matteomanchi

Phone Gap with box-shadow

@matteomanchi

Web Developer

My journey to app development

⬇Mobile site version

⬇Mobile application ➡

⬇

⬅⬅

@matteomanchi

Titanium - Red Screen of Death

@matteomanchi

Front-end experience

@matteomanchi

Codemotion 2015

https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html

@matteomanchi

Let's start from the beginning...

@matteomanchi

React is a JavaScript library for building user interfaces.

■ Just the UI■ One-way data flow■ Virtual DOM■ From Facebook

What is React?

@matteomanchi

■ Component: Everything is a component■ Props: some data passed to child component■ State: some internal data of a component■ JSX: XML-like syntax helps to define component's

structure■ Virtual DOM: tree of custom objects representing a port

of the DOM

Some keywords

@matteomanchi

Component definition

@matteomanchi

A framework for building native apps using React.

React Native

Yeah, the same React of web developers

Learn once, write anywhere.

@matteomanchi

■ brew install node■ brew install watchman■ npm install -g react-native-cli■ Install X-Code and/or Android SDK

■ react-native init SampleApp■ cd SampleApp■ react-native run-ios■ react-native run-android

Getting started

@matteomanchi

Component definition

@matteomanchi

Style

■ CSS-like declarations with camel-case properties■ style props defined for all native components

■ It can be an array of styles■ StyleSheet module to create multiple classes in one place

and cache them

It supports Flexbox!

@matteomanchi

Demo time!

@matteomanchi

How it works

Native Bridge

Your code

JavaScript Core

bundle.js

Native View

render

@matteomanchi

How it works

http://moduscreate.com/leverage-existing-ios-views-react-native-app/

@matteomanchi

About multi-platform

Business logic in JavaScriptmeans same codebase

between platforms.

@matteomanchi

Platform-specific code

■ if/else method

■ Platform-specific extensions

@matteomanchi

React Native wraps native UI components

Out-of-the-box

■ TabBar■ Text■ TextInput ■ Touchable ■ TouchableOpacity ■ Touchable Highlight ■ Touchable WithoutFeedback ■ View WebView

■ Activity Indicator■ Date Picker■ Image■ ListView■ MapView■ Navigator■ Picker■ ScrollView■ Slider

@matteomanchi

Out-of-the-box

■ InteractionManager■ Keyboard■ LayoutAnimation■ Linking■ NetInfo■ PanResponder■ PixelRatio■ Settings■ Share■ StatusBarIOS■ TimePickerAndroid■ ToastAndroid■ Vibration

■ ActionSheetIOS■ Alert■ Animated■ AppState■ AsyncStorage■ BackAndroid■ CameraRoll■ Clipboard■ DatePickerAndroid■ Dimensions■ Easing■ Geolocation■ ImageEditor

React Native wraps native API

@matteomanchi

Out-of-the-box

■ GeoLocation■ Timers

● setTimeout● setInterval

■ Flexbox■ Network

● XMLHttpRequest● Fetch

React Native injects polyfills in JS Core

@matteomanchi

Try it now!■ git clone

https://github.com/facebook/react-native.git

■ cd react-native■ npm install■ cd Examples/UIExplorer/■ open UIExplorer.xcodeproj■ Run

UIExplorer

@matteomanchi

Demo time!

@matteomanchi

JSCore allows you to use your favoriteJavaScript modules and tools!

JS Ecosystem

@matteomanchi

JS Debugging

@matteomanchi

React Native’s community is very active■ 46k+ stars on Github■ 6500+ issue solved■ React Native Community on Github

React Native Ecosystem

@matteomanchi

React Native Ecosystem

■ UI Components● native-base● react-native-elements● react-native-material-kit● react-native-material-design

■ Navigation● react-native-router-flux● react-navigation● native-navigation by AirBnB● wix/react-native-navigation

Hundreds of packages published:

■ Native API● react-native-maps by AirBnB● react-native-camera● react-native-onesignal● code-push by Microsoft

@matteomanchi

Specific tools to help your development

■ Deco IDEdecosoftware.com

■ Sketch by expo.iocodepen-like playground for React Nativesketch.expo.io

■ FastlaneContinuous deployment for mobile appsfastlane.tools

■ Create React Native AppStarter pack inspired by create-react-appgithub.com/react-community/create-react-native-app

React Native Ecosystem

@matteomanchi

■ Hackatons■ MVP■ Web Developer teams■ Simple apps

Where is React Native now?

@matteomanchi

Facebook Ads Manager

Where is React Native now?

85% shared code between platforms

https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform

@matteomanchi

Where is React Native now?

Facebook AppFB event section is in RN

http://goo.gl/ziBzOl

@matteomanchi

What’s next?

http://githubstats.com/facebook/react-native

Stars Forks

Pull Requests Issues

React Native’s community is very active

@matteomanchi

“We use theexact same version

internally”

Tadeu ZagalloSoftware Engineer at Facebook

What’s next?

http://goo.gl/ziBzOl

@matteomanchi

Woah! Woah!

Questions?

@matteomanchi

ROME 24-25 MARCH 2017

THANK YOU!@matteomanchi

@matteomanchi

We’re looking for

JS enthusiastwho wants to

have funwith this cool technologies.

Contact me @matteomanchi

We’re hiring!

goo.gl/us55X3

More open positions: PHP Dev, Front-End Designer