As First

So I've written about my early exposition to web technologies 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.

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 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.

The project setup

When you start a project with vue.js you can bootstrap a skeleton via the Vue CLI. 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!

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, 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 I've written.

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. Now and then you fall in some deadend and you would pray to revert to plain js, but the net result is incredibly positive.

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 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!

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.

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 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 super-cool and super fast to implement

All memes belong to their authors!