When JAM Stack isn't enough


25 June, 2020

In the recent years JAM stack has really been going around with lots of themes and extensions, and math and what not. Lets see what JAM stack is all about

JAM Stack

JAM stack is " Javascript, API, Markdown" stack, its a process which has amazing advantages of all sorts. In a JAM stack a developer writes the content of the page in markdown, which is converted to html and it is then enhanced with JS and other things.

JAM stack makes a lot of things simple for the content writers, so that they can concentrate on writing content and not worry about styling and html all the time.

Limitations of JAM Stack

When using a JAM Stack like jekyll, Nuxt etc... You can select between themes and all these themes when combines with Markdown give a lot of possibility, and the usual blogger (with linear text content) with be content with it, and if that is all you are looking for by all means this post isn't for you, go rock with your blog, comes with limitations as to what you can do.

I cannot tell how many times I have though about writing my own Markdown compiler and then back out of it and the written html directly to get to the dead line.

The simple truth is, we all do not have the time to write a new compiler for every project we start. That's why I choose PATS stack

PATS Stack

PATS Stack is, "Pug API Typescript SASS stack", Yeah i know terrible name. But it give you the freedom needed to make something custom.

In a JAM stack application you "cannot" do something like this:

This is the left half Bunch of text

This is the right half Bunch of text

in a PATS stack this is as easy as
div.row
  p.col-5
    |This is the left half
    |Bunch of text
  p.col-5
    |This is the right half
    |Bunch of text

People with experience in bootstrap and pug will notice that this is written in pug and uses bootstrap.

A PATS stack uses these technologies to make writing easier while also not loosing control of the styling, A stack with advantages of a JAM stack and flexibility you get when writing html and css.

Why PATS?

It has all the advantages of the the JAM stack, security, speed, lower cost ,developer experience and in addition to that Flexibility.

Okay, I'm sold What now? Where do I start?

1. PUG

Just how you wrote Markdown in a JAM stack we'll write pug in PATS

PUG is just a step above Markdown and a step below good old html5.

If you have done even basic html you should be abel to get in pace with pug in an evening or 2.

2. API

You can talk with APIs just the way you did in JAM, nothing new here.

3. Typescript

There no need to write Typescript, javascript also works, but didnt wanna screwup the name so...

Mostly to run other libraries already written.

4. SCSS

Not necessary to learn, you can just write your good old css, and things will be fine.

Philosophy

Just like JAM stack TAPS stack isn't about the technologies used, it's about how it's written, meaning, you write a template and styling an other nice things once for the whole html page, but when done with that, you can concentrate on writing the main stuff, but at the same time you are not stuck with that, whenever you want you can start using classes and other fancy things that you made.

Okay, show me an example.

Here this is the source file for this blog post. That is all that i had to In terms of redability it's as readable as Markdown (Personal Opinion Alert!!!).

In all honesty there is also a _post_base.pug which has some styling and things, but when writing this post I didn't even think about the file till now, Point being it was written only once and I've been happy ever since.

Cool now give me a Framework so I can start on this already

That's the catch, PATS stack is something I though about a while back theres no official "Framework" for a PATS stack, yet.

But after stealing code from people (legally), I have come up with a node app thingy in which you can start.

If this gets attention I might work on making this into a full blown Framework, which you could just npm install. So share this page ;)

Complete Example

This uses the above mentioned repository.