Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como modularizar seu front-end sem depender de um framework

Como modularizar seu front-end sem depender de um framework

Rancho Dev 2019 (28/09/2019)

3e4b321cfe49136ead7cbfcb5d45a8f0?s=128

Juliana Negreiros

September 28, 2019
Tweet

More Decks by Juliana Negreiros

Other Decks in Technology

Transcript

  1. Como modularizar seu front-end sem depender de um framework

  2. Juliana Negreiros @juunegreiros Alura Rails Girls Sorocaba SorocabaJS

  3. Elaine Mattos Quinto Github @elainemattos lastfm/tt @elainemattoss

  4. Motivações

  5. VanillaJS <3

  6. Fundamento

  7. Pensar em componentes

  8. Pensar em módulos

  9. O que vamos fazer?

  10. Cores e música com o Simon

  11. None
  12. None
  13. 13 Componentização

  14. Pensando em componentes

  15. None
  16. None
  17. None
  18. None
  19. Componentização Independente Fácil integração Reutilização

  20. Mãos na massa

  21. Setup inicial Webpack Babel

  22. Modularização

  23. Frameworks

  24. React Facebook Grandes empresas usando Lib

  25. Angular Google Grandes empresas usando Legado

  26. Vue Evan You Popularizando++

  27. Comparações

  28. Componente

  29. Sound em Vanilla export default soundNumber => { const Sound

    = document.createElement('audio') Sound.setAttribute('data-sound', soundNumber) Sound.innerHTML = `<source src='https://s3.amazonaws.com/freecodecamp/simonSound${soundNum ber}.mp3'></source>` return Sound }
  30. Sound em React export default ({ soundNumber }) => {

    const url = `https://s3.amazonaws.com/freecodecamp/simonSound${soundNumber}.mp3` return ( <audio> <source src={url} ></source> </audio> ) }
  31. Sound em Angular @Component({ selector: 'sound', template: ` <audio [src]="'https://s3.amazonaws.com/freecodecamp/simonSound'

    + soundNumber + '.mp3'`"></audio> ` }) class SoundComponent { @Input() soundNumber }
  32. Sound em Vue <template> <audio :src={path}></audio> </template> <script> export default

    { name: 'sound', props: { soundNumber: { type: Number } }, data() { return { path: `https://s3.amazonaws.com/freecodecamp/simonSound${props.soundNumber}.mp3` } } } </script>
  33. Gerenciamento de estado

  34. Handler de eventos

  35. “ Conclusão 35

  36. Thanks!