Desacoplando D8 e ReactDrupalCamp Campinas

2016

Sebastian Ferrari (a.k.a. Sebas)sebas@taller.net.br

Desacoplar Drupal ?

Diminuir a interdependênciaentre as camadas

ou entidades de um sistema

Aumentarinteroperabilidade

Contrato de comunicação

transparente entre diferentes partes

do sistema

GraphQL

Front-end

Back-end

Por quediminuir oacoplamento?

Regras de negóciode como acessar as

informações misturadas

com apresentação

Overloadde

complexidade

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

Entropia

Alto risco e esforçoperante as mudanças

Alto risco e esforçoperante as mudanças

O que é ágil ?

“ It’s not what happens

that counts…it’s how you react.

Bruce Lee

Front-end geradopelo back-end

Alto conhecimento do todo para realizar

uma mudança

Overloadcognitivo

para entender

Side-effects everywhere

De onde vemesse campo?

Quem está trocando o texto desse botão?

Porque não está funcionando?

Porque está funcionando?

De onde vem esse estilo/css?

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

Softwaremonolítico

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.

Não temfórmula mágica

Maneira => parcial

Por que ?

Quase separação completa

Desacoplar por completo

aumenta o risco

Queremos inovar com menor risco

Podemos usar o Drupal onde melhor

se encaixa

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

Usuários.●Sistema de

permissões.●RESTful API.●Gerenciador de

conteúdo.

Time de devs preparados para o

desafio

Drupaleiros queadoram Javascript

JS

Não precisamos de

server rendering

Comoestamosfazendo ?

Tratamos rotas da Web App como exceção

utilizando um prefixo ou subdomínio

mymodule_core.routes.yml

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

Módulos contribpodem criar rotas,

regras de acesso,assets ou

arquivos privados

Login no admindo Drupal

Páginas de 404 ou 403

são tratadas pelo Drupal

Rotas do Drupal se comportam diferente do

Symfony

Symfony

Drupal

Drupalmymodule.service

s.yml

http://bit.ly/292xoAu

Web App = Theme / Tema

/app/* = webapp.theme

Serviço: theme_negotiator

Login e sessão do usuário é

responsabilidade do Drupal usando

Cookie

Drupal 8tem tudo em REST

fora da caixacerto?

Login, não.

Tentamos usaro formulário de

loginmas carece de

respostassemânticas de HTTP

Redirects depois de realizar o login com

sucesso para/user

Achamos um issuecom patch!

drupal.org/node/2403307

StackFront-end Back-

end

React

V do MVC

Por queReact ?

Programaçãofuncional e reativa

λ

Virtual DOM

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

safaribooksonline.com

Diminui:repaint & reflows

Simples e declarativo que

aumenta o entendimento do

código

Familiar vs. Legibilidade

pessoas novas no time podem entender o que o

código faz

Renderizaçãono servidor

melhora SEO e UX

Componente representa uma

função que recebe argumentos

e retorna o virtual dom

render()

State lesscomponents

Ecossistemainduz

programaçãofuncional

Comunidade que cresce

rapidamente e altamente inovadora

Eventos sintéticos

implementando Event Delegation

React Native

ElectronApp

+ Enzym

e

github.com/choko-org/redux-boot

CSSModules

Webpack

+

ES6 com plus!!

/webapp/dist/bundle.js

Não é a melhorsolução para todos

os problemas !

Work in Progress

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.

Trabalho em equipe!

Perguntas ?

Sebastian Ferrarisebas5384