devcommerce conference 2016: react para aplicações web e mobile como plataforma de interface

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