Post on 23-Jan-2018
ReactPara aplicações web e mobilecomo plataforma de interface
@breno_calazansVTEX
Por que estou falando de React?
VTEX é uma plataforma SaaS de e-commerce
Visite nosso estande!Próximo ao restaurante
Como melhorar a construção de interface de lojas?
Tentamos o modo tradicional
Não é possível ter uma experiência ótima sem interações complexas
A VTEX está construindo uma nova plataforma para desenvolver lojas como aplicações web
Breve História das Aplicações Web
Javascript<div>
<h1 id="title"></h1>
</div>
<script>
var title = document.getElementById
('title');
title.innerHTML = 'Olá, mundo!';
</script>
jQuery<div>
<h1 id="title"></h1>
</div>
<script>
$('#title').text('Olá, mundo!');
</script>
Frameworkscom Data Bind
e TemplatesAngular, Ember, Knockout e
Backbone
<div data-bind="template: 'title-
template'">
</div>
<template id="title-template">
<h1 data-bind="text: $title"></h1>
</template>
<script>
var viewModel = { title: '' };
ko.applyBindings(viewModel);
viewModel.title('Olá, mundo!');
</script>
Problemas
Muitos conceitos!Filters, Directives, Services, Controllers,
Transclusion, Factory, Provider, etc…
SEOGoogle
Linguagem de Template
Código Imprevisível
“Na minha época era mais fácil…”
Request
Usuário abre uma página
Servidor Banco
Lê os dados do banco de dados
Servidor
Renderiza um template com os dados
Response
Página HTML
Request
Atende a requisição
(data) => page
O Facebook parou pararepensar as boas práticas
React
Biblioteca Javascript para construção de interfaces
Muitos conceitos
ComponentesMuitos conceitos
Código Imprevisível
(data) => HTMLCódigo Imprevisível
(data) => HTMLCódigo Imprevisível
Linguagem de Template
Tudo é JavascriptLinguagem de Template
Performance
Virtual DOMPerformance
SEO
Renderização Server-sideSEO
“E os designers?”
JSXclass Hello extends React.Component {
render() {
return <h1>Olá Mundo!</h1>;
}
}
JSX
API DeclarativaSQL, Regex e Programação funcional
SELECT * FROM usersWHERE name=”Silva”;
var table = Database.use(‘users’); var users = table.getAll();
var result = filter(users, (user) => { return user.name == “Silva”;});
API Declarativa API Imperativa
Com React você não precisa lidar diretamente com o DOM
Facebook, Netflix, Dropbox, AirBnb, Reddit, PayPal, Khan Academy, Walmart,ESPN, Microsoft, Uber,NFL, Mozilla, Globo
Ressalvas!
React não é bala de prata
Caso você não queira lidar com renderização server-side, use
apenas em áreas logadas
Mobile Apps
Cordova & PhoneGap
Browser● Não tem sistema de gestos● Javascript não tem processos
paralelos● Não tem acesso a capacidades
nativas
O ambiente nativo é muito mais poderoso que o web
Mas tudo vem com um custo...
O ambiente nativo é mais hostil
iOS e AndroidEquipes, ferramentas, projetos e
códigos diferentes
API Imperativa
React?
React foi feito para construir qualquer sistema de interfaces
React Native
É um framework para construção de aplicativos nativos usando
Javascript e React.
Arquitetura multicore
API Declarativa
“Escreva uma vez, rode em qualquer lugar”
“Aprenda uma vez, desenvolva em qualquer lugar”
“Compartilhe quando possível,vá nativo quando necessário”
Compartilhe
● APIs● Ferramentas● Linguagem● Código
Nativo
Compartilhe
● APIs● Ferramentas● Linguagem● Código
Nativo
● Funcionalidades Proprietárias
● Performance● Investimentos
Existentes
Facebook Ads Manager● Experiência nativa● Feito pelo mesmo time● Compartilha 80-95% do código
Concluindo
React mudou a comunidade fundamentalmente
Popular
Github Stars
★ 43,131 React
★ 39,717 jQuery
★ 16,300 Ember
★ 12,540 Angular
Criou um ecossistema
Pacotes no npm
15,202 React
9,915 jQuery
3,682 Ember
7,589 Angular
React- Abstração simples- Fácil de testar- API Declarativa- Desenvolvedores confiantes- Facilita composição- Várias plataformas
Obrigado