Desacoplando D8 e React
•Descargar como PPTX, PDF•
1 recomendación•755 vistas
Apresentação realizada pelos Sebastian Ferrari (sebas5384) na DrupalCamp 2016 em Campinas/SP.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (14)
Similar a Desacoplando D8 e React
Similar a Desacoplando D8 e React (20)
Más de Taller Negócio Digitais
Más de Taller Negócio Digitais (18)
Desacoplando D8 e React
- 1. Desacoplando D8 e React DrupalCamp Campinas 2016 Sebastian Ferrari (a.k.a. Sebas) sebas@taller.net.br
- 3. Diminuir a interdependência entre as camadas ou entidades de um sistema
- 5. Contrato de comunicação transparente entre diferentes partes do sistema
- 6. GraphQL
- 9. Regras de negócio de como acessar as informações misturadas com apresentação
- 11. A soma das partes é maior do que o resultado final. Entropia
- 12. Alto risco e esforço perante as mudanças
- 14. Alto risco e esforço perante as mudanças
- 17. O que é ágil ?
- 18. “It’s not what happens that counts… it’s how you react.
- 19. Bruce Lee
- 21. Alto conhecimento do todo para realizar uma mudança
- 24. De onde vem esse campo?
- 25. Quem está trocando o texto desse botão?
- 28. De onde vem esse estilo/css?
- 29. Como troco a mensagem de validação do campo?
- 32. 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.
- 35. Por que ?
- 37. Desacoplar por completo aumenta o risco
- 38. Queremos inovar com menor risco
- 39. Podemos usar o Drupal onde melhor se encaixa
- 40. ● Sistema de rotas. ● Login / Sessão / Usuários. ● Sistema de permissões. ● RESTful API. ● Gerenciador de conteúdo.
- 41. Time de devs preparados para o desafio
- 43. Não precisamos de server rendering
- 45. Tratamos rotas da Web App como exceção utilizando um prefixo ou subdomínio
- 47. /app => Home /app/* => Páginas filhas
- 48. Módulos contrib podem criar rotas, regras de acesso, assets ou arquivos privados
- 49. Login no admin do Drupal
- 50. Páginas de 404 ou 403 são tratadas pelo Drupal
- 51. Rotas do Drupal se comportam diferente do Symfony
- 52. Symfony
- 53. Drupal
- 56. Web App = Theme / Tema
- 60. Login e sessão do usuário é responsabilidade do Drupal usando Cookie
- 61. Drupal 8 tem tudo em REST fora da caixa certo?
- 62. Login, não.
- 63. Tentamos usar o formulário de login mas carece de respostas semânticas de HTTP
- 64. Redirects depois de realizar o login com sucesso para /user
- 65. Achamos um issue com patch! drupal.org/node/2403307
- 68. React
- 69. V do MVC
- 70. Por que React ?
- 76. Simples e declarativo que aumenta o entendimento do código
- 77. Familiar vs. Legibilidade pessoas novas no time podem entender o que o código faz
- 78. Renderização no servidor melhora SEO e UX
- 79. Componente representa uma função que recebe argumentos e retorna o virtual dom render()
- 83. Comunidade que cresce rapidamente e altamente inovadora
- 86. + Enzyme
- 95. CSS Modules
- 97. Webpack +
- 99. Não é a melhor solução para todos os problemas !
- 100. Work in Progress
- 101. 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.
- 102. Trabalho em equipe!
Notas del editor
- - 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.
- - 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.
- - 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.
- - 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.
- - 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.
- - 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.
- - 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.