Techniques for making and scaling micro Front-ends Apps

44b9f26e2590694901195e0d038c301d?s=47 Igor Halfeld
September 11, 2019

Techniques for making and scaling micro Front-ends Apps

44b9f26e2590694901195e0d038c301d?s=128

Igor Halfeld

September 11, 2019
Tweet

Transcript

  1. "Técnicas pra fazer e escalar Micro Front-ends" Se você acha

    que só tem coisa boa, Você achou errado
  2. Alguém tem ideia de porquê o título tá entre aspas?

  3. Não existe ninguém que saiba ainda o que esta fazendo

    *eu incluso
  4. É um assunto muito novo. É como ter 15 anos

    com 20 anos de experiência *nada foi estressado o suficiente pra saber se realmente funciona
  5. Então o que eu vim fazer aqui?

  6. Pra vermos como é esse mundo e como começar a

    fazer *mesmo que nenhum cenário tenha sido super testado
  7. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

  8. Escalar Front-end… *escalar e front-end parecem não combinar

  9. Estamos em um nível de centenas de componentes além de

    regras de state *e ainda precisamos saber separar bem eles
  10. Melhorar deploys Paralelizar o desenvolvimento com mais times Aumentar tolerância

    a falhas Evoluir o código legado
  11. Vamos olhar pra a aplicação como um todo *ver a

    evolução
  12. None
  13. None
  14. None
  15. Vamos trazer essa realidade do back-end pro front-end *afinal Event

    Sourcing e CQRS viraram o Redux
  16. Por que todo mundo fala de microservices pro Back-end?

  17. É o caminho pra escalar! Mas precisamos ter em mente

    umas coisas… *não se encaixa em toda app
  18. Desacoplados Pequenos Tolerante a falhas Micro service wordpress (faz tudo)

  19. No front-end são praticamente as mesmas normais

  20. Desacoplados Pequenos Tolerante a falhas Micro service wordpress (faz tudo)

    e no bundle size (JS puro ❤)
  21. Legal fera, mas como faz?

  22. Nesse tempo que tenho aqui vou mostrar 3 formas de

    fazer
  23. 1. Usando NGIX 2. Usando o kubernetes 3. Usando <iframe/>

    (*demo time)
  24. Front-end e DevOps precisam andar bem no amor ❤

  25. Server-Side template composition 1. Usando NGIX

  26. None
  27. Nginx Conf

  28. Per page composition 1. Usando NGIX

  29. None
  30. Page/Fragment composition 2. Usando Kubernetes

  31. None
  32. Single service Simple fanout Name based virtual hosting 1 IP

    pra vários Services 1 IP pra um Services 1 IP pra vários Hostnames
  33. None
  34. None
  35. Fragment composition 3. Usando <iframe />

  36. Por que iframe é um problema? *comunicação

  37. None
  38. None
  39. DEMO

  40. Conclusão &

  41. Obrigado! igorluiz.me/talks - @IgorHalfeld