SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
React Native
Eric Cavalcanti

@ericoc

ecavalcanti@gmail.com
O que é React Native?
O que não é React Native?
Não é híbrido!
Device API
HTML 5 e JavaScript
<!doctype html>
<html>
<body>
Content
</body>
</html>
WebView
• RN não usa WebView, a renderização é
nativa
• Perfomance do React Native tende a ser
melhor
• Os dois são OpenSource e tem um
ecossistema bem movimentado
Não é transpiled!
JavaScript
Native Code
Objective-C
Swift
Java

Kotlin…
Native App
• Nativo não tem portabilidade de código
• Desenvolvimento apenas com
linguagem nativa
• Nativo tem performance um pouco
melhor
Não é PWA!
Device API
HTML 5 e JavaScript
<!doctype html>
<html>
<body>
Content
</body>
</html>
Web Browser Container
• PWA não está na App ou Play Store
• Ainda não tem acesso a todas as
APIs e em todas as plataformas
• Sem nenhum tipo de linguagem
nativa, usa API do browser
O que é React Native?
O que é React Native?
“Learn once, write anywhere”
O que é React Native?
“Learn once, write anywhere”
Framework que permite criar aplicativos móveis
nativos utilizando JavaScript e React (Native)
Uma breve história do
React Native
Summer 2013
Facebook internal
hackathon
January 2015
Public Preview
March 2015
Released to 

open source

( iOS Support )
September 2015
Android Support
React vs React Native
ReactJS
React Component
render: function() {
return <div>Hello!</div>;
}
Browser

DOM
React

Native
React Component
render: function() {
return <View>Hello!</View>;
}
iOS
bridge
Android
???
Código Nativo iOS
// Objective-C
UIAlertController * alert = [UIAlertController
alertControllerWithTitle:@"Alert"
message:@"Hello World"
preferredStyle:UIAlertControllerStyleAlert];
[self presentViewController:alert animated:YES completion:nil];
Código Nativo iOS
// Swift
let alert = UIAlertController(title: "Alert",
message: "Hello World",
preferredStyle: .alert)
self.present(alert, animated: true)
Código Nativo Android
// Java
AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setTitle("Alert");

builder.setMessage("Hello World");

builder.setPositiveButton("OK", null);

builder.show();
Código Nativo Android
// Kotlin
val builder = AlertDialog.Builder(this)
builder.setTitle("Alert")
builder.setMessage("Hello World")
builder.setPositiveButton("OK", null)
builder.show()
Com o React Native
alert('Hello World');
… e multi-plataforma!
Native - JavaScript Bridge
React Native API, Native Modules
JavaScript runtime (JavaScript Core, V8)
Application Code (JavaScript)
Native APIs
iOS, Android …
Bridge (JavaScript - Nativo)
UIButton Class
<Button title="My Button" />
Android iOS React Native
View UIView <View>
EditText UITextField <TextInput>
Por que React Native?
- experiência nativa
- uma única linguagem, JavaScript
- amigável para desenvolvedor web
- experiência de desenvolvimento rápida ( Hot Reloading, ~80% código
compartilhado, fácil debug )
- possibilita acesso a código nativo caso precise
- open source e comunidade extremamente ativa ( +57K Stars )
Por que não React Native?
- React Native é ainda relativamente novo comparado com iOS e Android
nativo
- algumas das API ainda não são suportadas por padrão ( mas é possível
acessar a API nativa através da Bridge )
- Navegação é… complexa!
- atualizações de versões constantes
- adiciona uma camada a mais
Quem usa?
Facebook Facebook Ads Manager Instagram Airbnb
Walmart Tesla
…
Skype UberEATS
SoundCloud Pulse Wix
Desenvolvimento
React = JSX + Modern JavaScript
React = JSX + Modern JavaScript
class App extends Component {
state = { text: '' };


constructor(props) {
super(props);
}
render() {
return (
<TextInput
style={{ marginTop:30, marginHorizontal:10,
height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder = 'Digite seu nome'
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
Styles
Styles
- na web nós temos o CSS
- no React Native, nós temos algo "similar" ao CSS usando JavaScript
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
Layout
Layout
buttons: {

flex: 1,

flexDirection: 'row',

justifyContent: 'space-around',

alignItems: 'center'

}
FLEXBOX
class App extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
)
}
}
class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello!</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
backgroundColor: 'whitesmoke',
color: '#4A90E2',
fontSize: 24,
padding: 10,
},
})
Executando código específico para uma
Plataforma
import { Platform } from 'react-native';
if (Platform.OS === 'ios') {
...
} else {
...
}
Executando código específico para uma
Plataforma
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});
Executando código específico para uma
Plataforma
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
Executando código específico para uma
Plataforma
const message = Platform.select({
ios: 'Hello iOS',
android: 'Hello Android',
});
Executando código específico para uma
Plataforma
const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
<Component />;
Executando código específico para uma
Plataforma
BigButton.ios.js
BigButton.android.js
const BigButton = require('./BigButton');
Executando código específico para uma
Plataforma
spellCheck={true}
clearTextOnFocus={false}
underlineColorAndroid="transparent"
numberOfLines={2}
keyboardType="numeric"
Navigation Libs
• wix/react-native-navigation (nativo)
• airbnb/native-navigation (nativo)
• react-community/react-navigation (JS)
• aksonov/react-native-router-flux (JS - baseado no react-navigation)
Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger
• infinitered/reactotron
• VS Code
Como começar?
➡ react-native-cli
➡ create-react-native-app
react-native-cli
Ambiente de Desenvolvimento
Mac OS pode desenvolver
• iOS
• Android
Windows e Linux podem desenvolver
• somente Android
Instalação
MAC
HOMEBREW



/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
NODE



brew install node
WATCHMAN



brew install watchman
REACT NATIVE



npm install -g react-native-cli
Instalação
WINDOWS
CHOCOLATEY



https://chocolatey.org/
NODE



choco install nodejs.install
PYTHON 2



choco install python2
JDK 8



choco install jdk8
REACT NATIVE



npm install -g react-native-cli
SDKs
Nativos
App Store
https://developer.android.com/studio
create-react-native-app
create-react-native-app
Expo XDE
Qual editor?
• Qualquer editor de código
• Atom
• Sublime
• Visual Studio Code ❤
https://snack.expo.io/
Exemplo

Mais conteúdo relacionado

Mais procurados

React web development
React web developmentReact web development
React web developmentRully Ramanda
 
Automação de Teste para iOS e Android com Appium
Automação de Teste para iOS e Android com AppiumAutomação de Teste para iOS e Android com Appium
Automação de Teste para iOS e Android com AppiumElias Nogueira
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentationBhavin Shah
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao AndroidJanynne Gomes
 
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition APIAlphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition APIAlphorm
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Web Tech Java Servlet Update1
Web Tech   Java Servlet Update1Web Tech   Java Servlet Update1
Web Tech Java Servlet Update1vikram singh
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPDaniel Brandão
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)Gustavo Zimmermann
 
Automatizando seus testes com robot framework
Automatizando seus testes com robot frameworkAutomatizando seus testes com robot framework
Automatizando seus testes com robot frameworkClaudenir Freitas
 
React js programming concept
React js programming conceptReact js programming concept
React js programming conceptTariqul islam
 
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 JavaScript - Chapter 9 - TypeConversion and Regular Expressions  JavaScript - Chapter 9 - TypeConversion and Regular Expressions
JavaScript - Chapter 9 - TypeConversion and Regular Expressions WebStackAcademy
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass SlidesNir Kaufman
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystémeAlgeria JUG
 

Mais procurados (20)

React web development
React web developmentReact web development
React web development
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Automação de Teste para iOS e Android com Appium
Automação de Teste para iOS e Android com AppiumAutomação de Teste para iOS e Android com Appium
Automação de Teste para iOS e Android com Appium
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentation
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
 
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition APIAlphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
React js
React jsReact js
React js
 
Web Tech Java Servlet Update1
Web Tech   Java Servlet Update1Web Tech   Java Servlet Update1
Web Tech Java Servlet Update1
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 
Automatizando seus testes com robot framework
Automatizando seus testes com robot frameworkAutomatizando seus testes com robot framework
Automatizando seus testes com robot framework
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 JavaScript - Chapter 9 - TypeConversion and Regular Expressions  JavaScript - Chapter 9 - TypeConversion and Regular Expressions
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass Slides
 
React-JS.pptx
React-JS.pptxReact-JS.pptx
React-JS.pptx
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystéme
 

Semelhante a React Native - JSday

DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...iMasters
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev IntroduçãoMarcio Marinho
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Emerson Macedo
 
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoDesenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoGuilherme Heynemann Bruzzi
 
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React NativeDesenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React NativeLuís Felipe Souza
 
Desenvolvimento RIA com Java
Desenvolvimento RIA com JavaDesenvolvimento RIA com Java
Desenvolvimento RIA com Javaarmeniocardoso
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APIJessica Zanelato Soares
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao androidMessias Batista
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DRenato Puccini
 
Desenvolvimento Ria com Java
Desenvolvimento Ria com JavaDesenvolvimento Ria com Java
Desenvolvimento Ria com JavaTI Infnet
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.jsJoel Rodrigues
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Ramon Durães
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesRodrigo Peleias
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Daniel Semedo
 

Semelhante a React Native - JSday (20)

DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010
 
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoDesenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do código
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
 
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React NativeDesenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
 
Desenvolvimento RIA com Java
Desenvolvimento RIA com JavaDesenvolvimento RIA com Java
Desenvolvimento RIA com Java
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3D
 
Desenvolvimento Ria com Java
Desenvolvimento Ria com JavaDesenvolvimento Ria com Java
Desenvolvimento Ria com Java
 
Meetup React Native
Meetup React NativeMeetup React Native
Meetup React Native
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
 
Continuous Deployment e DevOps na Nuvem
Continuous Deployment e DevOps na NuvemContinuous Deployment e DevOps na Nuvem
Continuous Deployment e DevOps na Nuvem
 
Oficina Sesc Android - V1
Oficina Sesc Android - V1Oficina Sesc Android - V1
Oficina Sesc Android - V1
 
ASP.NET 5, MVC 6 e além
ASP.NET 5, MVC 6 e alémASP.NET 5, MVC 6 e além
ASP.NET 5, MVC 6 e além
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
 

Mais de Eric Cavalcanti

Aplicações móveis multi-plataforma com Titanium - Geek Night
Aplicações móveis multi-plataforma com Titanium - Geek NightAplicações móveis multi-plataforma com Titanium - Geek Night
Aplicações móveis multi-plataforma com Titanium - Geek NightEric Cavalcanti
 
Titanium Mobile - Campus Party Recife 2
Titanium Mobile - Campus Party Recife 2Titanium Mobile - Campus Party Recife 2
Titanium Mobile - Campus Party Recife 2Eric Cavalcanti
 
Titanium Mobile apresentado na Campus Party Recife
Titanium Mobile apresentado na Campus Party RecifeTitanium Mobile apresentado na Campus Party Recife
Titanium Mobile apresentado na Campus Party RecifeEric Cavalcanti
 
Desenvolvendo aplicações Adobe AIR para Android
Desenvolvendo aplicações Adobe AIR para AndroidDesenvolvendo aplicações Adobe AIR para Android
Desenvolvendo aplicações Adobe AIR para AndroidEric Cavalcanti
 
Introdução ao Titanium Mobile
Introdução ao Titanium MobileIntrodução ao Titanium Mobile
Introdução ao Titanium MobileEric Cavalcanti
 
Scrum Adoption in an Academic Distributed Environment
Scrum Adoption in an Academic Distributed EnvironmentScrum Adoption in an Academic Distributed Environment
Scrum Adoption in an Academic Distributed EnvironmentEric Cavalcanti
 
Utilizando o Padrão Presentation Model em Aplicações Flex
Utilizando o Padrão Presentation Model em Aplicações FlexUtilizando o Padrão Presentation Model em Aplicações Flex
Utilizando o Padrão Presentation Model em Aplicações FlexEric Cavalcanti
 
Desmistificando o cairngorm
Desmistificando o cairngormDesmistificando o cairngorm
Desmistificando o cairngormEric Cavalcanti
 
FireScrum - Ontem, Hoje e o Futuro
FireScrum - Ontem, Hoje e o FuturoFireScrum - Ontem, Hoje e o Futuro
FireScrum - Ontem, Hoje e o FuturoEric Cavalcanti
 

Mais de Eric Cavalcanti (13)

Aplicações móveis multi-plataforma com Titanium - Geek Night
Aplicações móveis multi-plataforma com Titanium - Geek NightAplicações móveis multi-plataforma com Titanium - Geek Night
Aplicações móveis multi-plataforma com Titanium - Geek Night
 
Titanium Mobile - Campus Party Recife 2
Titanium Mobile - Campus Party Recife 2Titanium Mobile - Campus Party Recife 2
Titanium Mobile - Campus Party Recife 2
 
Titanium Mobile apresentado na Campus Party Recife
Titanium Mobile apresentado na Campus Party RecifeTitanium Mobile apresentado na Campus Party Recife
Titanium Mobile apresentado na Campus Party Recife
 
Agile
AgileAgile
Agile
 
Desenvolvendo aplicações Adobe AIR para Android
Desenvolvendo aplicações Adobe AIR para AndroidDesenvolvendo aplicações Adobe AIR para Android
Desenvolvendo aplicações Adobe AIR para Android
 
Introdução ao Titanium Mobile
Introdução ao Titanium MobileIntrodução ao Titanium Mobile
Introdução ao Titanium Mobile
 
Scrum
ScrumScrum
Scrum
 
Scrum Adoption in an Academic Distributed Environment
Scrum Adoption in an Academic Distributed EnvironmentScrum Adoption in an Academic Distributed Environment
Scrum Adoption in an Academic Distributed Environment
 
Utilizando o Padrão Presentation Model em Aplicações Flex
Utilizando o Padrão Presentation Model em Aplicações FlexUtilizando o Padrão Presentation Model em Aplicações Flex
Utilizando o Padrão Presentation Model em Aplicações Flex
 
Desmistificando o cairngorm
Desmistificando o cairngormDesmistificando o cairngorm
Desmistificando o cairngorm
 
FireScrum - Ontem, Hoje e o Futuro
FireScrum - Ontem, Hoje e o FuturoFireScrum - Ontem, Hoje e o Futuro
FireScrum - Ontem, Hoje e o Futuro
 
FireScrum Agiles2009
FireScrum Agiles2009FireScrum Agiles2009
FireScrum Agiles2009
 
FireScrum
FireScrumFireScrum
FireScrum
 

React Native - JSday

  • 2. O que é React Native?
  • 3. O que não é React Native?
  • 5. Device API HTML 5 e JavaScript <!doctype html> <html> <body> Content </body> </html> WebView • RN não usa WebView, a renderização é nativa • Perfomance do React Native tende a ser melhor • Os dois são OpenSource e tem um ecossistema bem movimentado
  • 8. Native App • Nativo não tem portabilidade de código • Desenvolvimento apenas com linguagem nativa • Nativo tem performance um pouco melhor
  • 10. Device API HTML 5 e JavaScript <!doctype html> <html> <body> Content </body> </html> Web Browser Container • PWA não está na App ou Play Store • Ainda não tem acesso a todas as APIs e em todas as plataformas • Sem nenhum tipo de linguagem nativa, usa API do browser
  • 11. O que é React Native?
  • 12. O que é React Native? “Learn once, write anywhere”
  • 13. O que é React Native? “Learn once, write anywhere” Framework que permite criar aplicativos móveis nativos utilizando JavaScript e React (Native)
  • 14. Uma breve história do React Native Summer 2013 Facebook internal hackathon January 2015 Public Preview March 2015 Released to 
 open source
 ( iOS Support ) September 2015 Android Support
  • 15. React vs React Native ReactJS React Component render: function() { return <div>Hello!</div>; } Browser
 DOM React
 Native React Component render: function() { return <View>Hello!</View>; } iOS bridge Android ???
  • 16. Código Nativo iOS // Objective-C UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"Alert" message:@"Hello World" preferredStyle:UIAlertControllerStyleAlert]; [self presentViewController:alert animated:YES completion:nil];
  • 17. Código Nativo iOS // Swift let alert = UIAlertController(title: "Alert", message: "Hello World", preferredStyle: .alert) self.present(alert, animated: true)
  • 18. Código Nativo Android // Java AlertDialog.Builder builder = new AlertDialog.Builder(this);
 builder.setTitle("Alert");
 builder.setMessage("Hello World");
 builder.setPositiveButton("OK", null);
 builder.show();
  • 19. Código Nativo Android // Kotlin val builder = AlertDialog.Builder(this) builder.setTitle("Alert") builder.setMessage("Hello World") builder.setPositiveButton("OK", null) builder.show()
  • 20. Com o React Native alert('Hello World'); … e multi-plataforma!
  • 21. Native - JavaScript Bridge React Native API, Native Modules JavaScript runtime (JavaScript Core, V8) Application Code (JavaScript) Native APIs iOS, Android …
  • 22. Bridge (JavaScript - Nativo) UIButton Class <Button title="My Button" />
  • 23. Android iOS React Native View UIView <View> EditText UITextField <TextInput>
  • 24. Por que React Native? - experiência nativa - uma única linguagem, JavaScript - amigável para desenvolvedor web - experiência de desenvolvimento rápida ( Hot Reloading, ~80% código compartilhado, fácil debug ) - possibilita acesso a código nativo caso precise - open source e comunidade extremamente ativa ( +57K Stars )
  • 25. Por que não React Native? - React Native é ainda relativamente novo comparado com iOS e Android nativo - algumas das API ainda não são suportadas por padrão ( mas é possível acessar a API nativa através da Bridge ) - Navegação é… complexa! - atualizações de versões constantes - adiciona uma camada a mais
  • 26. Quem usa? Facebook Facebook Ads Manager Instagram Airbnb Walmart Tesla … Skype UberEATS SoundCloud Pulse Wix
  • 27. Desenvolvimento React = JSX + Modern JavaScript
  • 28. React = JSX + Modern JavaScript class App extends Component { state = { text: '' }; 
 constructor(props) { super(props); } render() { return ( <TextInput style={{ marginTop:30, marginHorizontal:10, height: 40, borderColor: 'gray', borderWidth: 1}} placeholder = 'Digite seu nome' onChangeText={(text) => this.setState({text})} value={this.state.text} /> ); } }
  • 30. Styles - na web nós temos o CSS - no React Native, nós temos algo "similar" ao CSS usando JavaScript class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, });
  • 32. Layout buttons: {
 flex: 1,
 flexDirection: 'row',
 justifyContent: 'space-around',
 alignItems: 'center'
 } FLEXBOX
  • 33. class App extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ) } }
  • 34. class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>Hello!</Text> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { backgroundColor: 'whitesmoke', color: '#4A90E2', fontSize: 24, padding: 10, }, })
  • 35. Executando código específico para uma Plataforma import { Platform } from 'react-native'; if (Platform.OS === 'ios') { ... } else { ... }
  • 36. Executando código específico para uma Plataforma import { Platform, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
  • 37. Executando código específico para uma Plataforma import { Platform, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), }, });
  • 38. Executando código específico para uma Plataforma const message = Platform.select({ ios: 'Hello iOS', android: 'Hello Android', });
  • 39. Executando código específico para uma Plataforma const Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'), })(); <Component />;
  • 40. Executando código específico para uma Plataforma BigButton.ios.js BigButton.android.js const BigButton = require('./BigButton');
  • 41. Executando código específico para uma Plataforma spellCheck={true} clearTextOnFocus={false} underlineColorAndroid="transparent" numberOfLines={2} keyboardType="numeric"
  • 42. Navigation Libs • wix/react-native-navigation (nativo) • airbnb/native-navigation (nativo) • react-community/react-navigation (JS) • aksonov/react-native-router-flux (JS - baseado no react-navigation)
  • 43. Debug • Chrome Developer Tools • facebook/react-devtools • jhen0409/react-native-debugger • infinitered/reactotron • VS Code
  • 44. Como começar? ➡ react-native-cli ➡ create-react-native-app
  • 46. Ambiente de Desenvolvimento Mac OS pode desenvolver • iOS • Android Windows e Linux podem desenvolver • somente Android
  • 47. Instalação MAC HOMEBREW
 
 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" NODE
 
 brew install node WATCHMAN
 
 brew install watchman REACT NATIVE
 
 npm install -g react-native-cli
  • 48. Instalação WINDOWS CHOCOLATEY
 
 https://chocolatey.org/ NODE
 
 choco install nodejs.install PYTHON 2
 
 choco install python2 JDK 8
 
 choco install jdk8 REACT NATIVE
 
 npm install -g react-native-cli
  • 53. Qual editor? • Qualquer editor de código • Atom • Sublime • Visual Studio Code ❤