Software Engineer
Mobile Chapter Leader
https://www.meetup.com/pt-BR/sanartech
https://twitter.com/sanartech
https://sanar.link/carreiratech
https://www.linkedin.com/company/sanar
https://www.youtube.com/c/SanarTech
Sanar Tech Talks Host
lucianomlima
@lucianomlima
https://reactssa.slack.com
https://www.meetup.com/pt-BR/reactssa/
https://react.salvador.br
https://sanar.link/carreiratech
Primeiro telefone celular (1983)
Motorola DynaTAC 8000X
Primeiro telefone celular (1983)
Motorola DynaTAC 8000X
Pesava quase 800g
30 minutos de conversação
10 horas para recarregar a bateria
Agenda com capacidade para 30 números
1992 - Primeiro SMS enviado
1994 - Primeiro aparelho com touch screen
1996 - Primeiro celular dobrável (flip)
1996 - Primeiro celular com acesso a internet
2001 - Dispositivos com Bluetooth e câmera
2002 - BlackBerry 5810 com suporte a rede GSM e envio de e-mail
2007 - Apple lança o iPhone
2008 - Primeiro celular com Android
2009 - Primeiro celular Android no Brasil
2010 - Lançamento do iPad
2011 - Android 3.0 Honeycomb
Motorola Xoom
2010 - Android supera iPhone em participação de mercado
Dias atuais...
Web App
HTML
CSS
JS
Mobile Framework
Mobile OS
WebView
Web App
Aplicativo Híbrido
WebView
Web App
HTML
CSS
JS
Web App
Câmera
Contatos
Microfone
FileSystem
Plugins
App Code
Compiler
Native Code
Native Libraries
App Libraries
(amazon-fireos, android, blackberry, firefox os, iOS, ubuntu e windows phone)
Características
Características
Características
Características
Características
Características
React
import React from 'react';
import { Text, View } from 'react-native';
function App() {
return (
<View>
<Text>Tô renderizado pae!</Text>
</View>
);
}
export default App;
import React from 'react';
import { Text, View } from 'react-native';
function Greetings() {
const name = 'Teobaldo';
return (
<View>
<Text>E aí {name}!</Text>
</View>
);
}
export default Greetings;
import React from 'react';
import { Text, View } from 'react-native';
function Greetings(props) {
return (
<View>
<Text>E aí {props.name}!</Text>
</View>
);
}
export default Greetings;
// Em outro componente
<Greetings name="Teobaldo" />
import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';
function Clicker() {
const [clicks, addClick] = useState(0);
return (
<View>
<Text>Você clicou {clicks} vezes!</Text>
<Button
title="Clicar"
onPress={() => addClick(state => state + 1)}
/>
</View>
);
}
export default Clicker;
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
function Message() {
return (
<View style={styles.container}>
<Text style={styles.message}>Tô todo estilizado!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
message: {
color: 'red',
backgroundColor: '#fff',
}
})
export default Message;
import React from 'react';
import { Platform, Text, View } from 'react-native';
function CurrentPlatform() {
const color = Platform.select({
android: 'green',
ios: 'red',
});
return (
<View>
<Text>Sistema identificado:</Text>
<Text style={{ color }}>{Platform.OS}</Text>
</View>
);
}
export default CurrentPlatform;
import React from 'react';
import { Text, View } from 'react-native';
type GreetingsProps = {
name: string;
};
function Greetings(props: GreetingsProps) {
return (
<View>
<Text>E aí {props.name}!</Text>
</View>
);
}
export default Greetings;
//Type 'number' is not assignable to type 'string'
<Greetings name={5} />
Biblioteca criada pelo Instagram para viabilizar o uso de componentes na interface de aplicações web.
Virtual DOM
Componentes HTML
JSX + JavaScript/TypeScript
Interface reativa
Arquitetura Flux
Framework para criação de aplicativos para dispositivos móveis (celulares, tablets, TVs) que usa o JavaScript como linguagem de programação.
Virtual DOM ➔ Bridge
Componentes HTML ➔ Componentes Mobile
JSX + JavaScript/TypeScript
Interface reativa
Arquitetura Flux
<div></div>
<p></p>, <span></span>
<img />
<ul><li></li></ul>
<form></form>
<input />
<button></button>
<View></View>
<Text></Text>
<Image />
<FlatList />, <SectionList />, <ScrollView></ScrollView>
<TextInput />
<Button />
<TouchableHighlight></TouchableHighlight>
<TouchableOpacity></TouchableOpacity>
<TouchableNativeFeedback></TouchableNativeFeedback> * Android
<TouchableWithoutFeedback></TouchableWithoutFeedback>
fonte: https://formidable.com/blog/2019/react-codegen-part-1/
By using the typed JavaScript (Flow or TypeScript) as the source of truth, this generator can define the interface files needed by Fabric and TurboModules to send messages across the realms with confidence.
fonte: https://formidable.com/blog/2019/react-codegen-part-1/
With JSI (JavaScript Interface), JavaScript can hold reference to C++ Host Objects and invoke methods on them. This means that the two realms of JavaScript and Native will be really aware of each other, and there won’t be any need to serialize to JSON the messages to pass across, removing all congestion on the bridge.
fonte: https://formidable.com/blog/2019/jsi-jsc-part-2/
This group of elements is basically responsible for two different behaviours: defining how the UI should look and behave (via the Shadow Tree) and managing the native side (via Native Modules). These communications happen via asynchronous JSON messages that get batched and sent, back and forth, over one communication channel, which can get congested and lead to suboptimal experiences.
Fabric, which is the re-architecture of the UI manager, and the TurboModules, which is the “new gen” implementation of the interaction with native side.
fonte: https://formidable.com/blog/2019/fabric-turbomodules-part-3/
(React -> Native -> Shadow Tree -> Native UI)
fonte: https://formidable.com/blog/2019/lean-core-part-4/
Tesla Motors
Uber Eats
Shopify
Discord
Wix
Skype
Uber
Walmart
Coinbase
Bloomberg
Salesforce
https://www.reinaldocirilo.com.br/post/2019/04/21/dispositivos-móveis-história-e-evolução
https://canaltech.com.br/inovacao/primeira-ligacao-feita-com-um-celular-completa-45-anos-relembre-a-historia-111152/
https://olhardigital.com.br/2019/09/23/noticias/android-faz-11-anos-relembre-alguns-de-seus-momentos-importantes/
https://www.tecmundo.com.br/dispositivos-moveis/146087-dynatac-iphone-conheca-historia-celulares.htm