SPA con VueJS sin ayudas

Posted by in Javascript y TypeScript, Programación

Aunque llevo trabajando con VueJS más de un año, en todo este tiempo no he tenido la necesidad de incluir NodeJS en mis desarrollos, ni WebPack, ni ningún cargador (loader), ni nada por el estilo que suponga un desembolso adicional en megas en el desarrollo del proyecto, teniendo en cuenta que optar por esta vía tiene algunos sacrificios que son posible soportar. Puedes ayudar al mantenimiento de este blog desde aquí.

Te dejo a continuación, el listado de compromisos que tiene programar VueJS sin ayudas:

No podrás crear archivos .vue

Quizás es el sacrificio más grande que hay que hacer, ya que los arhcivos .vue permiten separar la parte de template, de la de Javascript propiamente dicha, y los estilos individuales a aplicar al componente.

Básicamente, escribirás archivos Javascript, con alguna particularidad, y es la sintaxis de componentes de VueJS.

Con un poco de práctica, verás que no es imposible, y quizás, donde puedes tener algo más de cuidado es en el apartado de template si usas comillas, dobles comillas, o las comillas de ES6 para strings.

Carga de archivos Javascript desde el índice

El segundo sacrificio a realizar es que hay que incluir todos los archivos Javascript creados en el índice, es decir, en el fichero HTML, siendo bastante largo en el caso de grandes proyectos. Tal que así:

<script scr=»your_vue_file.js»></script>

Renunciar a las comodidades de vue-cli

Por supuesto, al no disponer de NodeJS, tenemos que sacrificar las comodidades que incluyen su uso, como por ejemplo, minimización de código, o realizar otras tareas.

Disponer de un módulo global

Otro importante sacrificio es hacer algo poco recomendado, como disponer de un módulo global, pero los beneficios son bastante evidentes: disponer de variables en todo el proyecto.

En mi caso, este módulo es el que suelo aprovechar para incluir gran parte de las configuraciones, que puedo reutilizar tanto en los distintos componentes, cómo en el Store (de Vuex).

Carpeta de código auxiliar

Creo que es básico una buena organización de código, y cómo es posible que te hagan falta funciones que compartan varios componentes, es vital disponer de una carpeta donde incluir código Javascript que te aporte dicha funcionalidad.

Aquí he incluido, por ejemplo, funciones para cambios de coordenadas, o para cálculos estadísticos, entre otras, además de funciones para descargar información en formato .docx, o CSV, …. y al ser común, la he podido incluir en varios proyectos.

Evitar aprender NodeJS y WebPack

Otra de las cosas positivas es que no necesitas invertir tiempo en aprender NodeJS ni WebPack. Estoy seguro que el aprender ambas tecnologías merece la pena, pero en mi caso, creo que prefiero usar mi tiempo de formación en aprender otras tecnoligías, ya que a través de mi experiencia, he sabido subsistir sin compilación, ni requires ni imports.

Personalmente, cuando aprendí RequireJS, invertí bastante tiempo en aprender un sistema aparentemente sencillo, pero trementamente complejo hasta que lo aprendes, y cualquier mala configuración acaba costándote un tiempo adicional.

No puedes usar TypeScript

Sin duda, no utilizar TypeScript en estos tiempos se puede considerar un lujo, y hablo con conocimiento de causa. El motivo: necesitas NodeJS.

En este blog os conté muchas entradas sobre TypeScript, pues estuve desarrollando varios años, hasta que tuve que dejarlo por motivos ajenos a mi voluntad. Y realmente, no lo he echado de menos, salvo para evitar ciertos fallos.

Precísamente, TypeScript es uno de los motivos más fuertes para migrar a VueJS 3, pues la versión 2 no tiene buena compatibilidad, y en los tiempos que corren, TypeScript es casi obligado para programar Javascript.

La reutilización de componentes

Cómo he comentado, la reutilización de componentes es posible. Sólo necesitas hacer la vinculación correspondiente desde el índice al fichero Javascript y ya lo tienes disponible.

Es posible utilizar librerias

Aunque parezca que no se puede, sí se pueden usar librerías. Yo he optado por usar Vuetify, con bastante éxito. Así mismo, en este mismo blog habeis podido comprobar cómo utilizar VueJS con HighCharts o Leaflets para mapas, con lo que el abanico de posibilidades sigue siendo increíblemente grande.

Por supuesto, puedes usar Vuex y Vue-router. En el caso de Vuex, deberás incluir un pequeño truco para utilizar mapState, mapGetters, ….

Y por supuesto, deberás declarar su uso expresamente.

Mi experiencia como desarrollador de VueJS

Cómo te he comentado, llevo ya más de año y medio trabajando casi en exclusiva con VueJS, con VueX, VuetifyJS, y he conseguido crear proyectos de tamaño medio a grandes sin dificultades, y sin NodeJS. A lo largo de este tiempo, he sido capaz de desarrollar mi propia estructura para tener todo muy bien organizado (vital para grandes proyectos): los componentes por un lado, el Store por otro, los estilos por otro, imágenes, otros ficheros Javascript necesarios, como HighChartsJS o LeaFlet para incorporar mapas.

La carpeta de código auxiliar ha sido también determinante para evitar la duplicación de código en muchas partes. Ahora, dispongo de varios archivos donde tengo buena parte de funciones comunes, que habitualmente uso, o utilidades que he tenido que incorporar a mis proyectos, cómo algunos cálculos estadísticos, o cálculos de conversión de coordenadas, ….

Y no soy el único que lo hace. Puedes leer también esta entrada dónde alguien también usa este estilo de programación con VueJS, así como da buenas recomendaciones si utilizas Visual Studio Code.

Espero que te haya gustado esta entrada, y a seguir escribiendo código!