λ Lambdas, Make Sense with Cents

calvintam Aug 11, 2020

When I was in high school, I dreamt of the day where I can ditch my .co.nr and .tk domains for a proper .com, and finally get a proper web hosting. It was the days where we have to rely on wonky free hosts, that promises free (limited*) PHP and Mysql hosting for the low price of selling your soul. Essentially everyone is sharing that same bandwidth with the rest of the million accounts on the same dedicated server, hoping that the rest of those accounts are mainly hobbylists that are not running anything intense.

Those were the days, now developers are spoilt with choices when it comes to free server resources. Producing an MVP today does not require you to pay for anything, until you gain a significant traction.

So what exactly do developers have for choices when it comes to free hosting?

Here is some of the options on the top of my head:

Flat priced (Free)

• Heroku
• Now.sh
• Glitch

Static Web Hosting

• Github Pages
• Firebase
• Render
• AWS S3
• Glitch

I have placed glitch into the static hosting category, as recently they have changed their business model to limit server runtime, but hosting static webpages is unlimited and does not need a cold start.

Why are the options split to two categories?

Web hosting is no longer the same as we knew before, it has became more efficient. For a product MVP, it might boils down to preferences. But as you slowly move towards a solid version 1.0, these choices might be more important than you think.

Hosting on Heroku might allow you to do things the way you are used to, running expressjs with EJS. But let's try and explore new horizons, that will not only change the way you think about web development, but helps you save on costs and be scalable from day 1.

Designing with APIs in mind

These days, APIs are all the buzz. If you are a startup, you need to have APIs. So now we have something that was previously a good to have, to a must have. And what better ways to do so, than to incorporate APIs into your design right from the start.

The first step into doing so, is to split out your presentation layer from your server logic. That means, no more express, no more templates. Hmm, very interesting indeed.

Static Web Host + Lambdas

A new paradigm requires a new tech stack. By throwing out express and EJS, we bring in new libs, a JS UI framework (React/Vue/Svelte) and AWS Lambdas. So how does this work?

   Database

→JSON

    ExpressJS + EJS Template

→HTML

    Web DOM

The above is how it is being done traditionally, let's change things up a bit :

   Database + Lambda

→JSON

    JS UI Framework

→HTML

    Web DOM

The yellow blocks are your backend, green are on the client side. Off the bat, you can see that some responsibilities have shifted from the server to the client side.

This is a very interesting approach, and might make you a little uneasy at first glance. Sending data straight from the database to the client? Is that something we want to do?

Well, that's where AWS Lambda comes in, it's where you can write some minimal server code to filter only the data you want the client to see. Once your JSON data reaches the browser, utilize JS frameworks to parse the data and expose it in the UI.

Benefits

Well, it's not all that different you might say, it's only shifting some of the responsibilities from the server to the client. But getting on the serverless bandwagon could be beneficial in the long run, here's some of the things you might love :

Reduced Server Bandwidth Usage

As you are only sending JSON data most of the time to the client, you save on data sent. You will benefit even more by putting your HTML/CSS/JS files into S3 and a CDN. On a site with very high traffic, you can averagely save more than 80% bandwidth costs, with the addition of having fast load times and low downtimes.

App-like experience

Some people have gotten used to having an app like experience. By adopting static sites, your site only changes appearance on the parts that are displaying a different set of data. You can have smooth transitions and custom load screens that feels more 'app-like'.

Pay Only What You Use

This is something new in the serverless world, you only pay if someone visits your site. There's no need to run your server if there's no one on it. On average, the smallest instance costs $15/month. Similarly, average traffic for a small instance will cost almost nothing when ran on Lambda + S3 (Free tier eligible).

API readiness and Hybrid Apps

You get the biggest bang for your buck when you discover that the lambdas are also able to serve as APIs for your mobile app. If done right, your static websites could be easily transformed into a hybrid mobile app by using products such as Ionic's Capacitor.

Summary

There's so much to cover here that it wouldn't fit in the post, but hopefully it makes you think about your current tech stack. It doesn't have to be converted entirely, it could come in stages. But ideally your next project should have some of the elements mentioned here.

In future posts I will try to cover some of the aspects of creating a Lambda and accessing it from a JS UI framework. Until then, signing off for now.