Truco de Vue.js #2: Quiero usar Vue.js en un proyecto grande y viejo.

Tenemos el siguiente escenario: Eres el nuevo miembro de un equipo de desarrollo que lleva unos años perfeccionando una aplicación Web. Dicha app está hecha con tecnologías como .NET y usa jQuery a todo lo que da. Tu primera tarea es “arreglar” el sistema de comentarios pero al analizarlo por un rato descubres cosas como esta:

$('#comment-' + commentId2)
  .toggleClass('comment-state-02')
  .css('display', displayFlag);

Intentas sacarle explicación a cada variable, clase y ID para medio comprender qué están tratando de lograr. Te ves en 2 meses arreglando el parche que arregló el parche que arregló el parche, te deprimes y luego te armas de valor y propones rehacer el módulo.

Y para tu sorpresa… ¡TE LO ACEPTAN! Es tu momento de meterle tecnología de punta que no solo sea novedosa sino eficiente. ¿Pero qué puedo usar que sea eficiente y al mismo tiempo fácil de integrar? OJO: Fácil de integrar es que al meterlo al proyecto no te rompa todo y tome días ajustarlo. Mi sugerencia es obviamente Vue.js.

¿No te convence? Considera que añadir solamente 32kb al proyecto acelerará tu productividad y mantendrá un buen nivel de escalabilidad si creas una abstracción de componentes decente. ¿Qué piensas ahora?

¡Acepto! ¿Cómo empiezo?

Importar el script de Vue.js, sea por CDN o guardando el archivo en el proyecto, es sumamente fácil. Considero que es algo que podemos saltarnos en este post, pero te dejo el link de la documentación oficial aquí.

Ahora, siendo un curioso de la web que conoce Vue.js, sabrás que trabajar con componentes es lo ideal. Y dividir la lógica de cada uno en un archivo con extensión .vue es la cereza del pastel. Sin embargo, el proyecto al que te enfrentas no usa Webpack y, honestamente, integrar Webpack en un proyecto que no se pensó desde un principio con él es una lata. Y tú, siendo el nuevo que ya convenció al Project Manager de usar Vue.js, debes entregar resultados ASAP.

Dale, no pasa nada. Afortunadamente Vue.js tiene más de una manera para declarar un entorno de componentes. En un escenario como este yo te sugiero estas dos formas:

  1. Declaración con strings inline.
  2. Declaración con X-Templates.

Preparación

Checa el repositorio que preparé para ti: https://github.com/enriqued93/truco-vue-2. La rama master contiene el ejemplo para la declaración con strings inline, y la rama x-templates para el segundo ejemplo.

En este repositorio están los pasos necesarios para integrar Vue.js en cualquier proyecto de manera segura. Hay comentarios suficientes dentro del código para comprender qué está sucediendo, así que te recomiendo fuertemente que le des un vistazo.

En el archivo comments.module.js está la definición e inicialización del widget de comentarios y sus componentes. Mi enfoque se basa en definir funciones descriptoras cuyo único fin es devolver objetos con la estructura especificada para un componente de Vue.js.

¿Por qué usar este tipo de funciones y no escribir el objeto inline? En mi humilde opinión, englobar dichos objetos de esta manera ayuda a tener un código más limpio y estructurado. Si estamos trabajando con una herramienta que promueve el uso de componentes, debemos estar consientes de que tener una estructura mantenible y reusable es primordial. Otra ventaja es que si tienes la necesidad de utilizar un componente en otro lado, puedes copiar y llevarte la función completa y no se romperá absolutamente nada ya que la función descriptora debe ser ajena al contexto donde se define.

Declaración con strings inline

Quizá sea la manera más simple de definir un componente en Vue.js. Primero te dejo algunas ventajas y desventajas de este método.

Ventajas

  • Como desarrollador, es imposible perder referencia visual entre lógica y template del componente, pues se encuentran en el mismo sitio.
  • Al mover la declaración de lugar (posiblemente a otro archivo) el componente no se romperá ya que está todo en el mismo objeto.
  • Los problemas que surgen por ejecutar JavaScript antes de tener listo el DOM no te afectarán por declarar este componente porque el template que necesita viene integrado.

Desventajas

  • Como el template se está definiendo como un string, te será muy dificil escribir un componente muy grande.
  • La mayoría de los IDEs (o tal vez todos) tratarán el template como un vil y plano string, omitiendo cualquier tipo de Syntax Highlighting.
  • Para escribir un string multilinea puedes usar las Templates Literals de EcmaScript2015, pero dado que existen navegadores que no implementan esta especificación es un poco arriesgado usarla (a menos que tus requerimientos no incluyan este tipo de navegadores).

Enfoque

Si has usado el framework sabrás que debemos crear un objeto que funja como “descriptor” de nuestro componente y que tiene una estructura como te muestro acontinuación:

{
  template: ...,
  data: ...,
  methods: ...,
  computed: ...
}

Existen ciertas consideraciones que debemos tener en cuenta respecto a este objeto, pero por ahora solo me estoy enfocando en la propiedad template por el alcance de este post.

En el repositorio que te compartí encontrarás que defino el template de los componentes de manera inline, es decir, el HTML con directivas de Vue.js es un string asignado a la propiedad template del objeto descriptor. Este string lo defino usando sintásis diferentes para que de acuerdo a tus gustos o requerimientos uses la que más te acomode. Recuerda que las Template Literals no son soportadas por todos los navegadores (checa la compatibilidad actualizada aquí).

function getCommentListDescriptor() {
    return {
        data: function () {
            return {}
        },
        props: ['comments'],
        components: {
            'comment': getCommentDescriptor()
        },
        template: `
            <div class="wt-comment-list">
                <comment v-for="c of comments" :key="c.id" :model="c"></comment>
            </div>
        `
    }
}

function getCommentEditorDescriptor() {
    return {
        data: function () {
            return {}
        },
        template: '<div class="wt-comment-editor"><textarea class="wt-comment-editor__input" placeholder="Escribe algo..."></textarea><button class="wt-comment-editor__button" type="button">Enviar</button></div>'
    }
}

Declaración con X-Templates

Bueno, pero entonces ¿debo tener forzosamente mis archivos JavaScript con todos esos strings que tienen una sintáxis más parecida a HTML? La respuesta es NO.

Ventajas

  • Ciertos IDEs pueden ayudarte con Syntax Highlighting ya que el template se encuentra en un archivo HTML.
  • Resuelve el impedimento de los templates multilinea.
  • Si creamos un componente con un template muy extenso, el código se aligera visualmente al quitarlo del descriptor.

Desventajas

  • Si no tenemos cuidado y olvidamos incluir los X-Templates en el contexto, el componente no encontrará su respectivo template y explotará.
  • Si el componente se inicializa antes de tener listo su respectivo X-Template dentro del DOM, también explotará.

Enfoque

Hagámosle unos cambios al ejemplo anterior. En lugar de tener los templates en nuestro JavaScript, lo moveremos al HTML de la siguiente manera.

<script type="text/x-template" id="vue-comment-template">
    <div class="wt-comment">
        <p class="wt-comment__subject">{{model.subject}}</p>
        <p class="wt-comment__body">{{model.body}}</p>
    </div>
</script>

El punto clave es englobar el template en un <script> con la propiedad type=”text/x-template”. El ID del script reemplazará al template inline del ejercicio pasado.

function getCommentDescriptor() {
    return {
        data: function () {
            return {}
        },
        props: ['model'],
        template: '#vue-comment-template'
    }
}

No olvides que para que la inicialización de un componente se lleve a cabo adecuadamente, es necesario que el X-Template en cuestión exista en el DOM en dicho momento. Puedes usar $(document).ready() o la estrategia que prefieras para asegurar que el JavaScript se corra cuando el DOM se haya cargado (en el repositorio encontrarás una estrategia usando solamente JavaScript por si has superado jQuery).

Conclusión

En mi humilde opinión, establecer una buena abstracción y arquitectura de componentes en tu aplicación es primordial. Si lo haces no importará si tu app debe seguir creciendo pues soportará nuevas funcionalidades (escalabilidad); arreglar bugs dejará de ser tarea de andar descifrando código ajeno (mantenibilidad).

Si usas Vue.js o estás considerando en usarlo, aprovecha todas las bondades que ofrece y sácale todo el jugo. Recuerda que puedes tener el mejor framework del mundo pero si no lo usas como se debe no hará ninguna diferencia.

Ojalá esto te sea útil y no olvides dejarme tus comentarios diciendo qué cosas te interesarían aprender, cómo te pareció este post o qué opinas de mi escritura. Te mando un saludo, nos leemos en el próximo post.

– Enrique D.

 

 

Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo

¿Tus usuarios tienen conexión lenta? ¿Vue.js no se definió correctamente? ¿Detestas el DOM pre-render?

Así se vería Google antes de cargar Vue.js (si lo usara…)

Pues te tengo la solución a tus problemas: ¡v-cloak!

En la lista de directivas de Vue.js encontramos v-cloak, pero puedo asegurar que muy pocas personas le prestan atención.

Lo único que hace esta directiva es desaparecer. Sí, desaparecer y ya. Cuando Vue.js es invocado se encarga, entre otras cosas, de quitar todos los v-cloak que haya dentro del elemento HTML que inicialices.

Ten en cuenta que v-cloak no se pone por defecto en todos lados, tú debes ponerla y sólo es válido en elementos dentro del que inicializas, no aplica sobre él mismo.

<div id="super-app">
    <div class="results" v-cloak>
        <p>About {{numResults}} results. ({{responseTime}} seconds)</p>
    </div>
    <p class="tip">
        Tip: <span>Search for <em v-cloak>{{language}}</em> results only</span>. You can specify your search language in <a href="">Preferences</a>
    </p>
</div>

<script>
    let superVueApp = new Vue({
        el: '#super-app',
        .
        .
        .
    })
</script>

Si esto lo combinas con una regla de CSS puedes ocultar todos los elementos que no estén listos.

[v-cloak] {
  display: none;
}

 

¡Voilá! Con esta solución super-simple te olvidas de tener HTML que no esté listo sin pegarle al performance de tu app.

Si tienes dudas sobre Vue.js o cosas raras que te gustaría hacer y no sabes cómo, déjame un comentario para tenerlo en cuenta para los próximos Trucos de Vue.

– Enrique D.

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 vs Vue.js ¿qué framework me conviene aprender?

Hoy por hoy la cantidad de opciones entre las que podemos elegir para crear aplicaciones de front-end ha crecido exponencialmente; todos los días hay nuevas ideas, nuevas herramientas y metodologías y con ello llega el gran reto de poder distinguir bajo que circunstancias o casos de uso una es mejor que la otra.

En este artículo te platicaré un poco de mi experiencia personal con dos de los mejores frameworks (en mi opinión) que tenemos a la mano; asimismo te dejo un video de un curso rápido que tuvimos donde comparamos ambos frameworks.

Aclaro que este artículo NO se enfoca en cuestiones de performance, sino que trata de ser un punto de vista más general.

¿Por qué no incluí a React?

Porque hasta ahora no he tenido la oportunidad de trabajar con él a nivel profesional.

Angular

Creado por Google, como evolución de AngularJS. Es un framework muy robusto para creación de Single Page Applications, provee todo lo necesario para crear aplicaciones de cualquier tamaño. La comunidad alrededor de Angular es muy dinámica por lo que todos los días se generan nuevos módulos para las versiones más recientes.

Sitio oficial: https://angular.io/

¿Te gustaría aprender Angular desde cero?

Checa este Curso Profesional de Angular que tenemos en Webtraining.Zone

Ventajas

  • Preparado para cualquier tipo de aplicaciones
  • Excelente documentación técnica
  • Un buen número de módulos creados por la comunidad
  • Sugiere muy buenas convenciones para nombrar tus archivos, componentes, módulos y servicios
  • Hace uso extensivo de un stack moderno que incluye: TypeScript y Webpack.
  • Posee una Command Line Interface: Angular CLI que permite generar código boilerplate muy rápidamente
  • Preparado para lazy loading
  • Provee un modo producción y un modo desarrollo
  • Listo para Ahead of Time Compilation
  • Angular es MUY bien pagado en el mundo front-end empresarial

Desventajas

  • Angular es un framework complejo, por lo que la curva de aprendizaje puede ser alta dependiendo de tu experiencia previa
  • Es necesario aprender TypeScript, que aunque es un super set de JavaScript, agrega nuevas cosas como por ejemplo los tipos, las interfaces, los modificadores de acceso, etc. que pueden parecerte no naturales al principio (sobretodo si vienes del mundo de JavaScript 100%)
  • Es forzoso utilizar un proceso que incluya un bundler y module loader (como Webpack o Rollup.js)

Vue.js

Creado Evan You, es considerado un framework progresivo, es decir, es un framework que puede irse haciendo tan robusto como se necesite; ya que puede ir desde la simple inclusión de éste como una biblioteca JavaScript regular que sólo crea pequeños widgets, hasta un framework muy potente para crear aplicaciones completas.

Sitio oficial: https://vuejs.org/

Ventajas

  • No necesitas aprender algo nuevo, ya que se puede usar con ES5 o incluso con ES2015 si así lo deseas.
  • Puedes usarlo directamente en tu sitio web sin necesidad de tener un complejo sistema de empaquetado (es decir, no necesita Webpack para trabajar en su formato más simple).
  • Es un framework muy ligero
  • La curva de aprendizaje es muy amigable
  • Tiene una documentación muy “digerible” (se lee y comprende muy bien)

Desventajas

  • Mantenido por un pequeño grupo de personas, lo cual podría suponer un riesgo menor ya que la comunidad alrededor de Vue.js es muy grande (no te preocupes, puedes usarlo)
  • Vue.js te da mucha libertad, lo que para un desarrollador poco experimentado puede resultar peligroso cuando se trate de aplicaciones muy grandes
  • En general he visto que el salario ofrecido para un desarrollador de Vue.js es menor al de un desarrollador de Angular

¿Qué opinas? ¿cómo te ha ido con alguno de estos frameworks? ¿qué tipo de aplicaciones has hecho? ¿crees que sea bueno tener tantas opciones para elegir?