This Week in Tometo (#03)

Wed Mar 18 2020 Written by  aun

Hi everyone! I hope you're all safe from the virus and hopefully not forced to work during these times. It's a bit of a turbulent atmosphere out in the world right now, but thankfully, work on Tometo has been progressing. I don't have anything visually interesting to show you this week, but I have some updates regardless:

Question and Answer system

The last weeks saw the first revision for implementing a Question and Answer system. After some discussion, we decided that we would rather walk the path that Miitomo walked down, and have this system as the "centerpiece" of Tometo. A normal social network where you can simply post statuses and reply to other statuses wouldn't really be fun — it would basically just be Twitter but with funny animated characters. Therefore, I've been working on implementing the backing structures for a kind of system that Miitomo had, where you get asked questions and can see other users' replies to the same questions.

Actually working on the revision was a boring task, because the work involved adding 3 extremely similar entities, plus a CRUD (Create Update Read Delete) structure for interacting with them via our API. But with this work done, we can move on to greener and more exciting pastures.

Rewriting the frontend

Another bigger thing is that I started rewriting our frontend with a different UI framework. I want to go a bit into detail as to my motivations here, and I'll try to keep it as jargon-free as possible.

Intermission: A "UI framework" can loosely be defined as something that makes the things you see on a website appear. When you have a lot of content on a website at a time, it's a good idea to have something that manages that content from the background — that's what a UI framework is most commonly used for.

There's a couple of reasons why I wanted to move away from Vue.js, our current UI framework:

  • Vue is not a small library. Our production builds were always over half a megabyte big, and half of that size accounted for Vue itself. The reason that this is a problem is because when you load Tometo, you need to download our client-side JavaScript code that contains the UI framework. The bigger that JavaScript code is in size, the longer it takes to load, and this only gets worse the worse your internet connection gets (some websites with a lot of JavaScript can take seconds to load on a mobile connection. That's what we want to avoid)
  • I find Vue's syntax to be unintuitive. It tried to complement existing HTML syntax so that it still looks like normal HTML, but I think it just ends up looking strange. For example, to conditionally render an element, you would write <elementname v-if="condition" /> instead of {#if condition}<elementname />{/if} like in other templating systems.
  • Vue's global store system (a way to keep certain variables and values the same when navigating website pages) is a bit too abstract for our needs. We already try to insert our own fixed to make it a bit simpler. We don't need half of the structure in this file, for example.

Thankfully, our frontend isn't complex to the point where it would be infeasible to rewrite parts of it. Neither are we completely redoing it from scratch, but we're reusing a bunch of the underlying logic, and just swapping out the UI framework. Our new framework of choice is called Svelte. It uses a fairly different approach to state management and template rendering that I'm not going to try and explain here, but so far, here's some of the benefits that I've observed during the refactor:

  • Our bundle size is small. A non-compressed bundle is about 50 kilobytes (keep in mind this doesn't include all of the features that our current frontend has, as I'm progressively reimplementing all of them)
  • Some files have halved in length, compare the login page in the old frontend and the new one.
  • I really like the way Svelte lets you write JavaScript!

This refactor isn't complete, as I said before, and the in-progress version is currently hosted on my private Git server: https://marisa.cloud/aun/tome-svelte

It'll probably take one more week until it's done. The good thing is that I've got lots of time to dedicate to it because of the virus pandemic!

I think that's about it for this week. Stay safe and make sure to care for your fellow human beings!

© 2019-2020 The Tometo Core team. Source