Front End Refactored – Componentes com Vue

Quanto mais aprendo sobre codificação, mais me sinto inspirado sobre o quão criativas e revolucionárias são essas idéias. Da legibilidade do Ruby a um mundo de hashes em Javascript, essas ideias continuam renovando a maneira como pensamos e desenvolvemos o mundo da tecnologia o tempo todo.

“Sem lógica / codificação no front end”

Esse era um estereótipo comum que percebi ser comum entre os futuros desenvolvedores da Makers Academy, ao consultá-los sobre suas perspectivas e interesses profissionais.

O Front End recebe uma má reputação por ser “desinteressante” por causa de como as pessoas acham que há muito pouca codificação

Em nossa empresa, achamos muito difícil encontrar um desenvolvedor de front end de nível médio e sênior para se juntar à nossa equipe. Isso me faz pensar se essa atitude é algo que contribui para que os desenvolvedores não queiram se comprometer com o front end.

Mas recentemente o front-end foi revolucionado com várias ideias, como grades de CSS, a padronização do Bootstrap e o uso de componentes…

O antes

Aqui mostramos como as páginas são compostas normalmente.

Usar o modo de ferramentas de desenvolvimento no Chrome (Apple + Alt + I e depois na guia Elementos) mostra o código HTML da página

Colocamos todos os elementos da página entre as tags do corpo do código HTML que é enviado para a página.

Isso parece uma maneira totalmente boa de fazer algo, mas a questão é: e se tivéssemos muitas páginas e quiséssemos que o cabeçalho e o rodapé estivessem em todos eles?

Nós estaríamos copiando e colando muito esse código em cada uma de nossas páginas, o que seria uma maneira bastante ineficiente de fazer as coisas.

A mentalidade Refactor (em Vue.js)

Sempre que DRY (não se repetir) aparece no código, isso significa uma coisa … podemos refatorá-lo em algo reutilizável, a que se refere!

Existem algumas sugestões para isso, como o uso de parciais, mas o mais popular nos últimos anos tem sido usar o Components, popularizado pelos desenvolvedores do Facebook usando o React.js.

Vamos ver um exemplo usando o Vue.js, que é semelhante ao React.js. Eu gosto de Vue.js porque é mais legível e mais claro que React imo.

Nossos componentes são armazenados em arquivos vue e seu arquivo vue pai refere-se a ele, geralmente denominado App.vue. Cada arquivo vue sempre tem a mesma estrutura, onde é dividido em três partes;

 <template> 
 // HTML do componente vai aqui 
 </ template>
 <script> 
 // Code vai aqui 
 </ script>
 <style> 
 // CSS Styling vai aqui 
 </ style>

Então, vamos dividir nosso código e colocá-los em um arquivo vue separado em uma pasta chamada componentes. Vamos pegar o código do rodapé e colocar isso no Header.vue. O HTML vai dentro das tags de template, e nós criamos uma variável no hash de dados que contém o texto.

 // Header.vue
 <template> 
 <header> 
 <p> {{headerText}} </ p> 
 </ header> 
 </ template>
 <script> 
 exportar padrão { 
 data: { 
 headerText: "Este é o cabeçalho", 
 } 
 }
 </ script>
 <style> 
 </ style>

Em nosso arquivo App.vue original, nos referimos àquele recém criado componente de cabeçalho que acabamos de criar.

 // App.vue
 <template> 
 <div class = "container"> 
 <br> 
 <app-header> </ app-header> 
 <hr> 
 <h1> O Artigo </ h1> 
 <article class = "article"> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore et dolore magna aliqua. O uso de um instrumento pode ajudar a reduzir os efeitos colaterais do trabalho. Duis auteur irure pain in reprehenderit in voluptate velit this cillum dolore in fugid nulla pariatur. Excepteur sint occecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 </ article> 
 <hr> 
 <footer> 
 <p> Este é o rodapé </ p> 
 </ footer> 
 </ div> 
 </ template>
 <script> 
 import appHeader de './components/Header.vue'
 exportar padrão { 
 components: { 
 'app-header': appHeader, 
 } 
 };
 </ script>
 <style> 
 </ style>

No script, nós importamos esse componente usando o hash do componente, então usamos esse nome em sua própria tag html personalizada, nesse caso chamamos de <app-header>. Podemos usar o nome ‘cabeçalho’, mas como isso é um nome de tag que existe, queremos evitar esses nomes para evitar qualquer código conflitante. É assim que o Vue se refere aos seus componentes, que é diferente do React.js.

Então, vamos fazer o mesmo com a seção Article and Footer.

 // Article.vue
 <template> 
 <div> 
 <h1> O Artigo </ h1> 
 <article> {{articleText}} </ article> 
 </ div> 
 </ template>
 <script> 
 exportar padrão { 
 data () { 
 Retorna { 
 articleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore et dolore magna aliqua. O uso de um método minimiza a eficácia do exercício ullamco laboris nisi ut alipip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. " 
 } 
 } 
 } 
 </ script>
 <style> 
 </ style>

Agora o rodapé…

 <template> 
 <footer> {{footerText}} </ footer> 
 </ template>
 <script> 
 exportar padrão { 
 data () { 
 Retorna { 
 footerText: "Este é o rodapé", 
 } 
 } 
 } 
 </ script>
 <style lang = "css"> 
 </ style>

O App.vue final;

 <template> 
 <div class = "container"> 
 <br> 
 <app-header> </ app-header> 
 <hr> 
 <app-article> </ app-article> 
 <hr> 
 <app-footer> </ app-footer> 
 </ div> 
 </ template>
 <script> 
 import appHeader de './components/Header.vue' 
 import appArticle de './components/Article.vue' 
 import appFooter de './components/Footer.vue'
 exportar padrão { 
 components: { 
 'app-header': appHeader, 
 'app-article': appArticle, 
 'app-footer': appFooter, 
 } 
 };
 </ script>
 <style> 
 </ style>

Depois de todo esse trabalho, é exatamente o mesmo visual. Mas agora temos componentes reutilizáveis! Isso significa que qualquer outra página que desejamos criar, podemos importar nesses componentes e usá-la.

E o que é ótimo é que é muito fácil saber em qual componente foi importado, e onde está a página olhando apenas a seção de modelo.

Front End revolucionou

Componentes são super flexíveis e reutilizáveis ??que são ótimos para sites enormes. Mesmo elementos como botões e formulários podem ser componentes e, portanto, reutilizáveis ??por toda parte.

O estilo de cada componente também pode ser incluído nele, o que é ótimo para a consistência da marca do site.

Outra razão pela qual os componentes são ótimos é que a lógica das funções também pode ser adicionada a cada componente. Isso realmente mudou a maneira como os sites foram criados, já que a lógica normalmente era colocada em um lugar completamente separado do HTML. Agora, ele é adicionado ao componente, o que significa que a lógica está vinculada a ele e pode ser mais fácil de encontrar.

Isso significa que grande parte da lógica agora está misturada com o front end, permitindo uma experiência de pilha mais completa para os desenvolvedores front-end e, ao mesmo tempo, colocando menos ênfase no back-end que contém apenas o código relevante para o que está tentando fazer.

Parece que esta será a batalha do framework JavaScript baseado em componentes! Quem ganhará?

Espero que todos tenham um grande fim de semana do feriado do dia de maio, cya da próxima vez!