SPA with VueJS with no helpers
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
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.
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
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.
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.
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 hope you like this entrance, and don’t forget to keep writing code!