Four ways to build web apps

https://tomhummel.com/posts/four-web-apps/

by tphummel • 3 years ago

307 119 3 years ago

dgb237• 3 years ago

This is a nice little overview that is not afraid of being opinionated.

It leaves out some of the affordances that CF Pages, Vercel and Netlify provide. (Discussed as option 1 in the article). Those are of course moving targets that provide more stuff every few months.

glutamate7• 3 years ago

So sad. So the choice is closed source platform lock-in, a single Linux server with SQLite as database, or kubernetes?

-an old man yelling at the cloud.

paulgb• 3 years ago

Option #4 will give you autoscaling without having to deal with k8s.

IIRC all of the options listed still involve writing a Dockerfile, though. Render.com, Cyclic.sh, and Railway.app are also in that category(ish) but will automate the build more like Heroku. (this is off the top of my head, please correct if I misremembered anything)

glutamate7• 3 years ago

I quite like Docker. It solves the "it works on my machine" problem by being reproducible-enough. And I can still run it locally.

My argument is not against innovation but against mindshare capture by platform capitalism.

jjtheblunt• 3 years ago

fly.io can construct the dockerfile and shenanigans for your source code tree, last i saw.

mpeg• 3 years ago

Cloudflare open sourced workerd, the workers runtime. [0]

Of course there is more to the platform than just that, but your code isn’t exactly unportable anyway.

[0] https://blog.cloudflare.com/workerd-open-source-workers-runt...

psyklic• 3 years ago

Not sure why the author insists on "exactly one" server. You can easily also host a SQL server in the same datacenter (or even run a SQL server on the same server!). This was how most web apps were built before the other options existed.

It is trendy nowadays to just use SQLite for a single server claiming speed advantages, but there are disadvantages as well. In my last startup, our SQL server was not directly connected to the Internet, isolating it from potential hackers.

selcuka4• 3 years ago

Not sure why the author insists on "exactly one" server.

I believe the assumption is, if you need more than one server, using containers (option #4) is a better solution in general. Obviously this is not exactly true for your 1 server for app, 1 server for SQL server scenario, but might make sense for most setups.

acomjean• 3 years ago

In my experience this is pretty common for databases only to be accessed via local host. We had our office ip whitelisted, but now some database clients (datgrip, dbeaver…) can ssh tunnel to access. Plus phpmyadmin is still no uncommon..

bertjk• 3 years ago

Eliminate the need to manage and inject API tokens into containers and servers and instead authorize containers and servers to perform those operations.

What does this look like in practice? Can someone provide example scenarios that this is describing?

linux2647• 3 years ago

Example: you don’t need AWS keys to write to SQS because the EC2 instance has an identity (“principal”) applied to it, and SQS has been configured trust requests from said identity for some set of queues. It’s typically cloud-specific in the implementation and the resources being requested

acedTrex• 3 years ago

So really we are just recreating windows auth

heleninboodler• 3 years ago

This. To state it a slightly different way, instead of "create me an instance and inject the following AWS credentials in it" and then having the application running on that instance know where to look to get the AWS credentials, you go "create me an instance and assign it an IAM Role of 'webserver'" and then you write access policy that says "any of my instances with the role 'webserver' can access this bucket/database/queue." The magic is your app uses the SDK to say "assume the 'webserver' role" and it does this under the covers by going out and finding ephemeral keys that AWS injects into your instance via the metadata service. No shared keys == goodness.

whartung• 3 years ago

Do you know how they make this work?

margorczynski• 3 years ago

Well there's also another, more oldschool, option - distribution via floppies and CDs. Lot of good zines were distributed this way. Just joking.

On a more serious note - it is good to be aware and track how much we are tied to a given service. Because we might end up being taken hostage by the Cloud provider who can extort us for a long time before we manage to migrate.

glutamate7• 3 years ago

you could also just `apt install nginx docker.io postgresql` then `docker --restart=always ...`

thepasswordis• 3 years ago

Blog posts like this always strike me as…weird.

This seems like “how to build a web app for a very tiny subset of people who don’t want to learn about deploying web apps”.

Maybe I’m in a bubble? It seems like 99% of the people I know actually running profitable companies have an infrastructure that roughly matches to “some Linux server somewhere”, and then upward from there it all just moves to AWS/azure, but it’s still just some Linux machines maybe with a load balancer in front of them.

If you’re writing software and don’t seem covered by this blog post, don’t feel like you’re out of the loop on something. I think this author is just writing about the subset of the ways that he knows about.

I mean honestly “HUGO static sites”…how about a directory of html files hosted by nginx or Apache?

dgb237• 3 years ago

I mean honestly “HUGO static sites”…how about a directory of html files hosted by nginx or Apache?

Whether you put HTML files on the mentioned services or have a build step with a static site generator is not the point.

Where does your nginx server run, how do you keep it up and running, how you do provision it, how do your files end up on the server?

You can write a bunch of shell scripts and do all of this on a cheap VM for 5 bucks. Or you can get it for free on some of these services with git integration, global caching, web hooks, previews, cheap storage, image optimization etc. You get unlimited or at least a lot of sites and it's all automatic. On some you can even just drag and drop a directory into their web interface and the website is there in a couple of seconds.

It's basically a different layer of abstraction that's free/cheap and works nicely for simple use cases or as a specialized part of a more complex deployment architecture.

I have personally recommended netlify, cloudflare etc. to people who have the technical ability to write HTML/CSS or use a static site generator. Those things are very easy to use and carry around less risk than having to provision and configure a web server yourself.

satvikpendem2• 3 years ago

Free, for now. Once the higher interest rate environment becomes more normalized, I would not be surprised to see many services become paid.

hathawsh2• 3 years ago

I read it differently. It looks like a good outline of 4 basic approaches to building and hosting web sites. I would word them as:

1. Stateless static site. There is a variety of ways to build it (such as React or Svelte or purely by hand) and a variety of ways to host it (such as a directory of HTML files hosted by nginx).

2. Function services like Cloudflare workers, AWS Lambda, Google Cloud Functions, Azure Functions, etc. This is a way to store state without having to manage servers.

3. Single conventional Linux server.

4. Distributed containers.

All web developers should familiarize themselves with these 4 basic approaches and prefer them in approximately the order given. It's good to avoid jumping to distributed containers if you can get away with functions, a single Linux server, or even static HTML. It's also important to move down the list as the app grows rather than reinvent K8s.

crabmusket3• 3 years ago

I can't have my database on a separate Linux box? Seems odd to insist on either precisely one server or go straight to container orchestration.

That said, I agree with you about the other generalisations!

EDIT: actually, where do PaaSes fit into this taxomony? I'd argue that level 2 is actually the PaaS level. You might choose an edge PaaS (Workers), distributed (Fly.io), or centralised (Elastic Beanstalk) depending on your needs. But ultimately this level is: "I write code, you run it". FaaSes are a subset of PaaS providers which focus on stateless models, but there's no reason you can't combine FaaS for your code with a managed database offering.

tbeseda• 3 years ago

This is a much better outline of the article than the article's own table of contents. Makes much more sense, even if it's still incredibly narrow in scope.

tony-allan• 3 years ago

It's not obvious but you can host an entire website or simple web app on AWS Lambda (as simple as a single function).

indymike• 3 years ago

This is much better than the article.

flippinburgers2• 3 years ago

I agree with you here. I find that certain kinds of "hosted" services have their own home grown techno-babble and they rely on the ignorance of their potential customers to lure someone in. They sound like they are hiding some insanity level complexity made easy for consumption... but really all one needs is to run a single linux instance + nginx + some files.

Scale up from there as required.

rexreed2• 3 years ago

Why not PHP on a shared or dedicated hosted server?

alexklarjr• 3 years ago

and keep data on actual SQL server? No thanks, only boomers do it.

0x0733• 3 years ago

Mongodb works for every problem no need for any old database server.

rexreed2• 3 years ago

I use PHP with SQLite just fine. In fact, been doing it since before the non-boomers picked it up.

dgb237• 3 years ago

I wouldn't recommend PHP to anyone who isn't already invested/emerged in the language.

Wordpress for blogs or websites on a shared host with automatic updates and a few select plugins? Yes. Laravel or Symphony for applications? Ok.

But just PHP has way too many footguns and doesn't provide nearly enough affordances to make them worth it IMO. Plus it's a language that breaks backwards compatibility way too often, stops support for older versions. You need some sort of protection layer that shields you from all of this. So you might end up with something that is way more complex and slow than it needs to be.

jraph2• 3 years ago

Plus it's a language that breaks backwards compatibility way too often

Do you have examples of such compatibility breakages?

I noticed Nextcloud and WordPress both seem to lag behind the last version of PHP a bit. But on the other hand I also see such thing in the Java World where people are stuck on Java 8 or 11, when backward compatibility is one of the strength of the language.

I also have PHP scripts I wrote for PHP 5.1 and still work unchanged on PHP 8.2, 12 years later. Well, I had to fix some warnings for completely dumb things I did like putting mandatory arguments after optional arguments and I'm not sure why it was working, but the upgrades have been painless for me.

Plus, I find the latest PHP version quite pleasant, with the type annotation and other new features of the language, and the execution model where your app doesn't run all the time, its php files are just called by the web server (though php-fpm). No Tomcat or uWSI or unicorn and virtualenvs to manage.

But I guess I'm a person who is "already invested/emerged in the language" :-)

(I'm also invested in Python, Java and Node.js though)

unity1001• 3 years ago

Plus it's a language that breaks backwards compatibility way too often

I havent ever had any PHP code I wrote get broken by a PHP update in over 20 years.

PHP is still the simplest way to get any API going.

kristopolous• 3 years ago

Comparatively speaking PHP has likely the most backwards compatibility with respect to actual wall time when compared with other common options.

It has many tools for the competent and the incompetent.

I'm sure your personal experience sucked, just like many people's personal experience with Java.

But let's not conflate the output of some set of practitioners with the design of the language. The fact that php can be so accommodating to the incompetent can be seen as a virtue. Dumpster fire makers can set things ablaze with any tool and the avalanches of trash PHP code are endless. It is what it is.

FinalBriefing2• 3 years ago

Gotta disagree with you here. Modern PHP is quite great, especially when paired with Laravel or Symphony. They had to introduce breaking changes to move the language forward, but I don't recall anything huge after 7.0 or so. There's a huge ecosystem of packages to do just about anything web-related, and the documentation and community resources are way better than anything I've seen with say, Java/Spring.

Laravel is a great way for a small team to get an application up and running quickly and really shouldn't be overlooked.

kichimi• 3 years ago

I'm sorry but this is a really ill informed comment, and nothing said here is actually true. You're going to need to spend some substantial time to back up what you've said.

FinalBriefing2• 3 years ago

I think because that's still very similar to a dedicated server.

arcturus17• 3 years ago

I could do this, or I could just throw good old React or a derivative framework at whatever UI I have to build and be done with it.

omarfarooq• 3 years ago

How does that solve for backend? This mentions web apps.

bryancoxwell• 3 years ago

A UI is not a web app.

jraph2• 3 years ago

and be done with it

That's how I feel when I write a bunch of HTML and CSS files and send this to prod.

Less so with an app written with a JS framework of which I now need to maintain the dependencies.

flippinburgers2• 3 years ago

His ordering is all wrong. Lambda-like websites are significantly more difficult to program and manage than a monolithic linux server. Graduating from the lambda to the linux server? No thanks.

fijiaarone2• 3 years ago

He’s talking about serverless functions for a contact form.

siquick• 3 years ago

Where would you host a container based Node API that connects to a non-public Postgres database?

auspex• 3 years ago

AWS Fargate connecting to RDS

notmars• 3 years ago

Google CloudRun with direct serverless VPC access of a CloudSQL instance with no public IPs

alex_suzuki• 3 years ago

I use AWS AppRunner with Docker. It understands Node.js natively also, I think.

webjunkie• 3 years ago

Just if you're interested in AWS: look into AWS Copilot CLI to get started really fast with getting a container up (and have a database with it).

vcryan• 3 years ago

I agree with this, except I would take 3 out of the list.

2h2• 3 years ago

3 is the most attractive option to me. I have a tiny localhost server I wrote, and have been looking for a simple way to deploy

DangitBobby2• 3 years ago

Consider creating a tunnel with Cloudflare Argo (think more sophisticated ngrok). I just finished deploying a toy app from a local machine about 15 minutes ago.

selcuka4• 3 years ago

I guess the title should have been "Four Ways to Deploy Web Apps", not "build" them. Granted, option #2 (functions) is a different beast, but all others can be built the same way but deployed differently. For example

- You can develop a static (Hugo) web site then deploy it on Fly.io using containers.

- You can develop a container based web site, then deploy it on a bare Linux server (k8s is not necessary for a few containers).

toastal• 3 years ago

Skip the containers and have it all be reproducible with Nix/Guix

oldstrangers• 3 years ago

5th option:

Webflow, airtable, whalesync.

I could recreate one of his examples (https://oldgames.win/) in 10-20 minutes off just a CSV file... And I could use something like https://simplescraper.io/ to scrape that data + find imagery.

xupybd• 3 years ago

That would make a great HN post!

asar• 3 years ago

Yea for like $100/m. Or instead you have a local db and use a static site generator to host for free.

monroewalker• 3 years ago

Surprised not to see Render.com listed under option 4 despite that being an option discussed often here with comparable simplicity of deployment to Heroku

tnzk• 3 years ago

I love Render, have been using it heavily personally as well as professionally. I like it for fulfilling my demands efficiently. But I sometimes find the name is a pain point, it is really hard to search especially combined with some generic words. It seems fixed now but I remember at some point of time even "render status" wouldn't lead me to the right place.

anurag• 3 years ago

It's getting better every day!

graycat• 3 years ago

My Web site is designed and programmed and runs as intended. I was delayed by independent events, beat those back, and now am collecting some initial data.

But from the original post (OP) about "Four Ways" here, apparently I made a really big mistake, nope several biggies: I wrote the software using Windows 7 Professional, Visual Basic .NET, ASP.NET, ADO.NET, and SQL Server. What a user receives is old HTML and some CSS with little, maybe no, JavaScript. I didn't write any JavaScript at all, but ASP.NET wrote a little for me.

At one point, I wanted a key-value store so used two instances of one of the .NET collection classes instead of Redis. That was a biggie mistake?

So, apparently my work is none of the "Four Ways" of the OP. Biggie mistakes, right???

I don't get it: Looks to me like for some decades now, all around the world, people have been able to build (program, develop, etc.) Web sites using Windows 7, .NET, SQL Server.

E.g., as I recall, Markus Frind developed a Web site using those tools, had the usage grow, ..., and sold the site for $500+ million. He did something wrong?

Now there are some rules I don't know about, rules that say I must just junk my code, 100,000 lines of typing, and start over?????

Those "Four Ways", they include something for my use of collection classes as simple versions of Redis? Or they include Redis?

Oh, at it's core, my Web site has some original applied math -- those "Four Ways" have that already?

I didn't get the memo that I can't use Windows 7, .NET, and SQL Server!!!

What am I supposed to do, use better than Windows 7 Professional, .NET, SQL Server, and my applied math code????

arsome• 3 years ago

Learning dozens specific cloud services and shelling out money everywhere I go is way less appealing to me than buying a cheap dedicated server and firing up exactly what I need.

It'll take me far longer to figure out what FarGate and Cloudflare Pages and all these are and infinitely longer to keep up with the latest and greatest because it keeps changing constantly. And even once I get it, I'll have very limited control or understanding of my stack, and migration? I'm screwed. I'm not interested in playing games like that.

nginx is comparatively simple, run it, it serves. Config is easy, learn it once, run it anywhere, it doesn't get a dozen new features and breaking changes every month, just does its job.

I guess I'd just rather understand the real underlying technologies than some crappy commercial wrapper for them that will differ every time someone tries to rip me off.

nindalf• 3 years ago

For what it’s worth, there isn’t much to learn with cloudflare pages. You grant it Oauth access to a particular repo, it builds master and serves the output directory. Only thing you specify is the build command and the output directory. For example “hugo build”/“npm run build” and directory “out/“.

I use it for a few reasons. I like that it’s free and the hosting of the static content is at the edge. They also take care of some things automatically, like compressing the assets once at build time and serving them with the right headers.

I don’t think this is unique. I believe netlify and others have similar offerings. These providers are excellent for the use case of serving static content at low latency and low cost.

pantulis• 3 years ago

That's the "Linux Server Singleton" pattern from the FA, isn't it? I find it surprising that it's in 3rd position. While SSG looks simple enough to merit the first position, going with the Cloudflare serverless proposition as the next step for beginners feels strange to me. I think you would be able to "graduate" to serverless-edge functions after you grok the traditional web client/server approach, not before.

ZephyrBlu4• 3 years ago

1) Almost all of these services have generous free tiers. Even if you're running a relatively high traffic site your bill will be practically $0.

2) These technologies are stable and usually not that complicated. You are missing out on a lot of productivity by not looking into them.

Understanding the "real underlying technologies" is a myth. The "underlying technologies" are constantly changing, unless you are using an extremely outdated stack: https://www.youtube.com/live/hWjT_OOBdOc?feature=share.

glutamate7• 3 years ago

The "underlying technologies" are constantly changing, unless you are using an extremely outdated stack

So will also constantly change their behaviour in the edge cases. Thank you for giving me another reason for not using that crap. I'll stick with my extremely outdated stack.

cbzoiav3• 3 years ago

Your link is a guy saying people get so good with the old technologies that there is no point trying to compete with them. That only happens if they don't change much...

If you time traveled someone from a decade ago that knows how to configure an Apache or NGinx server to today they would likely still be able to. It may not follow latest best practice, but at worst they'll use something retired, have to google it and be up and running in minutes.

Same with Spring/Java or .NET/ASP.NET Web API.

And you can still run a VPS or container that can handle significant traffic for free on many of the cloud platforms + migrating it is much much simpler.

d-z-m• 3 years ago

There is a difference in abstraction between hooking API Gateway to a Lambda function, and writing and deploying an API on a Linux VM.

One is closer to the metal, so to speak, and provides a better basis for understanding how these cloud services (Lambda, etc) actually work behind the scenes. In this case, understanding the underlying technologies is not a myth.

sebazzz2• 3 years ago

Almost all of these services have generous free tiers. Even if you're running a relatively high traffic site your bill will be practically $0.

That is what gets you hooked.

nicbou2• 3 years ago

Nginx is not relatively simple. It's not easy. It's an unintuitive, poorly documented minefield.

I agree with you in principle, but in practice mthese services replace dozens of hours of banging your head against software that's one misstep from blowing your legs clean off.

Sometimes, you have better things to do than tweaking nginx configs using the average of a dozen tutorials and docs that might as well be written in middle English.

I don't have better things to do, which is why I bothered. I'm not sure if it was really worth it. Cloudflare took 5 minutes to set up.

omnibrain• 3 years ago

Nginx is not relatively simple. It's not easy. It's an unintuitive, poorly documented minefield.

And that's why I use Caddy.

joshmanders• 3 years ago

The premise that OP states isn't that Cloudflare is easier, but that when that one misstep happens and attempts to blow your legs clean off, you at least are in control of the environment and can debug/fix what's going on.

Not so easy on these platforms.

jefurii2• 3 years ago

Nginx is not relatively simple.

Sure it is, if your needs are simple and you follow a tutorial and don't just randomly spam stuff into your config files. Nginx can get really really complicated but it doesn't have to.

mthese services replace dozens of hours of banging your head against software that's one misstep from blowing your legs clean off.

Yes, you can definitely spend hours figuring out Nginx, but you can shoot your foot off with a PAAS just as easily and at least Nginx is a technology that you can use in many different situations. It's definitely worth learning a tool like that, versus a commercial service where you play in a sandbox and they can jack up the price or change the rules at any time.

This is written as a long-time web developer and sysadmin. A lot of comments like the above seem to be written to try to scare younger devs away from standard tools and into the arms of PAAS vendors.

chr15m• 3 years ago

If you want the best of both worlds install Dokku or Piku. You get a PaaS-like experience on your own VPS.

kenmorechalfant• 3 years ago

Sorry, but this advice just sounds really out of date. How is "a cheap server" ever cheaper than free? I don't think you understand just how generous and simple the free static hosting CDNs are. NGINX is fine but it's absolutely not simpler than saying "hey Cloudflare, serve my main branch at this URL" and then it does all the rest automatically.

adammarples• 3 years ago

Disagree. Fargate is very simple and as far as I know has not changed much in years. Give it a docker image, watch it go. Want to leave? It's literally a dockerfile, take it and run it elsewhere.

selcuka4• 3 years ago

It'll take me far longer to figure out what FarGate and Cloudflare Pages and all these are and infinitely longer to keep up with the latest and greatest because it keeps changing constantly.

First, Fargate and CloudFlare Pages are completely different things. Fargate is "serverless" Kubernetes while Pages is just static hosting (if you don't count workers).

While you have a point about the former, you can't beat CF Pages (or Netlify, or Vercel, or any other modern static hosting system) in simplicity. You just push your changes to your own Github repo and it gets automagically deployed. It is also free up to the point your cheap dedicated can handle. Try it and you will be pleasantly surprised.

dzink• 3 years ago

Why recommend lock-in vendors when there are better options in between? There was no mention of Heroku which is easy and scalable.

Hugo is wonderful, until a deployment bug or misconfiguration exposes all of your server settings in a page that should be serving a 404 instead. Wordpress, Hugo and others also get constant attacks from hackers who can exploit each bug found on thousands of sites all at once.

Go has fantastic server examples and plenty of starter templates you can use to build your own server, and deploy to Heroku and scale to millions of users far cheaper in engineering and financial terms.

Redsquare• 3 years ago

Heroku is on its knees

tbran• 3 years ago

Uh, I think you are confused about Hugo unless I'm missing something.

It's a static site generator and is nothing like Wordpress. I've run Hugo sites behind nginx, caddy, and netlify with nary a problem.

Swalden123• 3 years ago

Seems overly complicated.

Easier way > HTML + CSS + Javascript (vanilla or framework) + Server side language of choice.

Deploying is not building.

sophiabits• 3 years ago

A particular application of #2 which works well as an extension of #3 is to have your workers implement a lightweight backend-for-frontend layer in between your frontend and more traditional API

This approach works pretty well when you have a pre-existing API and need to, say, minimize # of round trips to fetch data without wanting to couple your frontend(s)<->backend too tightly.

zoomzoom• 3 years ago

In bucket number four, there’s also the option of a PaaS experience in your own cloud. Of course there are always trade-offs on control and complexity, but if you want to deploy to fargate or Google Cloud Run, without getting bogged down in writing pipelines and infra as code, and you want to get the Vercel-level developer experience that we all are getting used to - check out this category of tools. Including one where I’m a cofounder - withcoherence.com!

Feel free to ping hn@withcoherence.com if we can answer any questions or help you get running…

techaqua• 3 years ago

0th way: php scripts on shared web hosting. it still exists.

coolhand2120• 3 years ago

Another option is to use S3 + Cloudfront + SPA with your services running as web socket lambdas.

Four ways to build web apps

Related Stories