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
Etiquetas: devintersection, Javascript, vuejs, web
0 comentarios:
Publicar un comentario
Suscribirse a Enviar comentarios [Atom]
<< Inicio