Designing a framework

By Ruud ()

When creating a website, there are several things one might focus on, such as the design of the website or SEO. There are a lot of commercial and open source solutions available for this, but in my experience these solutions all tend to fall short for simple websites. Either they are simple to use, but overly restrictive in what you can do, or they allow you to do everything you want, but are very complex to use.

A lot of modern web frameworks use the Model-View-Controller (MVC) architecture. If you use MVC, you have to set up a database, think which tables you need to use, create the models, create controllers to interact with the models. You also need to build a back office, because you probably don't want to manage your website directly in a database. In the end, for a simple website (such as the one you are looking at right now), this means a lot of programming, for very little benefit.

Alternatively, you could use a Content Management System (CMS). These tend to be a lot simpler to use. However, they also tend to be a lot more restrictive. If you want to have complete control over every aspect of your website, a CMS might be too restrictive in what you can and cannot do. With a CMS, simple tasks such as adding a third party script, often (although probably not always) means you have to install a plugin.

Another very simple solution would be to create your entire website in plain HTML. This way you have a lot of control, while avoiding the overhead of a database. However, if you choose this route, you will end up with a lot of static pages that require a lot of manual maintenance. For example, if you want to change a header, you have to change this header on every single page. It also means that, if you have some sort of index page, sitemap or feed, you have to manually add every new page. This solution may quickly become a lot of work, with high potential for mistakes.

When designing my website, I tried a lot of frameworks. I even designed a number of frameworks myself. However, each and every one left me unsatisfied. My goal is to build a website that is fast, highly customisable, and extremely easy to maintain. This is where Teensy comes in. Teensy is a web framework that does not contain Models or Controllers, but only uses views and middleware. Teensy is built on top of the Koa web framework and uses Nunjucks templates. When accessing a page, the request path is translated to a path within the views directory, which contains the Nunjucks templates. A Nunjucks template may optionally have some meta-data (encoded as YAML) at the top of the page, which is then made available to the template parser. Since YAML supports extending (through anchors and references), you can easily share data between templates in the meta.yml file.

While this might not sound like much, it turns out that this results in a very easy to use, easy to update, and highly customisable web framework. Nunjucks is similar to Jinja, and allows you to extend templates. Template inheritance is a very easy and natural way to organise your templates. Nunjucks uses file watchers to keep its caches up-to-date, so you can edit templates and see your changes immediatly, without having to restart your web server. If you need extra functionality, you can easily add some Koa middleware. Since Koa also allows you to use Express middleware (through the koa-connect package), you have access to a lot of existing middleware.

Teensy probably still has quite some room for improvement, but in its current state, I am really enjoying working with it. It's easy to create new content, without being bogged down by having to design database models or back offices. I can just edit templates in my favourite text editor, commit using git, push the changes to my web server, and I can see my changes on my website. And since templates are cached by Nunjucks, the end result is blazing fast. I am currently seeing response times of around 30 to 50 milliseconds.