Subscribe to Feed

The Tech Stack

Jacob Arriola

This blog was a result of our internal hackathon, known as ShakeUPalooza. Part of the motivation in building the blog was to explore some new technology within the JavaScript space. It was a great experience because our team got to experiment with tools that are outside the scope of what we use internally.

As such, our Tomo Engineering blog tech stack is as follows:

  1. Authoring: markdown
  2. Site builder: Astro
  3. Components: Svelte
  4. CSS - scoped via Svelte and Astro

Authoring: Markdown

We chose markdown as the authoring experince for simplicity. As of the initial launch, the majority of the authors are engineers, so there isn’t a learning curve to authoring an entry. This also eliminates the need to integrate a headless CMS, which cut down our implementation. As we grow, we may consider integrating a CMS such as Notion or Strapi to better scale and organize entries since markdown files can start to get a bit challenging to organize after a certain amount.

Site Builder: Astro

We decided to use Astro as the static site generation tool to give its value proposition a try. Its selling points are performance, developer experience (DX) and flexibility. And it delivered just that.

The DX is fantastic. It ships with all of the things you’d expect a framework should have: a local server, hot module reloading, and configuration. For a blog, it has first class support for things like markdown, RSS and sitemaps. In terms of performance, the build process removes all of the JavaScript, so a user isn’t forced to download an unnecessary JS bundle.

One interesting feature of Astro is their concept of BYOF (bring your own framework). Unlike previous static site generators (Jekyll, Hugo, Gatsby, Next), you don’t have to stick to conventions of what JavaScript framework you should use. It supports all of the major JavaScript frameworks, so the team can focus on what best suits the project.

Read more about Astro via their intro post: https://astro.build/blog/introducing-astro/

JavaScript Framework: Svelte

For the components, we decided to give Svelte a shot. No reason behind this other than it’s the new kid on the block and gets great developer reviews. All of our work internally at Tomo is with React; despite this, there wasn’t a steep learning curve with Svelte, especially because Astro handled all of the boilercode in terms of tooling.

Biggest takeaways from building out some simple components are that if you’re used to Vue, you’ll feel very much at home. The Svelte files are single component structure in that the html, JavaScript and CSS are all in the same file.

Read more about Svelte via their Svelte 3 announcement post.

Conclusion

The JavaScript landscape is very competitive today. And this is great in terms of pushing the limit with regards to developer experience and performance for users. The learning curve to get up and running felt really low, which allowed us to ship this blog in just a few days. We invite you to give these tools a try!