Mutahhir Hayat Central

Introducing Spatis: A client server app / single page application in one

January 13, 2020

I like to make things, but of late I’m coming to hate the time it takes to build the boilerplate before I can even start.

Yes, there are built boilerplates (or generators) that I can use, and sure, there are guides that can be followed, but, every time I start with either of those, I’m looking for a boilerplate that has a slightly different configuration or following multiple guides because they each support slightly different things.

To fix this, I’ve tried building ‘yet another’ boilerplate, one that is tailored for my taste. It’s not very hard to build one, you just follow a few guides, borrow from a few boilerplates, and viola! However, there are downsides to doing this; the same downsides that come with following without understanding. Of course, I could also invest the time and figure out every single piece that I include in my boilerplate. That would be the reasonable approach.

Unfortunately, I don’t find that interesting. I feel that the plethora of boilerplates, generators and guides are just symptoms of the problem. Of late, static generators like Hugo, Gatsby etc. are gaining popularity because people want to build something and aren’t interested in the boilerplate required to get off the ground.

While projects like Gatsby and Hugo can be extended to create web applications, they’re optimized for generating static websites that may or may not consume external APIs. While allowing for easy to build static websites with smarts, and boutique, powerful web applications is useful, I feel there’s a certain kind of app that isn’t well represented in our ecosystem.

The easy to build, scale, non-focused-on-static, web app.

Yeah, I don’t know what it means either, but I have a general idea in my head and I’ll find out more as I start building it out. All I know is that it could be used to build apps I like to build when the weather’s just right and I have an idea gnawing on my brain. Apps where I don’t want to think about which server library to use, how to set up webpack just right, how to use lerna to have multiple apps in the same monorepo, etc. Apps like that.

So then, what is spatis? The goal (pipe dream?) is to write code like so:

import { Server } from "spatis";

const app = new Server();
const state = app.setState({
  name: "testing"
});

app.when("/", (state) => {
  const inputRef = Ref();

  return (<div>
    <p>Hello {name}</p>
    <p>Not your name? What's your name?</p>
    <p>
      <input type="text" value={state.name} ref={inputRef}/>
      <button onclick={() => state.update("name", inputRef.value)}>Update</button>
    </p>
  </div>);
});

What’s going on here? The above code, right now, doesn’t work. The more interesting question is what should it do eventually?

In my head, the above snippet should be enough to create a web application that serves React rendered HTML when the browser access the application root (’/’). Now, any react-based static website generator also does that part. The interesting thing is the ‘state’.

If you look closely, once we publish the react component to the browser, the ‘state’ variable would point to nothing. The state variable was part of the server, and now that we’re in the browser, it’s gone!

That’s the part I’m most interested in building. Writing the above code seems like you’re writing your application as a client-server application, but once it is served to the browser, spatis works in the background to make the application continue to work as a single page application.

I hope I’ve answered some part of the ‘why?’, and I don’t fully know the ‘how?’, heck! I barely know the ‘if?’, but I’m hoping I’ll find out as I continue to build spatis.


Mutahhir Hayat

Written by Mutahhir Hayat.
Regurgitator of words
Twitter?