DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface

React
Para aplicações web e mobile
como plataforma de interface
@breno_calazans
VTEX

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?

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>

Frameworks
com Data Bind
e Templates
Angular, 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>

Muitos conceitos!
Filters, Directives, Services, Controllers,
Transclusion, Factory, Provider, etc…

“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

O Facebook parou para
repensar as boas práticas

Biblioteca Javascript para
construção de interfaces

(data) => HTML
Código Imprevisível

Tudo é Javascript
Linguagem de Template

Renderização Server-side
SEO

JSX
class Hello extends React.Component {
render() {
return <h1>Olá Mundo!</h1>;
}
}
JSX

API Declarativa
SQL, Regex e Programação funcional

SELECT * FROM users
WHERE 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

Caso você não queira lidar com
renderização server-side, use
apenas em áreas logadas

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

O ambiente nativo é mais hostil

iOS e Android
Equipes, ferramentas, projetos e
códigos diferentes

React foi feito para construir
qualquer sistema de interfaces

É um framework para construção
de aplicativos nativos usando
Javascript e React.

“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

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

DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface

Semelhante a DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface (20)

Mais de iMasters

Mais de iMasters (20)

Último

Último (20)

DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface