Drupal 8 e ReactJS - DrupalCamp Campinas 2016

466 visualizações

Publicada em

Apresentação realizada pelos Sebastian Ferrari (sebas5384) na DrupalCamp 2016 em Campinas/SP.

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Drupal 8 e ReactJS - DrupalCamp Campinas 2016

  1. 1. Desacoplando D8 e React DrupalCamp Campinas 2016 Sebastian Ferrari (a.k.a. Sebas) sebas@taller.net.br
  2. 2. Desacoplar Drupal ?
  3. 3. Diminuir a interdependência entre as camadas ou entidades de um sistema
  4. 4. Aumentar interoperabilidade
  5. 5. Contrato de comunicação transparente entre diferentes partes do sistema
  6. 6. GraphQL
  7. 7. Front-end Back-end
  8. 8. Por que diminuir o acoplamento?
  9. 9. Regras de negócio de como acessar as informações misturadas com apresentação
  10. 10. Overload de complexidade
  11. 11. A soma das partes é maior do que o resultado final. Entropia
  12. 12. Alto risco e esforço perante as mudanças
  13. 13. Alto risco e esforço perante as mudanças
  14. 14. O que é ágil ?
  15. 15. “It’s not what happens that counts… it’s how you react.
  16. 16. Bruce Lee
  17. 17. Front-end gerado pelo back-end
  18. 18. Alto conhecimento do todo para realizar uma mudança
  19. 19. Overload cognitivo para entender
  20. 20. Side-effects everywhere
  21. 21. De onde vem esse campo?
  22. 22. Quem está trocando o texto desse botão?
  23. 23. Porque não está funcionando?
  24. 24. Porque está funcionando?
  25. 25. De onde vem esse estilo/css?
  26. 26. Como troco a mensagem de validação do campo?
  27. 27. Software monolítico
  28. 28. 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.
  29. 29. Não tem fórmula mágica
  30. 30. Maneira => parcial
  31. 31. Por que ?
  32. 32. Quase separação completa
  33. 33. Desacoplar por completo aumenta o risco
  34. 34. Queremos inovar com menor risco
  35. 35. Podemos usar o Drupal onde melhor se encaixa
  36. 36. ● Sistema de rotas. ● Login / Sessão / Usuários. ● Sistema de permissões. ● RESTful API. ● Gerenciador de conteúdo.
  37. 37. Time de devs preparados para o desafio
  38. 38. Drupaleiros que adoram Javascript JS
  39. 39. Não precisamos de server rendering
  40. 40. Como estamos fazendo ?
  41. 41. Tratamos rotas da Web App como exceção utilizando um prefixo ou subdomínio
  42. 42. mymodule_core.routes.yml
  43. 43. /app => Home /app/* => Páginas filhas
  44. 44. Módulos contrib podem criar rotas, regras de acesso, assets ou arquivos privados
  45. 45. Login no admin do Drupal
  46. 46. Páginas de 404 ou 403 são tratadas pelo Drupal
  47. 47. Rotas do Drupal se comportam diferente do Symfony
  48. 48. Symfony
  49. 49. Drupal
  50. 50. Drupal mymodule.services.yml
  51. 51. http://bit.ly/292xoAu
  52. 52. Web App = Theme / Tema
  53. 53. /app/* = webapp.theme
  54. 54. Serviço: theme_negotiator
  55. 55. Login e sessão do usuário é responsabilidade do Drupal usando Cookie
  56. 56. Drupal 8 tem tudo em REST fora da caixa certo?
  57. 57. Login, não.
  58. 58. Tentamos usar o formulário de login mas carece de respostas semânticas de HTTP
  59. 59. Redirects depois de realizar o login com sucesso para /user
  60. 60. Achamos um issue com patch! drupal.org/node/2403307
  61. 61. Stack Front-end Back-end
  62. 62. React
  63. 63. V do MVC
  64. 64. Por que React ?
  65. 65. Programação funcional e reativa λ
  66. 66. Virtual DOM <a href=”#”>link</a>
  67. 67. safaribooksonline.com
  68. 68. Diminui: repaint & reflows
  69. 69. Simples e declarativo que aumenta o entendimento do código
  70. 70. Familiar vs. Legibilidade pessoas novas no time podem entender o que o código faz
  71. 71. Renderização no servidor melhora SEO e UX
  72. 72. Componente representa uma função que recebe argumentos e retorna o virtual dom render()
  73. 73. State less components
  74. 74. Ecossistema induz programação funcional
  75. 75. Comunidade que cresce rapidamente e altamente inovadora
  76. 76. Eventos sintéticos implementando Event Delegation
  77. 77. React Native ElectronApp
  78. 78. + Enzyme
  79. 79. github.com/choko-org/redux-boot
  80. 80. CSS Modules
  81. 81. Webpack +
  82. 82. ES6 com plus!! /webapp/dist/bundle.js
  83. 83. Não é a melhor solução para todos os problemas !
  84. 84. Work in Progress
  85. 85. 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.
  86. 86. Trabalho em equipe!
  87. 87. Perguntas ? Sebastian Ferrari sebas5384

×