Como modularizar seu front-end sem depender de um framework

Rancho Dev 2019 (28/09/2019)

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
13. 13 Componentização
14. Pensando em componentes
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!