Why building Tent makes sense

In case you don’t know, ⛺ Tent is a javascript library that allows you to add interactivity to any website without much effort. I encourage you to take a look at the Guide.

Reason

My primary reason for devoting time to this project is that I think the meta frameworks for building web apps today are way to complex. They can be hard to understand if you haven’t been around long enough, and there are usually a lot of setup required to get started.

I wanted to build a jsx-free, super-lightweight and zero-dependency library that could do most of the stuff meta frameworks can, but in a much smaller package and without inventing anything new. I don’t want anything crazy to happen during a build step, and I don’t want to learn some new obscure HTML syntax. I just want to write javascript.

Who is it for?

To begin with, it was a project just for me. As the library started maturing I decided to make the repository public, so that anyone who shared the same frustrations and/or ideas about how the web should be built could particiate in the journey.

I believe that Tent is a good place to start as a new frontend developer. The reasons for that is that it is easy to setup, understand and get started with. Most importantly it is regular javascript, and it forces you to learn how javascript works. For a majority of the meta frameworks, developers have taught that framework, and not javascript as the programming language. I believe that developers should learn the language before diving into big complex frameworks.

An example

This is a small example of a button that increments a count on each click. It also demonstrates how to add attributes to elements. Some properties in the attributes object are treated as assignments (=), and some are added as attributes (setAttribute).

mount(document.body, {
  state: {count: 0},
  view: ({state}) => button(`Clicked ${state.count} times`, {
    // assignment
    onclick: () => state.count++,
    // setAttribute()
    className: state.count > 1 ? 'high' : 'low',
  }),
})

// => <button class="low">Clicked 0 times</button>
// => <button class="low">Clicked 1 times</button>
// => <button class="high">Clicked 2 times</button>

Join the fun

If you would like to get involved in any way, feel free to do so over at github. You can also send me an email.

Thank you!

It means a lot to me that you spend your time reading this blog post. Check back later, or subscribe to the rss, for more. Enjoy!