Building a simple application with Node.js, Express and Tachyons

November 28, 2016

STS is an experimental web app that is designed and developed by Julien Vernet. Because the official tracking system lacks a good UX, it is extremely frustrating to use.

The goal of this experiment was to explore different technologies / framework, specifically:

  • Node.js: Platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications
  • Express: Node.js web application framework
  • EJS: A JavaScript templating
  • Tachyons: Modular CSS Toolkit

EJS Feedback

The last time I used Jade (recently renamed to Pug) I got annoyed. In my opinion, Jade sucks because:

  • The syntax is too concise, and it requires specific indentation
  • It's nearly impossible to differentiate HTML tags and variables

I switched to EJS because I am a HTML purist. I prefer writing HTML over Jade/Pug templates because it feels more natural, and I use a bunch of Sublime Text plugins that helps me write HTML fast.

Tachyons Feedback

While Bootstrap is one of my favorite front-end framework, I wanted to try something new. Tachyons is a great alternative as it addresses many of Bootstrap issues. Here are the main advantages of Tachyons:

  • Low CSS specificity
  • Built for scalability
  • Modular (Boostrap is also modular, especially when using SASS or LESS version)
  • Lightweight (71kb vs 118kb when minified)

It is a bit hard to use at first (because there are so many classes to learn) but I highly recommend giving it a shot.

Further reading

If you’re going to build a new component, or change a piece of UI in your app – what do you do? I don’t know anyone that reads all the available CSS in the app to see if there is something they can reuse.

Because functional CSS places the utmost importance on tiny, reusable classes, the resultant stylesheets are necessarily free of bloat, which makes for substantially smaller file sizes. This in turns gives us much faster transfer speeds, less time and processing spent on stylesheets, and most importantly, time and money saved on the part of the end user.

Tachyons is made from a collection of customizable CSS modules. True to its nature, its modules are self-contained and do not contain any complex dependencies, so it's easy (and safe) to customize.