React no Mundo Real

Relatos de Um Site de Aluguel de Carros

Quem somos

Cristiano Medeiros Dalbem

Gabriel Delavald

Luca Couto Manique Barreto

2

Isobar

3

…is a global full-service digital agency, creatively solving critical, complex client challenges in the digital era.

  • Enterprise

Arquitetura

Vida Real

Próximos Passos

4

2003

5

2014

6

Este é um projeto de redesign de uma antiga plataforma rodando em tecnologias arcaicas mas servindo uma quantidade incrivel de clientes todos os dias.

A Isobar nao foi a primeira a ser contratada para esta tarefa. Nao sabemos ao certo, mas diz-se que uma grande empresa desenvolveu antes uma outra plataforma mas em uma abordagem mais de cascata, o que gerou varios problemas e o projeto acabou sendo abortado. A Isobar então que é uma agência acostumada com métodos mais ágeis foi quem conseguiu entrar uma solução melhor, incorporando também outros serviços para atender integralmente as necessidades do cliente: marketing, identidade visual, UX, etc.

A decisao por tecnologias novas era obvia para a equipe, que gostaria de usar tecnologias modernas porém respeitando a curva de aprendizado delas tanto a nivel de desenvolvedores quanto de equipe. Desta forma foi decidido usar como biblioteca de UI o React com algumas outras poucas ferramentas de apoio. Não foi usada uma arquitetura Redux completa ainda, mas ela seria implementado algum tempo depois em um próximo projeto onde os aprendizados desta plataforma seriam reaproveitados e melhorados (ver seção final: O que há pela frente)

Front-End Architecture

From the beginning of the enterprise.com project, Interactive development has been aligned with the UX and Creative about building a very modular, component-based user interface. All of the discussions have focused on developing a design system, from which components, moduals and pages could be derived. The idea is based heavily on the principles outlined by Brad Frost called "Atomic Web Design" link: http://bradfrost.com/blog/post/atomic-web-design/.

Basically, instead of using a heavy CSS framework, like Twitter Bootstrap or Foundation, of which we would only use a fraction, we would build a "bootstrap" component library that only contains the pieces we are using, thus removing any additional bloat.

AEM 6's Sightly templating language fits well within this paradigm, and it is our intention to use it as much as possible.

For the dynamic, client-based aspects of the site, we chose a JavaScript library that also fit very well with Atomic Web Design.

The choice for react.js and Flux was a natural fit.

React.js is an open source JS library initally developed by Facebook's Instagram team. It is used heavily on instagram.com and facebook.com.

Here is a list of reasons why we chose React / Flux

Component-Based – We can build reusable client-side components.

Rendering Speed – The "slowness" of JavaScript is mostly due to the updating the Document Object Model. React maintains a virtual DOM, allowing it to calculate differences so that updates are rendered for the part of the DOM that needs to be updated.

Simple – The public API is very easy to learn. link: https://facebook.github.io/react/docs/top-level-api.html

JSX - React components can be written in a simple syntax that is instantly familiar to any web developer and that xml based syntax is automatically converted to standard JavaScript during the build process. link: https://facebook.github.io/react/docs/jsx-in-depth.html

Flux - React's application architecture, focuses on a unidirectional data flow and favors data immutability as it flows, therefore you know exactly where your data is updated.

Testable (Jest) – React components simplify testing greatly.

2015

7

Enterprise Web

8

1.783.568

visualizações / dia

33.289

reservas / dia

$5.086.440,00

receita / dia

Dados médios do ano de 2016.

Enterprise Web

9

10

fronts (no auge)

80+

membros na equipe

350+

componentes

Enterprise

  • Arquitetura

Vida Real

Próximos Passos

10

Overview

11

Mobile

Front-end

Enterprise

Backend

GMA

Adobe AEM

iOS

Android

Backend

MSI

React, ...

AEM (Adobe Experience Manager)

Stack Front

12

React + Baobab

Babel

Gulp

Browserify

SASS

Eslint

BaobabJS

Árvore de dados persistente utilizada como estado global da aplicação.

Suporte a cursores permitem facilidade no caminhamento da árvore.

Implementação da biblioteca e a forma como é utilizada podem gerar problemas.

13

Arquitetura

14

Backend

GMA

Services

Controller

Árvore de estados

Baobab

View

React

Actions

nossa arquitetura "teoricamente"

Enterprise

Arquitetura

  • Vida Real

Próximos Passos

15

Arquitetura

16

Backend

GMA

Services

Controller

Árvore de estados

Baobab

View

React

Actions

nossa arquitetura no estado atual da aplicação.

Arquitetura

17

Backend

GMA

Services

Controller

Árvore de estados

Baobab

View

React

Actions

nossa arquitetura se não promovêssemos boas práticas.

Desafios e Boas Práticas

DESAFIO

Como lidar com um sistema que possui muita lógica de negócio no frontend?

18

BOAS PRÁTICAS

Manter componentes pequenos, puros e imutáveis.

Respeitar a arquitetura.

Desafio:

Boas Práticas:

Desafios e Boas Práticas

DESAFIO

Como controlar o estado de uma aplicação complexa?

19

BOAS PRÁTICAS

Manter a modularização do sistema e usar estados locais dos componentes.

Desafio:

Boas práticas:

20

21

Desafios e Boas Práticas

DESAFIO

Promover o modo de pensar React.

22

BOAS PRÁTICAS

Promover o modo de pensar React.

Problemas:

Como resolver:

23

Exemplo de como vir para React com um pensamento no modelo imperativo de programação pode ser ruim.

24

Exemplo de quebra do modelo ‘one way data flow’ que a arquitetura sugere.

25

Desafios e Boas Práticas

DESAFIO

Equipe distribuída e com diferentes níveis de conhecimento de React.

26

BOAS PRÁTICAS

Code reviews e ramp ups de verdade, e muito Slack.

Enterprise

Arquitetura

Vida Real

  • Próximos Passos

27

Próximos passos

28

Obrigado!

Cristiano Medeiros Dalbem

cmdalbem

Gabriel Delavald

gdelavald

Luca Couto Manique Barreto

apus

29

Perguntas?

React no Mundo Real: Relatos de Um Site de Aluguel de Carros - Google Slides