3 Years of VueJS (2021)

Have you ever wondered what a complex vue js application really looks like?

Annotation Focused Modules

Example — Drawing a Polygon

Overview of the Instance List Component

for (var i in this.instance_list) {   this.draw_single_instance(ctx, i)}

Conditioning on type

else if ([“polygon”, “line”].includes(instance.type)) { ctx.beginPath() this.draw_polygon(instance, ctx, i)}
  1. draw_polygon_control_points()
  2. draw_many_polygon_circles()
  3. draw_circle_from_instance()
  4. draw_circle()
  5. is_mouse_in_path()


User control

draw_circle: function (x, y, ctx) { ctx.arc(x, y, this.$props.vertex_size, 0, 2 * Math.PI); ctx.moveTo(x, y) // reset},

Why such deep control? Why not use a higher level drawing library?

  1. Our needs often don’t appear to line up with those of the library. For example when it comes to rendering video at the breadth and depth we want to, it’s simply not something these higher level libraries tend to support.
  2. Support for Vue was largely missing when we started. While support is getting better, generally it ends up being thing wrappers.
  3. We have also found at least so far that often performance issues are rarely to do with these types of drawing functions themselves.
  1. It allows us to maintain a consistent definition. If we call something `x_min` — we can use that up and to the point we have to interact with `canvas`. Given we are in a scientific realm, it feels a lot more consistent to be very precise about this.
  2. Easy to modify. For example, we were able to “drop in” the user modifiable vertex size (and similar features) relatively easily.
  1. Sometimes it’s a bit of a distraction — reasonable user expectations like moving an instance, resizing, etc. can sometimes become a surprising amount of work to get right.


Why is this so hard? What’s the big deal?

Annotation core got large

Code in JS — Presentation Layer in Vue

Each Instance Type has its Own Class

User Interaction Paradigm

Drawable Canvas — Divide Canvas and rest of Annotation UI

Make Error Propagation Easy — Regular Error

.catch(error => { this.error = this.$route_api_errors(error) })
<v_error_multiple :error=”error”> </v_error_multiple>

Wrap Library Components

Button with Menu example

Why regular components

  • Gives us protection that if the library changes again(or we wish to move to another library, implementation etc) we can do so in one place.
  • Consistency. Encourages new developers to put icons and a descriptive message.
  • Is simple to read and less error prone.
  • Allows us to modify the library, eg adding the <a> tag so that default actions like right click work normally.
  • Allows us to set defaults, enforce typescript validation if needed, and generally control what library features are “enabled”.
  • Gives us a clear expansion point in the future — eg for multiple language support.
  • It is less flexible. There are some cases that it simply doesn’t cover.
  • There are occasionally awkward syntax changes that if “forces”. For example `data-cy=”data_cy”` for testing (`-` is changed to `_`). Most of these likely have a more elegant solution but the trade off of time to determine it is present.
  • Certain things become more difficult to pass around, for example `style`.
  • In theory it introduces a performance overhead. In reality most of this is so many calls deep that it’s not really relevant.
  • It creates more “risk” in that edits to it potentially have more far reaching effects. However — this is somewhat offset in that it forces us into a more rigorous testing mindset and makes bugs more apparent. It’s almost like a micro library dependency in a sense.

Vuex — a comment

What I have found success using Vuex:


Closing thoughts


Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

let vs const in JavaScript

const vs let

Create Blazing Fast Multi-Threading User Interfaces Outside of Node.js

GoNetwork Tutorial — Welcome to the first of a series of technical blog posts from GoNetwork.

Data Binding In Angular

Something to know about ECMAScript 6 (ES6)

Timing Events in JavaScript

GraphQL Authentication using OAuth & JSON Web Tokens


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anthony Sarkis

Anthony Sarkis


More from Medium

From Apollo to Urql — Part 1

How to Set up a Node.js Express Server for React

When to use Multi-Page Apps?

Illegal instruction (core dumped) on npm install, node V8 Fatal Memory error