Dal web al nativo: Introduzione a React NativeMatteo Manchi

Milano 10-11 Novembre 2017

@matteomanchi

Mobile Development

2

@matteomanchi 3

Mobile Development

Native is hard…

@matteomanchi 4

Alternative from web world

@matteomanchi 5

Mobile Development

Native is hard…… but necessary.

@matteomanchi

Matteo Manchi} Full stack developer} React enthusiast} Co-founder of RomaJS} CEO at ImprontaAdvance} @matteomanchi} https://github.com/takeno

7

About me

@matteomanchi

Front-end experience

8

@matteomanchi

A framework for building native apps using React.

9

React Native

Yeah, the same React of web developers.

Learn once, write anywhere.

@matteomanchi

■ Everybody knows JavaScriptEasy to Learn.

■ Native BuildReal native mobile apps.

■ JS ReloadingNo time wasted in recompiling.

■ UI ComponentsReact Native wraps existing native UI controls

10

Why React Native

@matteomanchi

Component definition

11

@matteomanchi

■ npm install -g create-react-native-app■ create-react-native-app AwesomeProject

■ npm run ios■ npm run android■ npm start■ npm test

12

Getting started - The modern way

@matteomanchi

Demo time!

13

@matteomanchi 14

How it works

Native Bridge

Your code

JavaScript Core

bundle.js

Native View

render

@matteomanchi 15

About multi-platform

Business logic in JavaScriptmeans same codebase

between platforms.

@matteomanchi

JSCore allows you to use your favoriteJavaScript modules and tools!

16

JS Ecosystem

@matteomanchi

Style

17

■ 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

■ React-native-based company in Palo Alto■ Huge contribution to React Native■ Mantainers of create-react-native-app■ Expo SDK■ XDE■ snack.expo.io

18

Expo.io

@matteomanchi

snack.expo.io

@matteomanchi

Demo time!

20

@matteomanchi

React Native wraps native UI components

21

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 22

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 23

Out-of-the-box

■ GeoLocation■ Timers

● setTimeout● setInterval

■ Flexbox■ Network

● XMLHttpRequest● Fetch

React Native injects polyfills in JS Core

@matteomanchi

Demo time!

24

@matteomanchi

■ Like in create-react-app, eject is the process of setting up your own custom build for your app.

■ When I need to do it?■ I want to include external native libraries■ I want to write my custom native module■ I want to publish my app to Stores.

25

npm run eject

@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

26

Getting started - The native way

@matteomanchi

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

27

React Native Ecosystem

@matteomanchi

React Native community

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

Stars Forks

Pull Requests Issues

React Native’s community is very active

@matteomanchi

Facebook Ads Manager

29

Where is React Native now?

85% shared code between platforms

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

@matteomanchi 30

Where is React Native now?

Facebook AppFB event section is in RN

http://goo.gl/ziBzOl

@matteomanchi

“We use theexact same version

internally”

Tadeu ZagalloSoftware Engineer at Facebook

What’s next?

31http://goo.gl/ziBzOl

@matteomanchi

■ facebook.github.io/react-native■ React Native Newsletter■ medium.com/@AlaouiSolaimani/react-native-why-you-sh

ould-care-b30e5f960399■ reactnative.com/why-react-native-is-better-than-native-

for-your-mobile-application■ slideshare.net/TadeuZagallo/react-native-internals

32

Resources

@matteomanchi

Woah! Woah!

33

Questions?

Potete venire a trovarmi a Codemotion Milano!

Workshop:React Native: build and optimize multi-platform

mobile applicationsIl 9 novembre 2017, 09:00-18:00

Talk:React Native for multi-platform mobile applications

Il 10 novembre, 16:10-16.50

Controlla l’email!C'è una speciale promozione

per te!

CODEMOTION MILANO10-11 NOVEMBRE 2017http://milan2017.codemotionworld.com/

Ci vediamo a

Ricordati di controllare l’email!☺