...so, I joined the time-complexity cult.
I went through what most of the software engineers go through, choose between saving either space or time ๐ซ
Continuing the last post, this time I wanna go over my strategy. As the title highlights, I decided to go for time-complexity optimizations. Every software project at some point hafta make a decision when they wanna optimize their code. Often, software projects don't abide by the ...
2 birds, 1 stone
...principle. It's either Space or Time decision. You can't have both most of the time. Analyzing my case, space wasn't a problem. Because our "shared hosting" constraint had unlimited space but limited computing power. Thus-
Read along to find out how I am about to light it up, what about dynamic contents like comments and user authentication, etc...
How to save time?
Static generation to the rescue.
I know, I know, not that of a revolutionary. But, I have no other way. So I want to statically generate all the pages that the site requires ahead of time, wasting some time, to save some time. So, I decided to look for ways of doing it. It turns out there are many solutions, e.g.
Gatsby
Nunjucks
Jinja
Pug
But each didn't ring any bell.
template language | why not |
Gatsby | powered by React, that's the root cause anyway ๐คฆโโ๏ธ |
Nunjucks | execution at runtime, just like react, interferes with animations ๐ข |
jinja | couldn't figure out how to integrate, something for the next major version iteration |
pug | separate templating syntax, adds overhead for later-maintainers |
So, yeah, there are a lot, but they borrow from these and that's a no GO! Hence,
Build a template engine from scratch
Another template engine ๐ค
Even though I could have gone with already available stuff, I don't wanna stumble again along the road just like I did in past years. Experiences Hurt ๐ฅบ. So, I made up my mind to build a custom templating engine just for SPC's website. Now, have to think of how ๐คทโโ๏ธ and what it should do.
Here are my problems:
Complex templates to manually edit for each page required, e.g. factory index.html had like 230 tags excluding the head tag, just the body ๐คฏ
Later maintainers might be hauted by all the mess, hence suiciding themselves โ
If done manually, each blog post requires the writer to edit 15 tags, arrange photos, uploading to the server which the writer could spend writing and making ๐ posts
So, my template engine should
Compile the pages given and the writer's working area should be suitable for them
Extract common structures
Loops
Evaluate variables
And some bonuses like,
Conditional Compilation
I dunno, Ideas will come ๐
And, writers should be able to work GUI. With these in mind here's what I want to do.
Writers use Rich-Text Editors which can output html form text.
The output text is stored in a datastore
I prebuilt build a script that would run the template engine according to a
recipe
Recipe
say how to parse templates that may containincludes, vars
etc.Vars will be mapped from a provided datastore
Parsed templates will be organized abidding the
recipe
So now writers deal with GUI then a double-click on the script(thinking of .bat) that will generate the site. Then, another build will run (s)ftp solution on the out
dir and sync the server.
What about Miscellaneous stuff?
Images and other assets
One thing that our site is rich in is assets of photos. It's photos everywhere. My first plan was to host an S3 bucket with django. That poof. Then when I decided for nextjs I opted for Vercel's Image CDN which comes with Image Optimization. You know what happened! (If not then read the previous blog, When Django nextjs and Laravel failed me). Then with Laravel, I was gonna go with the local shared hosting, but the server was busy interpreting the post-request-stuffs, not responding for assets download for a while.
But this time around, I decided to go with a separate CDN service. Not just separate, but free of cost and with unlimited storage. Along with mimic-Vercel Image Optimizations. I will go over this in upcoming posts. That also optimized for time, not space ๐ณ
Build time
Static generation saves some time by doing work ahead of time. This is one drawback I see. We can borrow Incremental Compilation
. Thought to later, Birnadin ๐.
Dynamic bits of the site
Now that we are static, we can't utilize any dynamic behavior that might personalize the site for users. Our website has comments and an account feature. These sure require some server interaction in real-time. I am thinking about pseudo-react
like operation. I dunno right now, but I will figure it out. If you have any suggestions please leave a comment publicly or privately. Open to ideas.
Epilogue
That's it for today. Till next time, it's me the BE signing off. ๐
Cover Background by Philippe Donn and Einstein's image from Wikitext API