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)

Juliana Negreiros

September 28, 2019
Tweet

More Decks by Juliana Negreiros

Other Decks in Technology

Transcript

  1. 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 }
  2. Sound em React export default ({ soundNumber }) => {

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

    + soundNumber + '.mp3'`"></audio> ` }) class SoundComponent { @Input() soundNumber }
  4. 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>