SPA with VueJS with no helpers

Posted by in Javascript and TypeScript, Programming

Although I am working with VueJS for more than a year, during all this time, I have had no need of using NodeJS while developing, neither WebPack, neither any other loader, neither anything that requires extra effort in the project. Using this way I have had to do some sacrifices that I am goind to describe you in this post. Also, you can contribute to maintain this blog.

Here is the list of commitments that VueJS has to program without helpers:

You cannot create .vue files

Perhaps this is the biggest sacrifice to be made, since the .vue arhcives allow you to separate the template part, from the Javascript part itself, and the individual styles to be applied to the component.

In other words: you need to write pure Javascript files, with some particularity, and it’s the component syntax of VueJS.

With a little practice, you will see that it is not impossible, and perhaps, where you can be a little more careful is in the template section if you use quotes, double quotes, or the ES6 quotes for strings.

Load Javascript file from the index

The second sacrifice to be made is that all Javascript files created must be included in the index, that is, in the HTML file, which is quite long in the case of large projects. Something like this:

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

Giving up the comforts of vue-cli

Of course, since we don’t have NodeJS, we have to sacrifice the amenities that include using it, such as minimizing code, or performing other tasks.

A global module is needed

Another important sacrifice is to do something that is not recommended, such as having a global module, but the benefits are quite evident: having variables throughout the project.

In my case, this (global) module is the one I use to include most of the configurations of the whole project, which I can reuse both in the different components and in the Store (of Vuex).

Auxiliary code folder

I think that it is basic to have a good organization of code, because it is possible that you need functions shared between several components. The way to solve this is by having a folder where you can include Javascript code that gives you such functionality.

In my case, as an example, I have included functions for changing coordinates, or for statistical calculations, among others, as well as functions for downloading information in .docx, or CSV, format, …. and as it is common, I have been able to include it in several projects.

Avoid to learn NodeJS and WebPack

One positive thing of using this way with VueJS is that you don’t need to invest time in learning NodeJS or WebPack. I’m sure that learning both technologies is worthwhile, but in my case, I think I prefer to use my training time in learning other technologies, since through my experience, I have been able to subsist without compilation, neither requires nor imports.

Personally, when I learned RequireJS, I spent a lot of time learning a seemingly simple but extremely complex system until you learn it, and any misconfiguration ends up costing you extra time.

You cannot use TypeScript

Certainly, not using TypeScript in these times can be considered a luxury, and I speak from experience. The reason: you need NodeJS.

In this blog I told you many posts about TypeScript, because I was developing it for several years, until I had to quit for reasons beyond my control. And I haven’t really missed it, except to avoid certain bugs. And, if I could use it, I certainly would.

Precisely, TypeScript is one of the strongest reasons to migrate to VueJS 3, because version 2 doesn’t have good compatibility, and in these times, TypeScript is almost a must for Javascript programming.

Reusing components

As I said, the reuse of components is possible. You only need to include the corresponding link from the index to the Javascript file that contains it and you have it available.

You can use libraries

Although it seems you can’t, you can use bookstores. I’ve chosen to use Vuetify, quite successfully. Also, in this blog you can see how to use VueJS with HighCharts or Leaflets for maps, so the range of possibilities is still incredibly large.

Indeed, you can (you must!!!) use Vuex and Vue-router. In the case of Vuex, you must include a little hack for using mapState, mapGetters, ….

And, of course, you must know how to use the libraries!

My experience as a VueJS developer

You have read that I am working with VueJS, using VueX, VuetifyJS for almost two years, and I have achieved to build even large projects without NodeJS, after resolving all that I already told you. During this time, I have developed my own structure for having all well organizad and structured (really important for big projects): components in one folder, another folder for store, other for styling, another one for images, and even a different one for the libraries such as HighChartsJS or LeaFlet if you need to include maps.

The auxiliary code folder has also been instrumental in avoiding code duplication in many parts, including the mixins. Now, I have several files where I have a good part of common functions that I usually use, or utilities that I have had to incorporate to my projects, like some statistical calculations, or coordinate conversion calculations, ….

I also discover that I am not the only one using VueJs this way. You can read this entrance where you can read extra advice, also including good recommendations using Visual Studio Code.

I hope you like this entrance, and don’t forget to keep writing code!