SlideShare uma empresa Scribd logo
Desacoplando D8 e React
DrupalCamp Campinas
2016
Sebastian Ferrari (a.k.a. Sebas)
sebas@taller.net.br
Desacoplar Drupal ?
Diminuir a
interdependência
entre as camadas
ou entidades de um sistema
Aumentar
interoperabilidade
Contrato de comunicação
transparente entre
diferentes partes do
sistema
GraphQL
Front-end Back-end
Por que
diminuir o
acoplamento?
Regras de negócio
de como acessar as
informações misturadas
com apresentação
Overload
de
complexidade
A soma das partes é maior
do que o resultado final.
Entropia
Alto risco e esforço
perante as mudanças
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Alto risco e esforço
perante as mudanças
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
O que é ágil ?
“It’s not what happens
that counts…
it’s how you react.
Bruce Lee
Front-end gerado
pelo back-end
Alto conhecimento do todo
para realizar uma mudança
Overload
cognitivo
para entender
Side-effects everywhere
De onde vem
esse 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?
Software
monolítico
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.
Não tem
fó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 que
adoram Javascript
JS
Não precisamos de
server rendering
Como
estamos
fazendo ?
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 contrib
podem criar rotas,
regras de acesso,
assets ou
arquivos privados
Login no admin
do Drupal
Páginas de 404 ou 403
são tratadas pelo Drupal
Rotas do Drupal se
comportam diferente do
Symfony
Symfony
Drupal
Drupal
mymodule.services.yml
http://bit.ly/292xoAu
Web App = Theme / Tema
/app/* = webapp.theme
Serviço: theme_negotiator
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Login e sessão do usuário é
responsabilidade do
Drupal usando Cookie
Drupal 8
tem tudo em REST
fora da caixa
certo?
Login, não.
Tentamos usar
o formulário de login
mas carece de respostas
semânticas de HTTP
Redirects depois de
realizar o login com
sucesso para
/user
Achamos um issue
com patch!
drupal.org/node/2403307
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Stack
Front-end Back-end
React
V do MVC
Por que
React ?
Programação
funcional e reativa
λ
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
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ção
no servidor
melhora SEO e UX
Componente representa
uma função que recebe
argumentos
e retorna o virtual dom
render()
State less
components
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Ecossistema
induz
programação
funcional
Comunidade que
cresce rapidamente e
altamente inovadora
Eventos sintéticos
implementando
Event Delegation
React Native
ElectronApp
+ Enzyme
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
github.com/choko-org/redux-boot
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
CSS
Modules
Drupal 8 e ReactJS -  DrupalCamp Campinas 2016
Webpack
+
ES6 com plus!!
/webapp/dist/bundle.js
Não é a melhor
soluçã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 Ferrari
sebas5384

Mais conteúdo relacionado

Mais procurados

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
Rodrigo Branas
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
Apresentação sobre Drupal
Apresentação sobre DrupalApresentação sobre Drupal
Apresentação sobre Drupal
Webdrop
 
Introdução ao LiveOak
Introdução ao LiveOakIntrodução ao LiveOak
Introdução ao LiveOak
jesuinoPower
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
Rodrigo Branas
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
Just Digital
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
Java Web Fácil com VRaptor
Java Web Fácil com VRaptorJava Web Fácil com VRaptor
Java Web Fácil com VRaptor
Frederico Maia Arantes
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
Hugo Iuri
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
Romeu Mattos
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
Cleziel Franzoni da Costa
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
Romeu Mattos
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
Jefferson Mariano de Souza
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Rodrigo Branas
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
Cleiton Francisco
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?
Douglas Aguiar
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
Vinicius Quaiato
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
Wilson Mendes
 

Mais procurados (20)

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Apresentação sobre Drupal
Apresentação sobre DrupalApresentação sobre Drupal
Apresentação sobre Drupal
 
Introdução ao LiveOak
Introdução ao LiveOakIntrodução ao LiveOak
Introdução ao LiveOak
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Java Web Fácil com VRaptor
Java Web Fácil com VRaptorJava Web Fácil com VRaptor
Java Web Fácil com VRaptor
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 

Destaque

Taller talk - Site/blog 2.0
Taller talk - Site/blog 2.0Taller talk - Site/blog 2.0
Taller talk - Site/blog 2.0
Taller Negócio Digitais
 
Superando o GitFlow - DrupalCamp Campinas 2016
Superando o GitFlow - DrupalCamp Campinas 2016 Superando o GitFlow - DrupalCamp Campinas 2016
Superando o GitFlow - DrupalCamp Campinas 2016
Taller Negócio Digitais
 
A arte do começo- DrupalCamp Campinas 2016
A arte do começo-  DrupalCamp Campinas 2016A arte do começo-  DrupalCamp Campinas 2016
A arte do começo- DrupalCamp Campinas 2016
Taller Negócio Digitais
 
11 maneiras de compartilhar conhecimento - Agile Trends 2016
11 maneiras de compartilhar conhecimento - Agile Trends 201611 maneiras de compartilhar conhecimento - Agile Trends 2016
11 maneiras de compartilhar conhecimento - Agile Trends 2016
Taller Negócio Digitais
 
Núcleo de Criação - Agilidade Além da TI
Núcleo de Criação - Agilidade Além da TINúcleo de Criação - Agilidade Além da TI
Núcleo de Criação - Agilidade Além da TI
Taller Negócio Digitais
 
Case Campanha de Vacinação FIESC/SESI SC
Case Campanha de Vacinação FIESC/SESI SCCase Campanha de Vacinação FIESC/SESI SC
Case Campanha de Vacinação FIESC/SESI SC
Taller Negócio Digitais
 
A importância da Transparência na cultura ágil
A importância da Transparência na cultura ágilA importância da Transparência na cultura ágil
A importância da Transparência na cultura ágil
Taller Negócio Digitais
 
Trabalhando a cultura do feedback. Por onde começar?
Trabalhando a cultura do feedback. Por onde começar?Trabalhando a cultura do feedback. Por onde começar?
Trabalhando a cultura do feedback. Por onde começar?
Taller Negócio Digitais
 
Kanban no fluxo único de portfolio de projetos
Kanban no fluxo único de portfolio de projetosKanban no fluxo único de portfolio de projetos
Kanban no fluxo único de portfolio de projetos
Taller Negócio Digitais
 
A importância da transparência na cultura ágil - 2º Agile Floripa
A importância da transparência na cultura ágil - 2º Agile FloripaA importância da transparência na cultura ágil - 2º Agile Floripa
A importância da transparência na cultura ágil - 2º Agile Floripa
Taller Negócio Digitais
 
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
Taller Negócio Digitais
 
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiroImplementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
Taller Negócio Digitais
 
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
Taller Negócio Digitais
 
Lean Branding
Lean BrandingLean Branding

Destaque (14)

Taller talk - Site/blog 2.0
Taller talk - Site/blog 2.0Taller talk - Site/blog 2.0
Taller talk - Site/blog 2.0
 
Superando o GitFlow - DrupalCamp Campinas 2016
Superando o GitFlow - DrupalCamp Campinas 2016 Superando o GitFlow - DrupalCamp Campinas 2016
Superando o GitFlow - DrupalCamp Campinas 2016
 
A arte do começo- DrupalCamp Campinas 2016
A arte do começo-  DrupalCamp Campinas 2016A arte do começo-  DrupalCamp Campinas 2016
A arte do começo- DrupalCamp Campinas 2016
 
11 maneiras de compartilhar conhecimento - Agile Trends 2016
11 maneiras de compartilhar conhecimento - Agile Trends 201611 maneiras de compartilhar conhecimento - Agile Trends 2016
11 maneiras de compartilhar conhecimento - Agile Trends 2016
 
Núcleo de Criação - Agilidade Além da TI
Núcleo de Criação - Agilidade Além da TINúcleo de Criação - Agilidade Além da TI
Núcleo de Criação - Agilidade Além da TI
 
Case Campanha de Vacinação FIESC/SESI SC
Case Campanha de Vacinação FIESC/SESI SCCase Campanha de Vacinação FIESC/SESI SC
Case Campanha de Vacinação FIESC/SESI SC
 
A importância da Transparência na cultura ágil
A importância da Transparência na cultura ágilA importância da Transparência na cultura ágil
A importância da Transparência na cultura ágil
 
Trabalhando a cultura do feedback. Por onde começar?
Trabalhando a cultura do feedback. Por onde começar?Trabalhando a cultura do feedback. Por onde começar?
Trabalhando a cultura do feedback. Por onde começar?
 
Kanban no fluxo único de portfolio de projetos
Kanban no fluxo único de portfolio de projetosKanban no fluxo único de portfolio de projetos
Kanban no fluxo único de portfolio de projetos
 
A importância da transparência na cultura ágil - 2º Agile Floripa
A importância da transparência na cultura ágil - 2º Agile FloripaA importância da transparência na cultura ágil - 2º Agile Floripa
A importância da transparência na cultura ágil - 2º Agile Floripa
 
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
Kanban no Fluxo Unificado de Portfolio de Projetos - Agile Brazil 2016
 
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiroImplementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
Implementando o Desenvolvimento Lean de Software - Do conceito ao dinheiro
 
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
Kanban no Fluxo Único - sessão Show me your board, Agile Trends 2016
 
Lean Branding
Lean BrandingLean Branding
Lean Branding
 

Semelhante a Drupal 8 e ReactJS - DrupalCamp Campinas 2016

Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
Eric Gallardo
 
Arquitetura de sistemas web
Arquitetura de sistemas webArquitetura de sistemas web
Arquitetura de sistemas web
Opakus - Soluções Inteligentes
 
Lampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 PalestraLampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 Palestra
David O'Keefe
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com Python
Igor Sobreira
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
Pedro Sousa
 
Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2py
Relsi Maron
 
Joomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portaisJoomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portais
rafaelberlanda
 
Treinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVCTreinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVC
Michael Costa
 
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on AzureTDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
tdc-globalcode
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devops
Diego Pacheco
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
Rodrigo Urubatan
 
Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016
Huge
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
fabioginzel
 
Colóquio Drupal na Universidade do Minho
Colóquio Drupal na Universidade do MinhoColóquio Drupal na Universidade do Minho
Colóquio Drupal na Universidade do Minho
introfini
 
Java no Google App Engine - TDC2011
Java no Google App Engine - TDC2011Java no Google App Engine - TDC2011
Java no Google App Engine - TDC2011
Frederico Maia Arantes
 
Clean architecture frontend
Clean architecture frontendClean architecture frontend
Clean architecture frontend
Evelise Vazquez
 
Aula1
Aula1Aula1
Aula1
mentrixmax
 
Como DDD e Strategic Design estão nos ajudando a modernizar um Legado
Como DDD e Strategic Design estão nos ajudando a modernizar um LegadoComo DDD e Strategic Design estão nos ajudando a modernizar um Legado
Como DDD e Strategic Design estão nos ajudando a modernizar um Legado
Luiz Costa
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Rodrigo Cândido da Silva
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5
Lucas Augusto Carvalho
 

Semelhante a Drupal 8 e ReactJS - DrupalCamp Campinas 2016 (20)

Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
 
Arquitetura de sistemas web
Arquitetura de sistemas webArquitetura de sistemas web
Arquitetura de sistemas web
 
Lampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 PalestraLampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 Palestra
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com Python
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2py
 
Joomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portaisJoomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portais
 
Treinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVCTreinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVC
 
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on AzureTDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devops
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Colóquio Drupal na Universidade do Minho
Colóquio Drupal na Universidade do MinhoColóquio Drupal na Universidade do Minho
Colóquio Drupal na Universidade do Minho
 
Java no Google App Engine - TDC2011
Java no Google App Engine - TDC2011Java no Google App Engine - TDC2011
Java no Google App Engine - TDC2011
 
Clean architecture frontend
Clean architecture frontendClean architecture frontend
Clean architecture frontend
 
Aula1
Aula1Aula1
Aula1
 
Como DDD e Strategic Design estão nos ajudando a modernizar um Legado
Como DDD e Strategic Design estão nos ajudando a modernizar um LegadoComo DDD e Strategic Design estão nos ajudando a modernizar um Legado
Como DDD e Strategic Design estão nos ajudando a modernizar um Legado
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5
 

Mais de Taller Negócio Digitais

Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
Taller Negócio Digitais
 
Discovery kanban
Discovery kanbanDiscovery kanban
Discovery kanban
Taller Negócio Digitais
 
Taller Negócios Digitais
Taller Negócios DigitaisTaller Negócios Digitais
Taller Negócios Digitais
Taller Negócio Digitais
 
De um sistema legado para micro serviços com GraphQL
De um sistema legado para micro serviços com GraphQLDe um sistema legado para micro serviços com GraphQL
De um sistema legado para micro serviços com GraphQL
Taller Negócio Digitais
 
Next.js with drupal, the good parts
Next.js with drupal, the good partsNext.js with drupal, the good parts
Next.js with drupal, the good parts
Taller Negócio Digitais
 
Gestão Ágil com Fluxo Unificado
Gestão Ágil com Fluxo UnificadoGestão Ágil com Fluxo Unificado
Gestão Ágil com Fluxo Unificado
Taller Negócio Digitais
 
Alinhando Discovery com Delivery usando Upstream Kanban
Alinhando Discovery com Delivery usando Upstream KanbanAlinhando Discovery com Delivery usando Upstream Kanban
Alinhando Discovery com Delivery usando Upstream Kanban
Taller Negócio Digitais
 
Lições Aprendidas com Fluxo Unificado
Lições Aprendidas com Fluxo UnificadoLições Aprendidas com Fluxo Unificado
Lições Aprendidas com Fluxo Unificado
Taller Negócio Digitais
 
Como a liderança descentralizada tornou a Taller mais efetiva
Como a liderança descentralizada tornou a Taller mais efetivaComo a liderança descentralizada tornou a Taller mais efetiva
Como a liderança descentralizada tornou a Taller mais efetiva
Taller Negócio Digitais
 
Métricas no Fluxo Unificado
Métricas no Fluxo UnificadoMétricas no Fluxo Unificado
Métricas no Fluxo Unificado
Taller Negócio Digitais
 
Práticas e ferramentas de feedback: potencializando a cultura da confiança
Práticas e ferramentas de feedback: potencializando a cultura da confiançaPráticas e ferramentas de feedback: potencializando a cultura da confiança
Práticas e ferramentas de feedback: potencializando a cultura da confiança
Taller Negócio Digitais
 
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
Taller Negócio Digitais
 
Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
Vacinando mais de 200 mil pessoas com ReactJS e GraphQLVacinando mais de 200 mil pessoas com ReactJS e GraphQL
Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
Taller Negócio Digitais
 
Taller – Treinamentos e consultorias
Taller – Treinamentos e consultoriasTaller – Treinamentos e consultorias
Taller – Treinamentos e consultorias
Taller Negócio Digitais
 
Taller - Ateliê de desenvolvimento de software
Taller - Ateliê de desenvolvimento de softwareTaller - Ateliê de desenvolvimento de software
Taller - Ateliê de desenvolvimento de software
Taller Negócio Digitais
 
Introdução ao Fluxo Unificado - TDC Florianópolis 2017
Introdução ao Fluxo Unificado - TDC Florianópolis 2017Introdução ao Fluxo Unificado - TDC Florianópolis 2017
Introdução ao Fluxo Unificado - TDC Florianópolis 2017
Taller Negócio Digitais
 
Javascript Funcional - TDC Florianópolis 2017
Javascript Funcional - TDC Florianópolis 2017Javascript Funcional - TDC Florianópolis 2017
Javascript Funcional - TDC Florianópolis 2017
Taller Negócio Digitais
 
11 maneiras de compartilhar conhecimento - TDC Florianópolis 2017
11 maneiras de compartilhar conhecimento  - TDC Florianópolis 201711 maneiras de compartilhar conhecimento  - TDC Florianópolis 2017
11 maneiras de compartilhar conhecimento - TDC Florianópolis 2017
Taller Negócio Digitais
 

Mais de Taller Negócio Digitais (18)

Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
Indo além do técnico para desenvolver sistemas que evoluem na velocidade do...
 
Discovery kanban
Discovery kanbanDiscovery kanban
Discovery kanban
 
Taller Negócios Digitais
Taller Negócios DigitaisTaller Negócios Digitais
Taller Negócios Digitais
 
De um sistema legado para micro serviços com GraphQL
De um sistema legado para micro serviços com GraphQLDe um sistema legado para micro serviços com GraphQL
De um sistema legado para micro serviços com GraphQL
 
Next.js with drupal, the good parts
Next.js with drupal, the good partsNext.js with drupal, the good parts
Next.js with drupal, the good parts
 
Gestão Ágil com Fluxo Unificado
Gestão Ágil com Fluxo UnificadoGestão Ágil com Fluxo Unificado
Gestão Ágil com Fluxo Unificado
 
Alinhando Discovery com Delivery usando Upstream Kanban
Alinhando Discovery com Delivery usando Upstream KanbanAlinhando Discovery com Delivery usando Upstream Kanban
Alinhando Discovery com Delivery usando Upstream Kanban
 
Lições Aprendidas com Fluxo Unificado
Lições Aprendidas com Fluxo UnificadoLições Aprendidas com Fluxo Unificado
Lições Aprendidas com Fluxo Unificado
 
Como a liderança descentralizada tornou a Taller mais efetiva
Como a liderança descentralizada tornou a Taller mais efetivaComo a liderança descentralizada tornou a Taller mais efetiva
Como a liderança descentralizada tornou a Taller mais efetiva
 
Métricas no Fluxo Unificado
Métricas no Fluxo UnificadoMétricas no Fluxo Unificado
Métricas no Fluxo Unificado
 
Práticas e ferramentas de feedback: potencializando a cultura da confiança
Práticas e ferramentas de feedback: potencializando a cultura da confiançaPráticas e ferramentas de feedback: potencializando a cultura da confiança
Práticas e ferramentas de feedback: potencializando a cultura da confiança
 
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
Como preparar seu time para receber feedback - Scrum Gathering Rio 2017
 
Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
Vacinando mais de 200 mil pessoas com ReactJS e GraphQLVacinando mais de 200 mil pessoas com ReactJS e GraphQL
Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
 
Taller – Treinamentos e consultorias
Taller – Treinamentos e consultoriasTaller – Treinamentos e consultorias
Taller – Treinamentos e consultorias
 
Taller - Ateliê de desenvolvimento de software
Taller - Ateliê de desenvolvimento de softwareTaller - Ateliê de desenvolvimento de software
Taller - Ateliê de desenvolvimento de software
 
Introdução ao Fluxo Unificado - TDC Florianópolis 2017
Introdução ao Fluxo Unificado - TDC Florianópolis 2017Introdução ao Fluxo Unificado - TDC Florianópolis 2017
Introdução ao Fluxo Unificado - TDC Florianópolis 2017
 
Javascript Funcional - TDC Florianópolis 2017
Javascript Funcional - TDC Florianópolis 2017Javascript Funcional - TDC Florianópolis 2017
Javascript Funcional - TDC Florianópolis 2017
 
11 maneiras de compartilhar conhecimento - TDC Florianópolis 2017
11 maneiras de compartilhar conhecimento  - TDC Florianópolis 201711 maneiras de compartilhar conhecimento  - TDC Florianópolis 2017
11 maneiras de compartilhar conhecimento - TDC Florianópolis 2017
 

Drupal 8 e ReactJS - DrupalCamp Campinas 2016

Notas do Editor

  1. - Jest e Enzyme para os testes: - Jest feito pelo Facebook - Facilita o teste unitário dos componentes. (exemplo de teste) http://codeheaven.io/testing-react-components-with-enzyme/ - Mock everything!!! - Testes assíncronos. - Utiliza Jasmine que é bem conhecido pela comunidade. - Pode ser utilizado com vários expects como chai ou mocha. - Enzyme feito pelo AirBnB - Exemplo de código antes e depois. http://codeheaven.io/testing-react-components-with-enzyme/ - Conceito de shallow que permite testar o primeiro nível do componente. - Renderização do DOM sem precisar de browser permitindo a simulação de eventos como click ou change. - Seletores para procurar elementos/componentes dentro de um componente. - API super fácil por exemplo para acessar propriedades e o estado do componente.
  2. - Jest e Enzyme para os testes: - Jest feito pelo Facebook - Facilita o teste unitário dos componentes. (exemplo de teste) http://codeheaven.io/testing-react-components-with-enzyme/ - Mock everything!!! - Testes assíncronos. - Utiliza Jasmine que é bem conhecido pela comunidade. - Pode ser utilizado com vários expects como chai ou mocha. - Enzyme feito pelo AirBnB - Exemplo de código antes e depois. http://codeheaven.io/testing-react-components-with-enzyme/ - Conceito de shallow que permite testar o primeiro nível do componente. - Renderização do DOM sem precisar de browser permitindo a simulação de eventos como click ou change. - Seletores para procurar elementos/componentes dentro de um componente. - API super fácil por exemplo para acessar propriedades e o estado do componente.
  3. - React Router como sistema de rotas da WebApp: - Sistema de roteamento reativo e de fácil implementação. - Bem conhecido na comunidade de React, e escolhido como way to go! - Mostrar código de exemplo. - Cada mudança de rota é uma mudança no estado do Redux. - Muda a url sem realizar refresh graças a compatibilidade com html5.
  4. - React Router como sistema de rotas da WebApp: - Sistema de roteamento reativo e de fácil implementação. - Bem conhecido na comunidade de React, e escolhido como way to go! - Mostrar código de exemplo. - Cada mudança de rota é uma mudança no estado do Redux. - Muda a url sem realizar refresh graças a compatibilidade com html5.
  5. - CSS Modules com PostCSS: - Possibilita interoperabilidade dos componentes, parecido ao BEM. - Extend vs. Compose. - Estilo local por default, não mais regras globais! - Funciona muito bem com Webpack e React. - CSS que escala. - Syntaxe parecida ao Sass.
  6. - Webpack como bundler. (exemplo do arquivo de config) - Diferença entre Browserify. - Remove a necessidade de utilizar Gulp ou Grunt. - Remove a necessidade de usar Bower, usamos npm para tudo. - Babel para usar ES6. (exemplo de código) - Podemos usar features que possibilitam uma fácil programação funcional. - Async / Await. - Decorators. - Reduz código verboso - Reduz a necessidade de se preocupar com Polyfills como a API de Promesas. - Quase todo tutorial de React usa Babel em vez de TypeScript.
  7. - Webpack como bundler. (exemplo do arquivo de config) - Diferença entre Browserify. - Remove a necessidade de utilizar Gulp ou Grunt. - Remove a necessidade de usar Bower, usamos npm para tudo. - Babel para usar ES6. (exemplo de código) - Podemos usar features que possibilitam uma fácil programação funcional. - Async / Await. - Decorators. - Reduz código verboso - Reduz a necessidade de se preocupar com Polyfills como a API de Promesas. - Quase todo tutorial de React usa Babel em vez de TypeScript.