So I did it (vuejs meets an automation engineer)!
Tags: vue, architecture, bulma, typescript
Published: 2020-01-02 15:27:14

#As First
So I've written about my [early exposition to web technologies](https://dev.to/absinthetized/when-a-senior-automation-software-engineer-meets-front-end-web-technologies-3o) a few months ago... Finally I've got a chance to write a real app in vue.js and this is my feedback as a beginner.

![ok](https://images1.memedroid.com/images/UPLOADED19/50a6ee06d068f.jpeg)

#The widget set
In my previous post I've tried but material design and bootstrap with vue and I liked boostrap more... Anyway I've gone with [buefy](https://buefy.org/) for my app: the customer asked for the *ability to reorder table rows with drag'n'drop* an this is a native feature in buefy, and it is paired with an amazing example you can basically copy-pasta to your codebase.

>  *lesson 1*: the customer needs define your tools.

![turbine](https://dieselgasturbine.com/wp-content/uploads/2019/01/m501j.jpg)

#The project setup
When you start a project with vue.js you can bootstrap a skeleton via the [Vue CLI](https://cli.vuejs.org/). I really recommend the following:
*  switch to a custom setup
*  *enable* Typescript (aka ts)
*  *avoid* the Linter (your worst enemy!)

#The infamous linter
While you have a number of optional linters and you can setup your own rules, for a small project this is an overkill.
I *do* like the idea of an omogeneous style all around the app, but enabling the linter is really irritating: it is constantly in your way. You are developing some test ideas and the linter generates something like a gazillion of errors because your have put that space but you have not put those curly braces after an if statement... *GOSH* it slows you down a lot!

![lint](https://www.memecreator.org/static/images/memes/5002957.jpg)

>  *lesson 2*: Way better to manually run a linter now and then then enable the linter by default!

#The blessed Typescript
While the app was a small manufacturing management system with limited functionality, and while [the entire world is now spitting on OOP](https://www.google.com/search?q=oop+is+evil&oq=oop+is+evil&aqs=chrome..69i57.2350j0j4&sourceid=chrome&ie=UTF-8), Typescript abstract classes made my day:
* saving ton of obscure `this.prototype = {...}` stuff all around 
* centralizing the code a lot and thus reducing the [LoC](https://www.google.com/search?q=loc+coding&oq=loc+coding&aqs=chrome..69i57j0l7.1725j0j9&sourceid=chrome&ie=UTF-8) I've written.

![ts](https://i.redd.it/2bcep99vg3p01.jpg)

And everyone knows that the more the LoCs the more the bugs.

#The too strict Typescript 
While I really recommend the usage of typescript with Vue too, I've to say that:

> *lesson 3*: interfacing js and ts in vue it is [not necessarily trivial](https://stackoverflow.com/questions/51873087/unable-to-use-mixins-in-vue-with-typescript). Now and then you fall in some deadend and you would pray to revert to plain js, but the net result is incredibly positive.

![ops](https://miro.medium.com/max/1224/1*dzIBJ4tnjfq7BjrIKQjR8A.jpeg)

#Architecture, my lads, architecture
I've seen ton of people praying for state management in vue.js/react/angular apps. While information exchange among components is not easy (almost impossible) unless you have a parent-child relation, I think that a good old MV* approach a-la [backbone](https://backbonejs.org/) is a winner here.

> *lesson 4*: *always*, **always**, I've said **ALWAYS** remember that front-end is not different from back-end! You need structure and you need to separate concerns.

The data you fetch is a *model*, the logic which manipulate them is your *controller/presenter/supercool-brand-new-logic*, the way you show them on screen is the *view*. Use plain ts code to structure everything and use vue to render, avoid stuff like fetching data inside a vue component: 

> This approach is just MVC a-la winforms and it is known to proudly kill your dog since 90s!

![old](https://img.devrant.com/devrant/rant/r_215707_XHYJC.jpg)

#Is vue the right tool?
While I was working on this app for a customer of mine, I've started collaborating with a local software house: they are a java+angular shop so I've got a certain exposition to angular in production too.

> *lesson 5*: your early impressions are *usually* right.

Vue and vue router are incredibly handier to use than angular, so yes: my eraly impressions where right. Just use them as first choice unless your project is a really huge one... like... like you are rewriting a full OS in the web ;)

#But vue/react/foo is just a library, full frameworks avoid the need for glueing together ton of libraries

Let me put this in that way: *this is bullshit*.

![npm](https://img.devrant.com/devrant/rant/r_694297_4WEgS.jpg)

My app is making use of firebase and other backend services: firebase has it own API you still need to put in the model layer of your framework. Other fetch APIs are trivially simple to integrate: [Axios](https://github.com/axios/axios) is just a brain dead choice and doesn't add any complexity or any real boilerplate.

> *lesson 6*: risk of library piling/boilerplate vs usage of frameworks is not a factor at all. You should choose your tools because of other *real* reasons.

#Sidenotes
###I'm not fan of projects with 1000 tools, but...
Being in shortage of time has lead me to search for a lot of premade stuff: I've found [vue portals](https://portal-vue.linusb.org/) super-cool and super fast to implement
###All memes belong to their authors!