Front End Refactored – Componentes con Vue

Cuanto más aprendo sobre la codificación, más inspirado me pongo acerca de cuán creativas y revolucionarias son algunas de estas ideas. Desde la legibilidad de Ruby hasta un mundo de hashes en Javascript, estas ideas continúan renovando la forma en que pensamos y evolucionamos el mundo de la tecnología todo el tiempo.

"Sin lógica / codificación en el frente de batalla"

Este era un estereotipo común que noté que era común entre los futuros desarrolladores de Makers Academy, al consultarlos sobre sus perspectivas de trabajo e intereses.

Front End tiene una mala reputación por ser "poco interesante" debido a cómo la gente piensa que hay muy poca codificación

En nuestra compañía, nos ha resultado muy difícil encontrar un desarrollador de nivel medio y senior para unirse a nuestro equipo. Me hace pensar si esta actitud es algo que contribuye a que los desarrolladores no quieran comprometerse al frente.

Pero recientemente la parte delantera se ha revolucionado con múltiples ideas como las cuadrículas de CSS, la estandarización de Bootstrap y el uso de componentes …

El antes

Aquí mostramos cómo se componen las páginas de forma típica.

Al usar el modo de herramientas de desarrollo en Chrome (Apple + Alt + I y luego ir a la pestaña Elementos) se muestra el código HTML de la página

Ponemos todos los elementos de la página entre las etiquetas corporales del código HTML que se envía a la página.

Esto parece una forma totalmente buena de hacer las cosas, pero la pregunta es, ¿qué pasaría si tuviéramos muchas páginas y quisiéramos que el encabezado y el pie de página estuvieran en todas ellas?

Copiaremos y pegaremos mucho ese código en cada una de nuestras páginas, lo que sería una manera bastante ineficaz de hacer las cosas.

The Refactor Mindset (In Vue.js)

Cada vez que aparece DRY (No repetir) en el código, significa una cosa … podemos refactorizarlo en algo reutilizable, ¡a eso se hace referencia!

Hay algunas sugerencias para esto, como el uso de parciales, pero el más popular en los últimos años ha sido el uso de Componentes, popularizados por los desarrolladores de Facebook que usan React.js.

Veamos un ejemplo usando Vue.js, que es similar a React.js. Me gusta Vue.js porque es más legible y más claro que React imo.

Nuestros componentes se almacenan en archivos vue, y su archivo padre vue se refiere a él, generalmente llamado App.vue. Cada archivo vue siempre tiene la misma estructura donde se divide en tres partes;

 <plantilla> 
// El HTML del componente va aquí
</ template>
 <script> 
// El código va aquí
</ script>
 <estilo> 
// CSS Styling va aquí
</ style>

Así que vamos a dividir nuestro código y ponerlos en un archivo vue separado en una carpeta llamada componentes. Vamos a sacar el código de pie de página y ponerlo en Header.vue. El HTML va dentro de las etiquetas de plantilla, y creamos una variable en el hash de datos que contiene el texto.

 // Header.vue 
 <plantilla> 
<encabezado>
<p> {{headerText}} </ p>
</ header>
</ template>
 <script> 
exportación predeterminada {
datos: {
headerText: "Este es el encabezado",
}
}
 </ script> 
 <estilo> 
</ style>

En nuestro archivo App.vue original, nos referimos a ese componente de encabezado recién creado que acabamos de crear.

 // App.vue 
 <plantilla> 
<div class = "contenedor">
<br>
<app-header> </ app-header>
<hr>
<h1> El artículo </ h1>
<article class = "article">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ article>
<hr>
<pie de página>
<p> Este es el pie de página </ p>
</ footer>
</ div>
</ template>
 <script> 
importar appHeader de './components/Header.vue'
 exportación predeterminada { 
componentes: {
'app-header': appHeader,
},
};
 </ script> 
 <estilo> 
</ style>

En el script, importamos ese componente usando el hash del componente, luego usamos ese nombre en su propia etiqueta html, en este caso lo llamamos <app-header>. Podemos usar el nombre 'encabezado' pero como ya existe un nombre de etiqueta, queremos evitar estos nombres para evitar cualquier código conflictivo. Así es como Vue se refiere a sus componentes, que es diferente de React.js.

Así que hagamos lo mismo con la sección Artículo y Pie de página.

 // Article.vue 
 <plantilla> 
<div>
<h1> El artículo </ h1>
<artículo> {{articleText}} </ article>
</ div>
</ template>
 <script> 
exportación predeterminada {
data () {
regreso {
articleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore y dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ".
}
}
}
</ script>
 <estilo> 
</ style>

Ahora el pie de página …

 <plantilla> 
<footer> {{footerText}} </ footer>
</ template>
 <script> 
exportación predeterminada {
data () {
regreso {
footerText: "Este es el pie de página",
}
}
}
</ script>
 <style lang = "css"> 
</ style>

La App.vue final;

 <plantilla> 
<div class = "contenedor">
<br>
<app-header> </ app-header>
<hr>
<app-article> </ app-article>
<hr>
<app-footer> </ app-footer>
</ div>
</ template>
 <script> 
importar appHeader de './components/Header.vue'
import appArticle from './components/Article.vue'
import appFooter de './components/Footer.vue'
 exportación predeterminada { 
componentes: {
'app-header': appHeader,
'app-article': appArticle,
'app-footer': appFooter,
},
};
 </ script> 
 <estilo> 
</ style>

Después de todo este trabajo, es el mismo aspecto exactamente. ¡Pero ahora tenemos componentes reutilizables! Esto significa que cualquier otra página que deseemos crear, podemos importar en esos componentes y usarla.

Y lo bueno es que es muy fácil decir en qué componente se ha importado, y en qué parte de la página se encuentra simplemente mirando la sección de la plantilla.

Front End revolucionó

Los componentes son súper flexibles y reutilizables, lo que es ideal para grandes sitios web. Incluso elementos como botones y formularios pueden ser componentes y, por lo tanto, reutilizables en todo momento.

El estilo de cada componente también se puede incluir en él, lo que es excelente para la consistencia de la marca del sitio web.

Otra razón por la que los componentes son excelentes es que la lógica de las funciones también se puede agregar a cada componente. Esto realmente cambió la forma en que se crearon los sitios web, ya que la lógica generalmente se colocaba en un lugar completamente separado del HTML. Ahora, se agrega al componente, lo que significa que la lógica está vinculada a él allí mismo y puede ser más fácil de encontrar.

Esto significa que una gran parte de la lógica ahora está mezclada con la interfaz, lo que permite una experiencia de pila más completa para los desarrolladores front-end y al mismo tiempo pone menos estrés en el back-end que solo contiene el código que es relevante para lo que está tratando de hacer

¡Parece que esta será la batalla del marco de JavaScript basado en componentes! ¿Quién ganará?

Espero que todos tengan un gran fin de semana festivo en el día de mayo, ¡cya la próxima vez!

Texto original en inglés.