Devintersection lunes 10 de junio

En esta charla lo que vimos fue todo el día sobre vuejs que es un framework muy poderos y muy fácil de usar. Este ganado terreno sobre algunos otros frameworks basados en javascript.  Esta fue impartida por John Papa y Dan Wahlin.

Para poder crear una pagina web se requiere de componentes que van a trabajar juntos y se deben ir armando como legos. Estos componentes deben ser capaces de ser independientes y trabajar en conjunto para brindar una gran flexibilidad a la hora de diseñar la pagina web. Esto lo podemos obtener con vuejs.

Separar un proyecto en componentes nos da mucha flexibilidad y además es más fácil para crecer y dar soporte a la aplicación. Lo que no debemos olvidar a la hora de desarrollar el proyecto es la organización.

Podríamos ver vuejs como un framework intermedio entre Angular y React ya que tiene una guía de desarrollo muy similar a la de Angular, pero se pueden hacer cosas también igual que React.

Una gran ventaja que tenemos con vuejs es que podemos implementarlo de dos maneras una usando el script directamente del CDN o descargándolo a nuestra maquina y esto no requiere de ninguna configuración adicional, fácil y simple. También se puede hacer por medio del npm. En el caso de Angular y React es que siempre requiere de una configuración inicial para trabajar.

Para crear un proyecto con npmp se puede usar el CLI.

Existe una herramienta que se puede usar para monitorear el rendimiento de los scripts entre otras cosas que se llama Vue CLI UI.

Con vuejs se pueden tener múltiples apps corriendo en la misma pagina web. Estos pueden ser independientes y tener comunicación entre ellos.

Algunas recomendaciones:

• Una muy buena recomendación para la creación de los componentes es utilizar archivos separados, con esto podemos organizar mucho mejor nuestro código.
• Es agregarle nombre siempre a la app ya que a la hora de ver los errores vamos a poder ver exactamente cuál es la app que está dando errores.
• Podemos usar typescript para generar nuestro código de vuejs.
• v-once es una función que nos permite indicar que los datos que estamos cargando en pantalla no van a cambiar por lo tanto no requieren de monitoreo, esto nos ayuda en el rendimiento de nuestra app.
• Podemos usar v-bind que nos permite cambiar propiedad de componentes del DOM fácilmente.
• Entre otras funciones que nos hacen la vida fácil tenemos @click, @keyup.enter. esta ultimo tiene el evento del enter con el que podemos llamar alguna función.
• Las variables es importante declararlas como undefine si no le agregamos ningún valor o tipo.

Un aspecto importante que vimos durante la conferencia es que Angular toma más tiempo para compilar ya que hace más trabajo para reducir los bundles que se envían al cliente. Lo cual al final es una ventaja.

Aquí podemos ver el ciclo de vida de vuejs. En el evento de create podemos pedir los datos al servidor si se requieren para tenerlos listos en el momento que esté listo el DOM. Ya con los datos listos y en el momento se cree el DOM vamos a poder mostrarlos sin problema.

En el evento de mounted podemos cargar las librerías de terceros que necesitamos para que esten listas para usarlas también.

Entre otras propiedades tenemos computed que nos permite monitoreas cambios en variables, es más eficiente que hacerlo por medio de wathcers.

Otra propiedad que podemos usar son los filtros para modificar como se ven los datos.

Tenemos varias opciones para hacer llamados de Ajax. Dentro del framework. Podemos usar fetch o axios. Para usar axios podemos instalar la librería con npm esta librería funciona sobre fetch pero es un poco más simple de usar.

Tenemos también librerías para poder hacer el ruteo de las páginas que se pueden instalar desde el npm.

Otros conceptos que se hablaron fueron sobre los lazy loading para mejorar el rendimiento de la carga de las páginas. Ya que permite cargar los bundles de únicamente lo que el usuario necesita.

Algunos recursos

https://johnpapa.net

https://codewithdan.com

Siguiente