Photo by Caspar Camille Rubin .
Find more like this on Unsplash

Why we use Vue.js at Narrandum

The first of our series of tech articles starts with what our users see: the front end.

By Narrandum tech
13 April 2020

As long as there has been a computer industry, there have been holy wars over which technologies to use. Mac or Windows? Playstation or XBox? vi or emacs?

ST or Amiga?

It wouldn't surprise us to learn that Charles Babbage and Ada Lovelace got into blazing rows over the use of tabs vs. spaces.

These days, one of the biggest battlefields is the ever-shifting sands of frontend Javascript frameworks. Because we were starting from scratch, we had the luxury of being able to make a free choice, unburdened by legacy code hairballs that nobody dares to touch. A blank canvas. Nothing holding us back. This time we can finally get it right!.

Of course, the downside of this freedom is that if you make a bad choice, you get to live with the consequences for a long time.

So no pressure, it's only the entire future of the project you're deciding on. A decision as critical as this should be taken by experts who have seen it all before.

But wait. There are no experts. Just one founder, who's a designer that doesn't have a clue what he's doing.

What could possibly go wrong?

Assessment criteria

How do you choose between a bunch of frameworks you know nothing about? One way is to make a list of things that matter to you, or which you think might matter somewhere along the line. Here's ours.

Speed - We really wanted to make a UI which felt snappy. Narrandum was born of frustration at how slow and clunky creating customer journey maps can be. We wanted to make something which was a pleasure to use, to take the drudgery out of the process. We felt a fluid, speedy user experience could give us an edge on our incumbent rivals.

Simplicity - This cannot be overstated, the founder of Narrandum was a *complete novice* at serious software development. There was no budget for support from experienced developers, either. Whichever framework he chose, getting this off the ground would be like stumbling blindfolded through a field full of rakes. Anything to reduce that pain would be a big help. So a gradual learning curve is a plus.

Support - Being simple to work with is one thing, but when the inevitable snags and mysteries turn up, it's important to be able to find help. This means thorough, easy-to-understand documentation, but it also means an enthusiastic community.

Future-proof - This is just the start of our journey, so we would like to find something with longevity. Which is easier said than done in Javascript world, where today's new hot thing quickly becomes yesterday's news. Angular has Google behind it, and React has Facebook. That *should* mean plenty of support. But what if these behemoths get bored and throw their weight behind something else? Would the community pick it up and carry it forward, or just move on to the next shiny thing? Vue, on the other hand, is more of a community effort, spearheaded by just one guy. Is small, but fanatical support a better bet than depending on the goodwill of a corporate giant? What if your project's figurehead is suddenly... indisposed?

The shortlist

And so our intrepid non-expert set about trying to figure out what might fit the bill.

One advantage of having no knowledge of the landscape is that you come in with no preconceptions or prejudices, and so should be able to arrive at an unbiased verdict. Everything should get a fair crack of the whip based on its merits.

"Angular? Seems kinda old-fashioned and complex. Surely if we're starting afresh we can pick something with less baggage?"

"React, OK, heard of that one, know people that like it. Mediocre performance, but seems like a safe choice."

"Marko seems cool. Fast and clean. Tempting. But unfortunately nobody bar eBay seems to be using it, and it's going to take a lot longer to get this site off the ground if we can't copy and paste from Stack Overflow"

"[Vue](https://vuejs.org)? Not quite as fast or clean as Marko, but has a growing community. People that use it seem to love it. And it performs way better than React by the looks of things."

And so we were leaning towards Vue, with React still in the picture, and a little disappointed to have to dismiss Marko.

In the end, the clincher for Vue was the Vuetify component library. This allowed us to stand on the shoulders of giants and move forward fast. Firstly, by leveraging the huge amount of user research Google has put into their Material Design system, and secondly, by availing of an off-the-shelf component library that implements that system in minute detail. It's a seriously impressive body of work, and we can't recommend it enough.

And so Vue was our choice. If Svelte had come into being a year sooner, it might have tempted us, although perhaps not, as it can't yet boast the extensive ecosystem Vue has.

The verdict

Of course, having only done this once, it's not possible to directly compare this experience with others. But we have no regrets about going with Vue. All in all, the experience of going from zero to a more-or-less functional service has been a positive one.

It took a long time to get Narrandum to where it is today, but that's the nature of learning by doing. Were we to start again today, knowing what we do now, things would go a lot faster. In any case, Vue feels like it was the right choice.

Has it met our expectations? Yes, and then some. UI is at least as snappy as we hoped, and Narrandum almost feels like a desktop app.

Has it been able to do everything we wanted? So far, so good. That's not to say it's all been smooth. For example, Vue's reactivity was causing the bits of the site which use [Babylon.js](https://babylonjs.com) to be slow and jerky. It took some serious head-scratching to figure this out, but once the Babylon stuff was decoupled from Vue, everything ran beautifully again.

The Vuetify UI library has been a godsend in providing a solid, tried-and-tested basis for us to build on. As well as that, [Feathers](https://feathersjs.com) and specifically [feathers-vuex](https://vuex.feathersjs.com) made it an absolute breeze to make a nice API and talk to the back end.

Anything you don't like? Honestly, nothing that doesn't come down to inexperience. This has been a process of continuous learning and improvement. The Vuex store seemed like an overly-complicated nightmare at first (and maybe it is), but used in conjunction with feathers-vuex it makes a lot of sense.

Knowing what you know now, would you do it the same way again? Yes, without a doubt. Vue's great, the community around it is fantastic, and the forthcoming version 3 looks like it will eliminate some of its lingering quirks and minor irritations, so the future looks bright.

We hope you found this article interesting. Next we're going to turn our attention to Feathers. Come back soon...

Thanks for reading.

We hope you enjoyed the post. We love helping people to understand their customers better, and producing articles like this is part of how we do it.

But of course, these posts are just the sideshow. The really interesting part is the app itself. So while you're here, why not sign up and try Narrandum for free?