SlideShare uma empresa Scribd logo
1 de 39
Baixar para ler offline
React-Native
for multi-platform mobile applications
Matteo Manchi
Full stack web developer
CEO at Impronta Advance
Twitter: @matteomanchi
Agenda
From React to React Native
Technologies behind RN
Multi-platform compatibility
iOS and Android native modules
Let's start from the
beginning...
What is React.js?
React is a JavaScript library for building user interfaces.
Just the UI
One-way data flow
Virtual DOM
From Facebook
Some keywords
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.
Component definition
import React, {Component, PropTypes} from 'react';
class CountDown extends Component {
static propTypes = {
seconds: PropTypes.number.isRequired
};
constructor(props) {
super(props);
this.state = {
seconds: props.seconds
};
}
// ...
}
Component definition - Pt.2
class CountDown extends Component {
// ...
componentDidMount() {
setInterval(() => this.setState({
seconds: this.state.seconds-1
}), 1000);
}
render() {
return (
<span>Time left: {this.state.seconds}</span>
);
}
}
// Invoking
< CountDown seconds="10" />
With or without you JSX
// JSX
render() {
return (
<span>Time left: {this.state.seconds}</span>
);
}
// plain js
return React.createElement(
"span",
null,
"Time left: ",
this.state.seconds
);
Let's talk back about mobile
applications
What are common troubles developing (multi-platform)
mobile application?
Know how
Use native APIs
Performance
React Native
A framework for building native apps using React.
Yeah, the same React.js of web developers
Learn once, write anywhere
What is React Native?
A framework
Binds JSX to iOS Cocoa Touch or Android UI
Allow applications to run at near full speed
JSX to native UI
Exactly the same of React.js, but naming native components
// react-dom
render() {
return (
<div>
<span>Time left: {this.state.seconds}</span>
</div>
);
}
// react-native
render() {
return (
<view>
<text>Time left: {this.state.seconds}</text>
</view>
);
}
What do you mean with
near full speed?
Yes, like Titanium.
A lot of components
ActivityIndicatorIOS
DatePickerIOS
DrawerLayoutAndroid
Image
ListView
MapView
Modal
Navigator
NavigatorIOS
PickerIOS
ProgressBarAndroid
ProgressViewIOS
PullToRefreshViewAndroid
RefreshControl
ScrollView
SegmentedControlIOS
SliderIOS
Switch
TabBarIOS
TabBarIOS.Item
Text
TextInput
ToolbarAndroid
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
ViewPagerAndroid
WebView
A lot of APIs
ActionSheetIOS
Alert
AlertIOS
Animated
AppRegistry
AppStateIOS
AsyncStorage
BackAndroid
CameraRoll
Dimensions
IntentAndroid
InteractionManager
LayoutAnimation
LinkingIOS
NativeMethodsMixin
NetInfo
PanResponder
PixelRatio
PushNotificationIOS
StatusBarIOS
StyleSheet
ToastAndroid
VibrationIOS
Requirements for
React Native
Node.js 4.0 or newer.
Xcode 7.0 or higher is required for iOS apps
Android SDK + gradle + AVD/Genymotion for Android
apps
Getting Started
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject
// To run iOS app
$ open ios/AwesomeProject.xcodeproj
// To run Android app
$ react-native run-android
Technologies behind
React Native
React, JSX and Virtual DOM :)
Webpack loads all dependencies required by index.ios.js
and index.android.js and bundle them together
ES6 compatibility allows devs to use modern syntax and
features
NPM as module manager
Chrome Debugger as powerful debugger
Flow as type checker - optionally
All JavaScript's modules
Every module there are not DOM-depending can be used in
React Native. Like a browser, there are some polyfills that
allow to use modules you have skill with.
Flexbox
Geolocation
Network (fetch, ajax, etc)
Timers (timeout, interval, etc)
Inline CSS-like styles
Custom CSS implementation, easy to learn 'cause it's very
similar to browser's CSS.
With Flexbox.
In JavaScript.
https://facebook.github.io/react-native/docs/style.html
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: LIGHT_GRAY,
},
active: {
borderWidth: 4/2,
borderColor: '#00ff00',
},
});
<View style={[styles.base, styles.background]} />
What about
multi-platforms?
React Native actually supports iOS and Android. It
provides a lot of components and APIs ready to use in both
platforms.
A lot of components
ActivityIndicatorIOS
DatePickerIOS
DrawerLayoutAndroid
Image
ListView
MapView
Modal
Navigator
NavigatorIOS
PickerIOS
ProgressBarAndroid
ProgressViewIOS
PullToRefreshViewAndroid
RefreshControl
ScrollView
SegmentedControlIOS
SliderIOS
Switch
TabBarIOS
TabBarIOS.Item
Text
TextInput
ToolbarAndroid
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
ViewPagerAndroid
WebView
Native Modules
React Native is madly growing up! Each release (almost
once per month) adds new features for both platforms
thanks to over 500 contributors.
Despite the big community around the project, can happen
that the native view you're looking for isn't supported by
the framework. In this case you have to wait for someone
else, or make your native module (or binding native API)
iOS Module - Pt. 1
// ShareManager.h
#import < UIKit/UIKit.h >
#import "RCTBridgeModule.h"
@interface RNShare : NSObject < RCTBridgeModule >
@end
iOS Module - Pt. 2
// ShareManager.m
@implementation ShareManager
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(share:(NSString *)text url:(NSString *)url) {
NSURL *cardUrl = [NSURL URLWithString:url];
NSArray *itemsToShare = @[text, url, cardUrl];
UIActivityViewController *activityVC =
[[UIActivityViewController alloc]
initWithActivityItems:itemsToShare
applicationActivities:nil];
UIViewController *root =
[[[[UIApplication sharedApplication] delegate]
window] rootViewController];
[root presentViewController:activityVC animated:YES completion:nil];
}
@end
iOS Module - Pt. 3
var ShareManager = require('react-native').NativeModules.ShareManager;
ShareManager.share('Hi from RomaJS!', 'http://www.romajs.org');
http://facebook.github.io/react-native/docs/native-modules-ios.html
Android Module - Pt. 1
// ShareModule.java
// package + imports
public class ShareModule extends ReactContextBaseJavaModule {
// ...
public ShareModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}
@Override
public String getName() {
return "ShareManager";
}
// continue
}
Android Module - Pt. 2
// ShareModule.java
public class ShareModule extends ReactContextBaseJavaModule {
// ...
@ReactMethod
public void share(String text, String url) {
Intent sharingIntent =
new Intent(android.content.Intent.ACTION_SEND);
sharingIntent.setType("text/plain");
sharingIntent.putExtra(android.content.Intent.EXTRA_SUBJECT, text);
sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, url);
Intent chooser = Intent.createChooser(sharingIntent, "Share");
chooser.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
this.reactContext.startActivity(chooser);
}
}
Android Module - Pt. 3
// SharePackage.java
// package + imports
public class SharePackage implements ReactPackage {
@Override
public List< NativeModule >
createNativeModules(ReactApplicationContext reactContext) {
List< NativeModule > modules = new ArrayList<>();
modules.add(new ShareModule(reactContext));
return modules;
}
// ...
}
Android Module - Pt. 4
// MainActivity.java
// ...
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new SharePackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// ...
Android Module - Pt. 5
var ShareManager = require('react-native').NativeModules.ShareManager;
ShareManager.share('Hi from RomaJS!', 'http://www.romajs.org');
http://facebook.github.io/react-native/docs/native-modules-android.html
Different platform,
different behavior
Take some actions depending to platform
Method 1: if/else
import {Platform} from 'react-native';
const styles = StyleSheet.create({
myView: {
backgroundColor: Platform.OS === 'ios' ? 'red' : 'lime'
}
});
Method 2: file extension
by webpack-based packager
// MyStyle.ios.js
export default const styles = StyleSheet.create({
myView: {
backgroundColor: 'red'
}
});
// MyStyle.android.js
export default const styles = StyleSheet.create({
myView: {
backgroundColor: 'lime'
}
});
Woah! Woah!
Questions?
Native Haters
What about competitors?
Cordova/Phonegap
Ionic
Xamarin
Titanium
Thank you

Mais conteúdo relacionado

Mais procurados

A tour of React Native
A tour of React NativeA tour of React Native
A tour of React NativeTadeu Zagallo
 
React Native in a nutshell
React Native in a nutshellReact Native in a nutshell
React Native in a nutshellBrainhub
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React NativeWaqqas Jabbar
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom componentsJeremy Grancher
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Adrian Philipp
 
Intro To React Native
Intro To React NativeIntro To React Native
Intro To React NativeFITC
 
Utilizing HTML5 APIs
Utilizing HTML5 APIsUtilizing HTML5 APIs
Utilizing HTML5 APIsIdo Green
 
Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsIdo Green
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react nativeModusJesus
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Codemotion
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!Commit University
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animationModusJesus
 
React native sharing
React native sharingReact native sharing
React native sharingSam Lee
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Devin Abbott
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?Evan Stone
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Nativedvcrn
 

Mais procurados (20)

A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
 
React Native in a nutshell
React Native in a nutshellReact Native in a nutshell
React Native in a nutshell
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
 
React native
React nativeReact native
React native
 
Intro To React Native
Intro To React NativeIntro To React Native
Intro To React Native
 
Utilizing HTML5 APIs
Utilizing HTML5 APIsUtilizing HTML5 APIs
Utilizing HTML5 APIs
 
Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIs
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
 
React native sharing
React native sharingReact native sharing
React native sharing
 
React native
React nativeReact native
React native
 
React Native
React NativeReact Native
React Native
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?
 
React Native.pptx (2)
React Native.pptx (2)React Native.pptx (2)
React Native.pptx (2)
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 

Destaque

React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
 
Thinking Reactively
Thinking ReactivelyThinking Reactively
Thinking ReactivelySabin Marcu
 
The Internet of Things - Decoupling Producers and Consumers of M2M Device Data
The Internet of Things - Decoupling Producers and Consumers of M2M Device DataThe Internet of Things - Decoupling Producers and Consumers of M2M Device Data
The Internet of Things - Decoupling Producers and Consumers of M2M Device DataEurotech
 
React native first impression
React native first impressionReact native first impression
React native first impressionAlvaro Viebrantz
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409Minko3D
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practicesfloydophone
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는Taegon Kim
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
Better React state management with Redux
Better React state management with ReduxBetter React state management with Redux
Better React state management with ReduxMaurice De Beijer [MVP]
 
Supporting Bodily Communication in Video Consultations of Physiotherapy
Supporting Bodily Communication in Video Consultations of PhysiotherapySupporting Bodily Communication in Video Consultations of Physiotherapy
Supporting Bodily Communication in Video Consultations of PhysiotherapyUniversity of Melbourne, Australia
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 

Destaque (12)

React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
Thinking Reactively
Thinking ReactivelyThinking Reactively
Thinking Reactively
 
The Internet of Things - Decoupling Producers and Consumers of M2M Device Data
The Internet of Things - Decoupling Producers and Consumers of M2M Device DataThe Internet of Things - Decoupling Producers and Consumers of M2M Device Data
The Internet of Things - Decoupling Producers and Consumers of M2M Device Data
 
React native first impression
React native first impressionReact native first impression
React native first impression
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Better React state management with Redux
Better React state management with ReduxBetter React state management with Redux
Better React state management with Redux
 
Supporting Bodily Communication in Video Consultations of Physiotherapy
Supporting Bodily Communication in Video Consultations of PhysiotherapySupporting Bodily Communication in Video Consultations of Physiotherapy
Supporting Bodily Communication in Video Consultations of Physiotherapy
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 

Semelhante a React Native for multi-platform mobile applications

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideWorkshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideVisual Engineering
 
JSAnkara Swift v React Native
JSAnkara Swift v React NativeJSAnkara Swift v React Native
JSAnkara Swift v React NativeMuhammed Demirci
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
 
React_Complete.pptx
React_Complete.pptxReact_Complete.pptx
React_Complete.pptxkamalakantas
 
React Native: React Meetup 3
React Native: React Meetup 3React Native: React Meetup 3
React Native: React Meetup 3Rob Gietema
 
Effective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjectsEffective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjectsSrikanth Shenoy
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Filippo Matteo Riggio
 
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)Maarten Mulders
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Lou Sacco
 
React: JSX and Top Level API
React: JSX and Top Level APIReact: JSX and Top Level API
React: JSX and Top Level APIFabio Biondi
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)Chiew Carol
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Previewvaluebound
 

Semelhante a React Native for multi-platform mobile applications (20)

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideWorkshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
 
JSAnkara Swift v React Native
JSAnkara Swift v React NativeJSAnkara Swift v React Native
JSAnkara Swift v React Native
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
React js
React jsReact js
React js
 
React_Complete.pptx
React_Complete.pptxReact_Complete.pptx
React_Complete.pptx
 
React Native: React Meetup 3
React Native: React Meetup 3React Native: React Meetup 3
React Native: React Meetup 3
 
Effective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjectsEffective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjects
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
 
React native by example by Vadim Ruban
React native by example by Vadim RubanReact native by example by Vadim Ruban
React native by example by Vadim Ruban
 
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014
 
React Native
React NativeReact Native
React Native
 
React: JSX and Top Level API
React: JSX and Top Level APIReact: JSX and Top Level API
React: JSX and Top Level API
 
Android development
Android developmentAndroid development
Android development
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
React JS .NET
React JS .NETReact JS .NET
React JS .NET
 
Stmik bandung
Stmik bandungStmik bandung
Stmik bandung
 

Último

Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and countingArbazAhmad25
 
pulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxpulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxNishanth Asmi
 
The Art of Cloud Native Defense on Kubernetes
The Art of Cloud Native Defense on KubernetesThe Art of Cloud Native Defense on Kubernetes
The Art of Cloud Native Defense on KubernetesJacopo Nardiello
 
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxChapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxButcher771
 
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdf
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdfWave Energy Technologies Overtopping 1 - Tom Thorpe.pdf
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdfErik Friis-Madsen
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxAravindhKarthik1
 
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...marijomiljkovic1
 
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptxssuser886c55
 
This chapter gives an outline of the security.
This chapter gives an outline of the security.This chapter gives an outline of the security.
This chapter gives an outline of the security.RoshniIsrani1
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhjamesbond00714
 
Searching and Sorting Algorithms
Searching and Sorting AlgorithmsSearching and Sorting Algorithms
Searching and Sorting AlgorithmsAshutosh Satapathy
 
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
Tekom Netherlands | The evolving landscape of Simplified Technical English  b...Tekom Netherlands | The evolving landscape of Simplified Technical English  b...
Tekom Netherlands | The evolving landscape of Simplified Technical English b...Shumin Chen
 
Introduction to Data Structures .
Introduction to Data Structures        .Introduction to Data Structures        .
Introduction to Data Structures .Ashutosh Satapathy
 
عناصر نباتية PDF.pdf architecture engineering
عناصر نباتية PDF.pdf architecture engineeringعناصر نباتية PDF.pdf architecture engineering
عناصر نباتية PDF.pdf architecture engineeringmennamohamed200y
 
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...Luuk Brederode
 
First Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideFirst Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideMonika860882
 
zomato data mining datasets for quality prefernece and conntrol.pptx
zomato data mining  datasets for quality prefernece and conntrol.pptxzomato data mining  datasets for quality prefernece and conntrol.pptx
zomato data mining datasets for quality prefernece and conntrol.pptxPratikMhatre39
 
Research paper publications: Meaning of Q1 Q2 Q3 Q4 Journal
Research paper publications: Meaning of Q1 Q2 Q3 Q4 JournalResearch paper publications: Meaning of Q1 Q2 Q3 Q4 Journal
Research paper publications: Meaning of Q1 Q2 Q3 Q4 JournalDr. Manjunatha. P
 

Último (20)

Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and counting
 
pulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxpulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptx
 
The Art of Cloud Native Defense on Kubernetes
The Art of Cloud Native Defense on KubernetesThe Art of Cloud Native Defense on Kubernetes
The Art of Cloud Native Defense on Kubernetes
 
FOREST FIRE USING IoT-A Visual to UG students
FOREST FIRE USING IoT-A Visual to UG studentsFOREST FIRE USING IoT-A Visual to UG students
FOREST FIRE USING IoT-A Visual to UG students
 
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxChapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
 
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdf
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdfWave Energy Technologies Overtopping 1 - Tom Thorpe.pdf
Wave Energy Technologies Overtopping 1 - Tom Thorpe.pdf
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptx
 
Industry perspective on cold in-place recycling
Industry perspective on cold in-place recyclingIndustry perspective on cold in-place recycling
Industry perspective on cold in-place recycling
 
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
 
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
 
This chapter gives an outline of the security.
This chapter gives an outline of the security.This chapter gives an outline of the security.
This chapter gives an outline of the security.
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarh
 
Searching and Sorting Algorithms
Searching and Sorting AlgorithmsSearching and Sorting Algorithms
Searching and Sorting Algorithms
 
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
Tekom Netherlands | The evolving landscape of Simplified Technical English  b...Tekom Netherlands | The evolving landscape of Simplified Technical English  b...
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
 
Introduction to Data Structures .
Introduction to Data Structures        .Introduction to Data Structures        .
Introduction to Data Structures .
 
عناصر نباتية PDF.pdf architecture engineering
عناصر نباتية PDF.pdf architecture engineeringعناصر نباتية PDF.pdf architecture engineering
عناصر نباتية PDF.pdf architecture engineering
 
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
 
First Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideFirst Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slide
 
zomato data mining datasets for quality prefernece and conntrol.pptx
zomato data mining  datasets for quality prefernece and conntrol.pptxzomato data mining  datasets for quality prefernece and conntrol.pptx
zomato data mining datasets for quality prefernece and conntrol.pptx
 
Research paper publications: Meaning of Q1 Q2 Q3 Q4 Journal
Research paper publications: Meaning of Q1 Q2 Q3 Q4 JournalResearch paper publications: Meaning of Q1 Q2 Q3 Q4 Journal
Research paper publications: Meaning of Q1 Q2 Q3 Q4 Journal
 

React Native for multi-platform mobile applications

  • 2. Matteo Manchi Full stack web developer CEO at Impronta Advance Twitter: @matteomanchi
  • 3. Agenda From React to React Native Technologies behind RN Multi-platform compatibility iOS and Android native modules
  • 4. Let's start from the beginning...
  • 5. What is React.js? React is a JavaScript library for building user interfaces. Just the UI One-way data flow Virtual DOM From Facebook
  • 6. Some keywords 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.
  • 7. Component definition import React, {Component, PropTypes} from 'react'; class CountDown extends Component { static propTypes = { seconds: PropTypes.number.isRequired }; constructor(props) { super(props); this.state = { seconds: props.seconds }; } // ... }
  • 8. Component definition - Pt.2 class CountDown extends Component { // ... componentDidMount() { setInterval(() => this.setState({ seconds: this.state.seconds-1 }), 1000); } render() { return ( <span>Time left: {this.state.seconds}</span> ); } } // Invoking < CountDown seconds="10" />
  • 9. With or without you JSX // JSX render() { return ( <span>Time left: {this.state.seconds}</span> ); } // plain js return React.createElement( "span", null, "Time left: ", this.state.seconds );
  • 10. Let's talk back about mobile applications What are common troubles developing (multi-platform) mobile application? Know how Use native APIs Performance
  • 11. React Native A framework for building native apps using React. Yeah, the same React.js of web developers Learn once, write anywhere
  • 12. What is React Native? A framework Binds JSX to iOS Cocoa Touch or Android UI Allow applications to run at near full speed
  • 13. JSX to native UI Exactly the same of React.js, but naming native components // react-dom render() { return ( <div> <span>Time left: {this.state.seconds}</span> </div> ); } // react-native render() { return ( <view> <text>Time left: {this.state.seconds}</text> </view> ); }
  • 14. What do you mean with near full speed? Yes, like Titanium.
  • 15. A lot of components ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator NavigatorIOS PickerIOS ProgressBarAndroid ProgressViewIOS PullToRefreshViewAndroid RefreshControl ScrollView SegmentedControlIOS SliderIOS Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView
  • 16. A lot of APIs ActionSheetIOS Alert AlertIOS Animated AppRegistry AppStateIOS AsyncStorage BackAndroid CameraRoll Dimensions IntentAndroid InteractionManager LayoutAnimation LinkingIOS NativeMethodsMixin NetInfo PanResponder PixelRatio PushNotificationIOS StatusBarIOS StyleSheet ToastAndroid VibrationIOS
  • 17. Requirements for React Native Node.js 4.0 or newer. Xcode 7.0 or higher is required for iOS apps Android SDK + gradle + AVD/Genymotion for Android apps
  • 18. Getting Started $ npm install -g react-native-cli $ react-native init AwesomeProject $ cd AwesomeProject // To run iOS app $ open ios/AwesomeProject.xcodeproj // To run Android app $ react-native run-android
  • 19. Technologies behind React Native React, JSX and Virtual DOM :) Webpack loads all dependencies required by index.ios.js and index.android.js and bundle them together ES6 compatibility allows devs to use modern syntax and features NPM as module manager Chrome Debugger as powerful debugger Flow as type checker - optionally
  • 20. All JavaScript's modules Every module there are not DOM-depending can be used in React Native. Like a browser, there are some polyfills that allow to use modules you have skill with. Flexbox Geolocation Network (fetch, ajax, etc) Timers (timeout, interval, etc)
  • 21. Inline CSS-like styles Custom CSS implementation, easy to learn 'cause it's very similar to browser's CSS. With Flexbox. In JavaScript. https://facebook.github.io/react-native/docs/style.html
  • 22. import {StyleSheet} from 'react-native'; const styles = StyleSheet.create({ base: { width: 38, height: 38, }, background: { backgroundColor: LIGHT_GRAY, }, active: { borderWidth: 4/2, borderColor: '#00ff00', }, }); <View style={[styles.base, styles.background]} />
  • 23. What about multi-platforms? React Native actually supports iOS and Android. It provides a lot of components and APIs ready to use in both platforms.
  • 24. A lot of components ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator NavigatorIOS PickerIOS ProgressBarAndroid ProgressViewIOS PullToRefreshViewAndroid RefreshControl ScrollView SegmentedControlIOS SliderIOS Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView
  • 25. Native Modules React Native is madly growing up! Each release (almost once per month) adds new features for both platforms thanks to over 500 contributors. Despite the big community around the project, can happen that the native view you're looking for isn't supported by the framework. In this case you have to wait for someone else, or make your native module (or binding native API)
  • 26. iOS Module - Pt. 1 // ShareManager.h #import < UIKit/UIKit.h > #import "RCTBridgeModule.h" @interface RNShare : NSObject < RCTBridgeModule > @end
  • 27. iOS Module - Pt. 2 // ShareManager.m @implementation ShareManager RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(share:(NSString *)text url:(NSString *)url) { NSURL *cardUrl = [NSURL URLWithString:url]; NSArray *itemsToShare = @[text, url, cardUrl]; UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:itemsToShare applicationActivities:nil]; UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; [root presentViewController:activityVC animated:YES completion:nil]; } @end
  • 28. iOS Module - Pt. 3 var ShareManager = require('react-native').NativeModules.ShareManager; ShareManager.share('Hi from RomaJS!', 'http://www.romajs.org'); http://facebook.github.io/react-native/docs/native-modules-ios.html
  • 29. Android Module - Pt. 1 // ShareModule.java // package + imports public class ShareModule extends ReactContextBaseJavaModule { // ... public ShareModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "ShareManager"; } // continue }
  • 30. Android Module - Pt. 2 // ShareModule.java public class ShareModule extends ReactContextBaseJavaModule { // ... @ReactMethod public void share(String text, String url) { Intent sharingIntent = new Intent(android.content.Intent.ACTION_SEND); sharingIntent.setType("text/plain"); sharingIntent.putExtra(android.content.Intent.EXTRA_SUBJECT, text); sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, url); Intent chooser = Intent.createChooser(sharingIntent, "Share"); chooser.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); this.reactContext.startActivity(chooser); } }
  • 31. Android Module - Pt. 3 // SharePackage.java // package + imports public class SharePackage implements ReactPackage { @Override public List< NativeModule > createNativeModules(ReactApplicationContext reactContext) { List< NativeModule > modules = new ArrayList<>(); modules.add(new ShareModule(reactContext)); return modules; } // ... }
  • 32. Android Module - Pt. 4 // MainActivity.java // ... mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new SharePackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // ...
  • 33. Android Module - Pt. 5 var ShareManager = require('react-native').NativeModules.ShareManager; ShareManager.share('Hi from RomaJS!', 'http://www.romajs.org'); http://facebook.github.io/react-native/docs/native-modules-android.html
  • 34. Different platform, different behavior Take some actions depending to platform
  • 35. Method 1: if/else import {Platform} from 'react-native'; const styles = StyleSheet.create({ myView: { backgroundColor: Platform.OS === 'ios' ? 'red' : 'lime' } });
  • 36. Method 2: file extension by webpack-based packager // MyStyle.ios.js export default const styles = StyleSheet.create({ myView: { backgroundColor: 'red' } }); // MyStyle.android.js export default const styles = StyleSheet.create({ myView: { backgroundColor: 'lime' } });
  • 38. Native Haters What about competitors? Cordova/Phonegap Ionic Xamarin Titanium