Categoría: Videotutorial

Manejo de errores 404 con vue-router

Duilio Palacios 18/08/2017
Videotutorial, Vue.js Comentarios desactivados en Manejo de errores 404 con vue-router

Cuando creamos un Single Page Application (SPA) con un framework de JavaScript como Vue.js, debemos manejar escenarios donde el usuario intente acceder a una URL que no existe o ha sido eliminada, al igual que cuando trabajamos con frameworks de backend como Laravel. En esta lección aprenderemos cómo podemos manejar errores de tipo 404 en Vue.js utilizando una ruta y un componente para ello. Además veremos algunos trucos y técnicas adicionales usando navegación mediante código, helpers y más.

Manejo de estado básico con Vue.js

Duilio Palacios 18/08/2017
Videotutorial, Vue.js Comentarios desactivados en Manejo de estado básico con Vue.js

En esta lección aprenderemos cómo podemos extraer el estado (datos) de nuestra aplicación a un objeto centralizado al cual todos los otros componentes tendrán acceso. De esta forma entonces podremos obtener la tarea desde el componente de Detalles (o de cualquier otro componente) y sincronizar las tareas a lo largo de todos nuestros componentes sin necesidad del paso de propiedades ni del manejo de eventos. Esta lección es una antesala a una próxima parte del curso donde aprenderemos a utilizar Vuex.

Rutas dinámicas con vue-router

Duilio Palacios 17/08/2017
Videotutorial, Vue.js Comentarios desactivados en Rutas dinámicas con vue-router

En esta lección vamos a asumir que necesitamos agregar más campos a la tarea (por ejemplo una descripción detallada) y por lo tanto necesitamos crear nuevas rutas para mostrar el detalle de la tarea y poder editarla. Estas nuevas rutas serán dinámicas (puesto que cada tarea tiene un identificador -o ID- diferente). Además en esta lección te enseñaré cómo navegar de forma programática (o mediante código) con vue-router, cómo pasar propiedades desde una ruta hacia un componente y mucho más.

Personalizar el estilo del menú de Vue Router

Duilio Palacios 09/08/2017
Videotutorial, Vue.js Comentarios desactivados en Personalizar el estilo del menú de Vue Router

En la lección anterior sobre Vue Router, aprendimos cómo utilizar este paquete para crear los enlaces de nuestra Single Page Application (SPA), sin embargo a estos enlaces aún les hace falta un poco de estilo. Es por esto que en esta nueva lección vamos a agregarle los estilos de Bootstrap en nuestro caso, pero te enseñaré cómo puedes modificar el HTML para que se adapte a cualquier otro framework de CSS.

Instalación y uso de Vue Router en Vue.js 2

Duilio Palacios 09/08/2017
JavaScript, Videotutorial, Vue.js 0 comentarios

Crear una aplicación de una sola página o SPA (por sus siglas en inglés “Single Page Application”) es muy sencillo con Vue.js.

Esto es debido a que con Vue.js nosotros podemos “componer” nuestra aplicación de pequeños componentes independientes como hemos aprendido hasta ahora y también contamos con un paquete llamado vue-router que nos permite atar o enlazar una o más URLs a uno o más componentes específicos, indicarle a Vue dónde queremos mostrar las secciones y por supuesto también nos ayuda a generar los enlaces de las diferentes secciones.

Es por ello que a partir de ahora crearemos componentes con la intención de que estos representen secciones o sub-secciones dentro de nuestra aplicación y vamos a instalar y a utilizar vue-router para enlazar estos componentes a diferentes URLs. Vamos a comenzar con un ejemplo sencillo en el siguiente video:

Ver post

Organización de los componentes en Vue.js 2

Duilio Palacios 08/08/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Organización de los componentes en Vue.js 2

Si quieres crear un SPA con Vue 2, es posible que necesites agregar muchos componentes, por lo tanto sería conveniente organizarlos en diferentes subdirectorios y esto es lo que haremos en la siguiente lección, apoyándonos por supuesto de vue-cli y de webpack como ya hemos aprendido. Además veremos tips adicionales sobre cómo usar objetos globales, configurar PurifyCSS y más.

Uso de interceptores con axios, Laravel y Vue.js.

Duilio Palacios 12/07/2017
Laravel 5.4, Videotutorial, Vue.js 3 Comentarios

En esta lección aprenderás cómo «interceptar» respuestas de AJAX utilizando el componente axios, por supuesto en nuestra aplicación escrita con Laravel y Vue.js.

Cierre de sesión con Laravel Dusk

Duilio Palacios 12/07/2017
Laravel 5.4, Videotutorial Comentarios desactivados en Cierre de sesión con Laravel Dusk

En esta lección vamos a escribir una prueba de la acción de cerrar sesión utilizando Laravel Dusk. Además aprenderás cómo implementar el feature para recordar un usuario que ha iniciado sesión en tu aplicación.

Optimización de consultas SQL con Eloquent (solución a N+1, parte 2)

Duilio Palacios 07/07/2017
Laravel 5.4, Videotutorial Comentarios desactivados en Optimización de consultas SQL con Eloquent (solución a N+1, parte 2)

Muchas veces cuando trabajamos con Eloquent creamos pequeños métodos helpers para obtener datos adicionales. Por ejemplo, en el caso del módulo de votos creamos un pequeño helper getVoteFrom que nos permite obtener el voto de un usuario de un post en específico. Sin embargo si no tenemos cuidado estos métodos pueden provocar un problema de N+1 como ya hemos aprendido anteriormente. En esta lección veremos una nueva forma de solucionar este problema a través de la carga ambiciosa, relaciones personalizadas y más.

Reusar controladores y rutas en relaciones polimórficas

Duilio Palacios 06/07/2017
Laravel 5.4, Videotutorial Comentarios desactivados en Reusar controladores y rutas en relaciones polimórficas

En esta lección aprenderás cómo utilizar los mismos controladores y rutas para diferentes módulos, lo cuál es muy útil sobretodo cuando utilizamos relaciones polimórficas con Eloquent. Dado que así no sólo podremos re-usar el modelo y ciertos métodos, sino que también evitaremos la repetición del código en otras partes de nuestro proyecto, manteniendo el código DRY y reusable.