When you first start programming it can be difficult to go from the simple tutorial to a full scale application. I often find when interviewing frontend developers that they have very little knowledge of what goes into hosting the frontend or how everything fits together.
So I thought it would be worth covering some main methods for hosting web applications and how they are typically structured.
1. Three-Tier Split #
This is my preferred approach for structuring web applications, especially for small personal projects. It is also very good if you have dedicated teams for frontend and backend.
The frontend is typically written in something like React, Vue, Svelte or Angular. These are usually Single Page Applications (SPA) which consist of a single HTML file where the application is rendered with JavaScript. As the frontend is static and everything is rendered in the browser it can be hosted really cheaply (or free) on something like Netlify, Vercel, an S3 bucket or even GitHub pages.
The backend API in these cases is often written in a different language like C# or Rust. Although it doesn't have to be. I like this separation as it allows you test the backend separately, as well as use the API for other clients like a mobile app.
The third tier is the database. I generally pick a relational database like PostgresSQL or MySQL when I am building out a web app. You can use a NoSQL database if you wish, you just need to be a bit more conscious of the access patterns of your application.
2. Server-Side Frontend Approach #
Another good approach is the server-side web app. This is very similar to the previous approach except the web app renders the pages server-side and delivers the HTML to the client. Further requests can either just deliver the data or can re-render the page. Hosting a server side application is a bit more effort and will definitely cost you more.
As with the first option there is still a backend API and database that the frontend interacts with.
In this case though instead of the client's browser calling the API to retrieve data it is the frontend server-side application that calls the API. This allows you to have the API hidden behind your VPN and only the frontend application has access to it.
3. The Monolithic Approach #
The last approach is the “All-in-One” approach where the server side frontend application also hosts the backend and talks directly to the database. This is the simplest approach but also leads to the most coupling between frontend and backend.
You have a number of options when it comes to writing an application like this such as PHP (think WordPress application), Ruby on Rails, Django or even C#'s Blazor.
It can be easier to get started with this approach, but you might find it harder to maintain as the project grows. If you are working for a company then this approach can make it difficult if you need to hire frontend developers in the future.
❤️ Picks of the Week #
📝 Article — The FizzBuzz that did not get me the job — This is a great example where restrictive interview techniques can actually disqualify great candidates. This answer to the FizzBuzz question is ingenious.
📝 Article — Using generative AI as part of historical research: three case studies — This is a great use of AI. It would be interesting to see if I can get a local running AI to parse my handwritten notes. Unfortunately my handwriting is often less legible than these ancient texts.
📝 Article — A phishing attack involving g.co, Google's URL shortener — It is always fascinating to see how these attacks are done so you can be a bit more vigilant should you come across one.
📝 Article — Build It Yourself — When I first started writing code my applications had zero dependencies. Over the years this has got harder to do, and now I dread to think of the number of dependencies my applications have especially if you include their dependencies. It is definitely quicker just to pull in a library, but you will learn more implementing it yourself.
🎨 CSS — cs16.css — I spent quite a lot of time playing Counter Strike 1.6 when I was a teenager. I wasn't very good, but this AI does bring back memories. If you are looking for some nostalgia check these out too:
🛠️ Tool — Raycast Focus works really well — Another tool to help you beat procrastination. I haven't tried it, but it seems to work for Dave.
📝 Article — Every HTML Element — It is nice to see all the things you can do natively with just HTML. We often jump to implementing something with JavaScript when a native component probably would have worked.
📝 Article — Explainer: What's r1 and everything else? — Unless you have been avoiding tech news this week you probably would have seen Deepseek R1 mentioned everywhere. It is the main rival to OpenAI's o1 model but is open source. I ran one of the smaller version on my Mac, and I was impressed.
📝 Article — What's OAuth2, anyway? — Understanding OAuth is a must for developers and this page explains it nicely.
🛠️ Tool — Malimite: iOS and macOS Decompiler — Decompilers can be a great way to see how something works that you otherwise wouldn't have access to. In some cases, the output can be a bit difficult to read if all the variables have odd names, but I am sure an AI could be used to help make sense of it.
📝 Article — Astronomers delete asteroid because it turned out to be Tesla Roadster — I find it amazing how much junk is floating around in space. I am not sure if we needed Elon adding to that.
🛠️ Tool — Marginalia: A search engine that prioritizes non-commercial content — It is always good to have some alternative search engines. I am pretty sure a lot of the obscure blogs that have useful content are hidden from the main search engines.
📝 Article — Stop Using NULL. It's a Bad Practice — Nulls can be such a pain to debug. C# has got better at telling you that something is likely to be null to avoid you finding out at runtime, but it is probably best to avoid them if you can.
📝 Article — A layoff fundamentally changed how I perceive work — There is some great advice at the end of this article which I think all developers need to read.
📝 Article — Nvidia: $589B DeepSeek rout — DeepSeek really has made OpenAI and Nvidia worry.
📝 Article — Why NotebookLM Matters — I need to give NotebookLM a try and see what all the fuss is about. Given it is a Google product I would rather have something self-hosted as Google will probably do a rug pull eventually.
📝 Article — Emerging Patterns in Building GenAI Products — If you are building anything with the latest GenAI models then give this a read.
📝 Article — Advice for a friend who wants to start a blog — There is some good advice here for anyone who wants to start a blog.
📝 Article — How I use Nix on macOS — I really need to give Nix a try for this reason. I have over 170 packages installed from brew. I am not sure what most of them are.
📝 Article — How might AI change programming? — Some interesting thoughts here. I think software development will look a lot different over the next 10 years.
🛠️ Tool — Stats: macOS system monitor in your menu bar — This looks cool, going to have to give it a try.
💡 Today I Learned (TIL) #
This is quite an old feature, but I never got around to using it. VS Code has the option to remotely connect to systems using SSH, and then you can edit files as if it was on your machine.
For ages, I have been keeping the code running on my home server in sync with git. I would make the change on my desktop, check it in and then SSH into my server and pull down the changes. Now I can make all the changes in VS Code but on the server. I still use git obviously, but it saves a lot of back and forth.
You can find instructions of how to do this here: Developing on Remote Machines using SSH and Visual Studio Code
💬 Quote of the Week #
I feel that the big ideas come from these periods. It’s the silence between the notes that makes the music.
From the article "Why You Need a "Deloading" Phase in Life" by Tim Ferriss.
Top comments (0)