Drupal 8 e ReactJS - DrupalCamp Campinas 2016

103
Desacoplando D8 e React DrupalCamp Campinas 2016 Sebastian Ferrari (a.k.a. Sebas) [email protected]

Transcript of Drupal 8 e ReactJS - DrupalCamp Campinas 2016

Page 1: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Desacoplando D8 e ReactDrupalCamp Campinas

2016

Sebastian Ferrari (a.k.a. Sebas)[email protected]

Page 2: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Desacoplar Drupal ?

Page 3: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Diminuir a interdependênciaentre as camadas

ou entidades de um sistema

Page 4: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Aumentarinteroperabilidade

Page 5: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Contrato de comunicação

transparente entre diferentes partes

do sistema

Page 6: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

GraphQL

Page 7: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Front-end

Back-end

Page 8: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Por quediminuir oacoplamento?

Page 9: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Regras de negóciode como acessar as

informações misturadas

com apresentação

Page 10: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Overloadde

complexidade

Page 11: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

A soma das partes é maior do que o resultado final.

Entropia

Page 12: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Alto risco e esforçoperante as mudanças

Page 13: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 14: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Alto risco e esforçoperante as mudanças

Page 15: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 16: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 17: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

O que é ágil ?

Page 18: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

“ It’s not what happens

that counts…it’s how you react.

Page 19: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Bruce Lee

Page 20: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Front-end geradopelo back-end

Page 21: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Alto conhecimento do todo para realizar

uma mudança

Page 22: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Overloadcognitivo

para entender

Page 23: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Side-effects everywhere

Page 24: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

De onde vemesse campo?

Page 25: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Quem está trocando o texto desse botão?

Page 26: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Porque não está funcionando?

Page 27: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Porque está funcionando?

Page 28: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

De onde vem esse estilo/css?

Page 29: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Como troco a mensagem de validação do campo?

Page 30: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Softwaremonolítico

Page 31: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 32: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Maneiras de desacoplar

TOTALMENTE

★ Web App separada.

★ Drupal Head-less.

★ Comunicação entre as partes puramente via APIs.

PARCIAL

★ Web App é um Theme / Tema.

★ Entrega do HTML final e sistema de rotas do Drupal.

PROGRESSIVO

★ Alguns componentes são puramente feitos em JS + Drupal behaviors.

★ Entrega do HTML final e sistema de rotas do Drupal.

Page 33: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Não temfórmula mágica

Page 34: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Maneira => parcial

Page 35: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Por que ?

Page 36: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Quase separação completa

Page 37: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Desacoplar por completo

aumenta o risco

Page 38: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Queremos inovar com menor risco

Page 39: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Podemos usar o Drupal onde melhor

se encaixa

Page 40: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

●Sistema de rotas.●Login / Sessão /

Usuários.●Sistema de

permissões.●RESTful API.●Gerenciador de

conteúdo.

Page 41: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Time de devs preparados para o

desafio

Page 42: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Drupaleiros queadoram Javascript

JS

Page 43: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Não precisamos de

server rendering

Page 44: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Comoestamosfazendo ?

Page 45: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Tratamos rotas da Web App como exceção

utilizando um prefixo ou subdomínio

Page 46: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

mymodule_core.routes.yml

Page 47: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

/app => Home/app/* => Páginas filhas

Page 48: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Módulos contribpodem criar rotas,

regras de acesso,assets ou

arquivos privados

Page 49: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Login no admindo Drupal

Page 50: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Páginas de 404 ou 403

são tratadas pelo Drupal

Page 51: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Rotas do Drupal se comportam diferente do

Symfony

Page 52: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Symfony

Page 53: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Drupal

Page 54: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Drupalmymodule.service

s.yml

Page 55: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

http://bit.ly/292xoAu

Page 56: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Web App = Theme / Tema

Page 57: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

/app/* = webapp.theme

Page 58: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Serviço: theme_negotiator

Page 59: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 60: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Login e sessão do usuário é

responsabilidade do Drupal usando

Cookie

Page 61: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Drupal 8tem tudo em REST

fora da caixacerto?

Page 62: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Login, não.

Page 63: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Tentamos usaro formulário de

loginmas carece de

respostassemânticas de HTTP

Page 64: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Redirects depois de realizar o login com

sucesso para/user

Page 65: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Achamos um issuecom patch!

drupal.org/node/2403307

Page 66: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 67: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

StackFront-end Back-

end

Page 68: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

React

Page 69: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

V do MVC

Page 70: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Por queReact ?

Page 71: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Programaçãofuncional e reativa

λ

Page 72: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 73: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Virtual DOM

<a href=”#”>link</a>

Page 75: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Diminui:repaint & reflows

Page 76: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Simples e declarativo que

aumenta o entendimento do

código

Page 77: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Familiar vs. Legibilidade

pessoas novas no time podem entender o que o

código faz

Page 78: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Renderizaçãono servidor

melhora SEO e UX

Page 79: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Componente representa uma

função que recebe argumentos

e retorna o virtual dom

render()

Page 80: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

State lesscomponents

Page 81: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 82: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Ecossistemainduz

programaçãofuncional

Page 83: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Comunidade que cresce

rapidamente e altamente inovadora

Page 84: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Eventos sintéticos

implementando Event Delegation

Page 85: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

React Native

ElectronApp

Page 86: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

+ Enzym

e

Page 87: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 88: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 89: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 90: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 91: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 92: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

github.com/choko-org/redux-boot

Page 93: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 94: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 95: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

CSSModules

Page 96: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Page 97: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Webpack

+

Page 98: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

ES6 com plus!!

/webapp/dist/bundle.js

Page 99: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Não é a melhorsolução para todos

os problemas !

Page 100: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Work in Progress

Page 101: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Drupal 8 rocks!★ Arquitetura menos acoplada.★ Services API, não precisamos de

hooks!★ Entities API simples, realmente.★ Testes unitários e E2E headless.★ Composer PHP. \o/★ Drupal Console.

Page 102: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Trabalho em equipe!

Page 103: Drupal 8 e ReactJS -  DrupalCamp Campinas 2016

Perguntas ?

Sebastian Ferrarisebas5384