Categoría: Single Page Application

Vue, el framework progresivo que llegó para quedarse

Estamos a mitad de 2018 y como siempre es un placer poder seguir en contacto y continuar aprendiendo cosas interesantes que nos ayuden a crear mejores proyectos de software.

Hoy te voy a platicar sobre Vue.js el llamado “Framework Progresivo” para creación de aplicaciones.  Vue.js fue creado con la simplicidad en mente, su aceptación se ha debido en gran medida a que incrementa mucho la productividad mediante el uso de un API muy bien documentado y fácil de comprender, incluso si no se tiene tanta experiencia en web.

¿Por qué aprender Vue?

A mi gusto, Vue provee un API mucho más sencillo de utilizar y manejar cuando se compara contra frameworks más robustos como Angular 2+; Vue fue de hecho inspirado en la primera versión de Angular conocida como AngularJS; de las propias palabras de su creador Evan You:

I started Vue as a personal project when I was working at Google Creative Labs in 2013. My job there involved building a lot of UI prototypes. After hand-rolling many of them with vanilla JavaScript and using Angular 1 for a few, I wanted something that captured the declarative nature of Angular’s data binding, but with a simpler, more approachable API. That’s how Vue started.
Fuente: Github Open Stories

Ventajas de usar Vue

  • No necesitas aprender un nuevo lenguaje como TypeScript para poder usarlo, aunque si te gusta TypeScript Vue es compatible con este lenguaje
  • Puedes usarlo como un reemplazo de jQuery para manipulación del DOM
  • Para casos más complejos puedes usar todo el poder del front-end moderno: ES2015+, Webpack, pre-procesadores, etc.
  • Curva de aprendiza muy corta
  • No requieres que tu aplicación sea de tipo SPA, ya que Vue puede irse adaptando a como lo necesites: por ejemplo lo puedes integrar con una vista de Laravel Blade, en tu app de Spring MVC, o en un módulo de tu CMS favorito (Drupal, Joomla, Liferay, IBM WCM, Umbraco, etc.)
  • Puedes usarlo en combinación con Node.js para hacer server-side rendering
  • Y más…

¿Cuándo usar Vue y no Angular?

Angular es un framework mucho más robusto que Vue.js eso quiere decir, que tiene muchos módulos y componentes avanzados que quizá no necesites en tu aplicación. Aquí hay algunos casos de uso donde NO se recomendaría Angular.

  • La aplicación NO es una Single Page Application. Angular fue pensando 100% para SPAs, si tu no estás desarrollando una Angular no es buena opción.
  • Tu aplicación sólo se comunica con muy pocos servicios REST externos (menos de diez end-points). Angular es muy bueno para aplicaciones empresariales complejas, pero para algo más sencillo es muy pesado cuando se compara con Vue.js.
  • Necesitas crear componentes sencillos integrados en la capa de vista de algún framework como Laravel o Spring MVC. Hay ocasiones que tenemos un framework de backend que hace casi todo, excepto que necesitamos interacción del usuario mediante JavaScript, Angular no sería natural en este caso de uso. Recuerda Angular funciona genial con SPAs.

Entonces ¿ya estás listo para continuar con Vue.js?

¿Dónde puedo aprender Vue?

En Webtraining.Zone tenemos un curso de Vue.js el cual fue impartido en vivo el martes 23 de enero de 2018. Este curso está disponible en: https://webtraining.zone/cursos/curso-profesional-vue-js

¿Cómo obtengo acceso al curso de Vue?

Si tienes una membresía en Webtraining.Zone ¡ya tienes incluido este curso!

Spoiler alert!
React is coming…

Tu servidor:
Alex Arriaga

Angular 5, la evolución sigue

Si bien la nueva versión de Angular había sido planeada para ser liberada el pasado 23 de octubre de 2017; eso no sucedió, pero no te preocupes hoy se acaba de liberar el Release Candidate #7 por lo que es muy probable que en muy próximos días Angular 5 ya esté con nosotros. Finalmente tenemos versión 5.0 estable y lista para ser usada.

En este último release se han corregido algunos issues menores, es decir, ya nada crítico está siendo arreglado en estos momentos.

¿Qué esperar en la versión 5?

Optimización en los bundles

Al parecer se acabaron los tiempos donde teníamos bundles de más de 500 Kb para aplicaciones sencillas; eso nos llena de alegría, ya que una de las mayores limitantes (hasta la versión 4) era que nuestros archivos generados eran aún pesados, incluso para aplicaciones con muy pocos componentes.

Ahead Of Time Compilation por defecto para la Angular CLI

Oh sí, mi buen amigo, finalmente ya tendremos AoT desde el inicio cuando se crean proyectos que usen la CLI de Angular. Esto es definitivamente algo excelente, ya que nos olvidaremos de estar pasando flags extraños al estar creando nuestra aplicación para producción.

Mejor Desempeño para Event Listeners

Se han aplicado algunas mejoras en la forma en cómo se registran eventos, como el documentado en este pull request.

¿Progressive Web Apps con Angular? Por supuesto que sí

En la versión 2 y 4, no existían mecanismos completos y bien documentados sobre la creación de Aplicaciones Web Progresivas, ¿y qué crees? en la versión 5, el equipo detrás de este genial framework ha puesto especial énfasis en este tema que cada vez toma más relevancia en todos los frameworks modernos. Angular no se quedará atrás y por supuesto que ya se está trabajando en hacer este tipo de aplicaciones mucho más robustas usando mecanismos de caché en el browser y otras mejorar que ya platicaremos más adelante.

Componentes de Material Design Listos para Server-side Rendering

Esto quizá es de las cosas que personalmente más espero, ya que actualmente Angular está muy “joven” en cuanto server-side rendering, incluso con la adopción de Angular Universal por parte de Google, la verdad es que nos nos han brindado una forma estable y potente para este tema, que es el motivo por el que muchos desarrolladores e ingenieros de software han descartado Angular para aplicaciones donde el SEO sea vital.

Tengo mis reservas en este tema, quisiera probar si realmente estos componentes funcionarán como es debido. Esperemos que sí.

¿Qué sigue?

  • Evidentemente, ya estamos ansiosos por probar la versión estable de Angular 5, así que tan pronto como se libere, estaremos probando todo lo nuevo en el día cero.
  • Angular 6 se empezará a cocinar tan pronto como la 5 sea estable ¿qué? sí recuerda que Angular adoptó el sistema SEMVER con lo cual se ha prometido tener nuevas versiones de Angular cada 6 meses; eso quiere decir que más o menos entre marzo y abril del próximo año tendremos Angular 6…

¿Tendremos un Curso Profesional de Angular 5 en Webtraining.Zone?

Por supuesto que sí, tan pronto como tengamos versión estable, estaremos creando un proyecto completamente desde cero para que puedas aprender todo lo nuevo.

Ya tenemos fecha y hora: 18 de Noviembre 2017 en punto de las 10 AM (Hora México Centro).

Inscríbete ahora al Curso Profesional de Angular 5 con Material Design: https://webtraining.zone/cursos/curso-profesional-de-angular-5-con-material-design
Nos vemos en ese curso, mientras tanto coméntame ¿qué opinas de Angular? ¿has tenido oportunidad de explorarlo?

—

Tu amigo Alex Arriaga

¿Cómo ejecutar código JavaScript después de que cambie de página en Liferay?

Bien sabido es que la interfaz de Liferay 7 fue transformada a una Single Page Application ó SPA -por sus siglas en inglés-. 

Los SPA son aplicaciones web que no precisamente hacen un redireccionamiento entre las páginas que contenga la aplicación, ya que la aplicación se carga una sola vez. Esto significa que la URL de nuestra aplicación no va cambiar de manera natural, eso también es manipulado manualmente (usualmente con un módulo de routing). Esto significa que si tu quieres ejecutar una bloque de código en común para todas las páginas, y dicho código lo añades en las configuraciones avanzadas globales, ya sea de public pages ó private pages, este código sólo será ejecutado la primera vez en que llegas a la aplicación.

Al darte cuenta de esto, es muy probable que pienses en poner este bloque de código en las configuraciones avanzadas de cada una de las páginas en donde deseas ejecutar ese código. Pero ¿qué pasaría si tuvieras un portal con diez páginas, y además manejas navegación de segundo nivel? Te darás cuenta de que esto no es mantenible, ya que cada vez que quieras modificar por alguna razón ese bloque de código, tendrás que hacerlo en todas las páginas donde agregaste ese código.

En las SPAs la manera de navegar entre páginas se le conoce como routing o enrutamiento. 

Algunos frameworks como Angular, Ember o Meteor han adoptado los principios de SPA, así que si ya has utilizado alguno de ellos, esto te debe ser familiar. Y bueno, Liferay 7 no es la excepción, ya que también tiene su manera de navegar entre páginas. 

Entonces, volviendo a nuestro problema inicial de cómo ejecutar un bloque de código en varias páginas sin tener que forzar un redireccionamiento y cargado de página por completo, en Liferay tenemos un objeto expuesto en el browser.

Este objeto tiene varias propiedades muy útiles, dentro de las cuales está nuestra SPA. Ésta propiedad nos ofrece otras propiedades donde podemos saber el tiempo de expiración de la cache de Liferay, notificaciones de usuario, paths que han sido excluidos, así como una propiedad llamada app. 

La propiedad app también tiene otras propiedades, pero para nuestro caso, nos importa la propiedad de events_, que como el nombre lo dice, cuenta con eventos que nos dicen en qué momento se ejecutan las siguientes acciones:

  • Comenzar a navegar entre las páginas
  • Antes de navegar
  • Al terminar de navegar

Con estos eventos, es suficiente para ejecutar nuestro código de manera exitosa al cambiar entre la diferentes páginas en nuestro SPA sin tener que recargar la(s) páginas.

Si has usado jQuery y sus eventos, esto te será familiar:

Liferay.SPA.app.on("endNavigation", function(event) {
    // Ejecuta algo aquí después de haber cambiado de página
});

Lo anterior usa una función (on), la cual registra un evento y una acción a ejecutar a través de una función después de que se haya disparado el evento endNavigation.

Como puedes observar el evento endNavigation se dispara en el momento en que la navegación de nuestra SPA ha cambiado y terminado, es decir; imaginemos que te encuentras en la página Home te tu sito y en la navegación das un click a otra página llamada About Us, cuando la SPA haya terminado de llevarte de la página Home a la de About Us se ejecutará el código anterior.

Entonces, ahora ya sabes como ejecutar código JavaScript sin tener que recargar la página en Liferay 7.

No hay mucha documentación oficial sobre el objeto de Liferay 7 que está expuesto en el objeto global window, así que te recomiendo explorarlo un poco más para descubrir qué otras cosas podemos obtener de éste.