drupal 8 e reactjs - drupalcamp campinas 2016
Post on 16-Apr-2017
420 Views
Preview:
TRANSCRIPT
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
top related