Drupal 8 e ReactJS - DrupalCamp Campinas 2016

457 visualizações

Publicada em

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

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
457
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • - 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.
  • 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

    ×