When I left my infrastructure engineering job at Google to start my own company, I had a hard time getting my bearings in the world of product engineering. The last time I'd really touched Javascript was in college in 2013, when JQuery was still a thing, and I quickly realized that frontend development had changed A LOT since then. There was seemingly a new hot managed database or managed auth thing every month or so, and it was easy to get distracted.
This is the guide I wish I had a year ago — tl;dr explanations of the different components available for a modern web stack with my recommendations for which ones to use in combination with each other. I'm not saying that these are going to be your forever stacks, or totally optimal ones. But for going from 0 to 1, from conception to a presentable web app, I think these are the best options. Things I'm considering include completeness of documentation, amount of support you can get on forums, integrations with each other, generally "looking good", and cost. Under each heading, if I have a recommendation, I label it with a green check mark.
Static Sites/Landing Pages
If you're just looking to put up a personal website or something else fairly static, I would highly recommend:
- easy web hosting for your Notion pages (this is what I use for this website)
- super easy no-code maker for your landing pages
Frontend
Vector Graphics
- free SVG vector drawings; you can customize the color
- design platform; I find Canva useful for creating favicons, editing photographs; it has a great stock photo library.
Language
Javascript ✅
- la lingua franca of the web
Typescript
- You may have heard of TypeScript. It's an "improved" superset of JavaScript that has support for stuff like classes, interfaces, static typing, etc. Typescript is very buzzy right now, but given that so much of the documentation available online is for JavaScript, I think it's better to just use JavaScript. Every JavaScript file can be converted to TypeScript by changing the file extension to .ts from .js.
Frameworks
React ✅
- React is a JavaScript framework that makes it easy to build UI's. Unlike traditional frontend programming, where you embed JavaScript into HTML, with React, you build "components", which are self-contained JavaScript functions that maintain their own state and return HTML. The components typically correspond to a discrete UI, for instance a header menu.
- React is the dominant UI framework these days and has been so for probably the last ~5 years. This is what most frontend developers use and what I learned.
- I've only played around with Vue a little bit. The Vue people wrote a pretty fair/detailed comparison against React here, and it looks like a lot of the benefits are in optimizations/scaling.
- UI framework for TypeScript
Frameworks
- Create React App allows you to set up a React app without having to do any configuration
- with CRA you don't have to worry about build tooling like Webpack, Babel, dependency management, etc.
Next.js ✅
- Next.js is another framework that makes life easier when developing apps with React. The main difference from Create-React-App is that it has server-side rendering (SSR) by default, which means using a server to generate HTML from JavaScript in response to a URL request. That’s in contrast to client-side rendering, which uses the browser to create HTML using the DOM. SSR can be better for 1) performance and 2) SEO, when indexing does not handle JavaScript properly.
- Next.js also provides API Routes which you can use to build "backend" API endpoints with serverless functions. Serverless refers to a computing model where the cloud provider only charges the user for the compute and storage involved in running a particular function, instead of the user having to manage containers, hosts, compute instances, etc themselves.
Styling
- Bootstrap is the most popular css framework in the world
- You can use Bootstrap in a few ways: the simplest, IMO, and the right way, is just to import the stylesheet — this gives you better styling automatically for certain html elements, for example a better looking button.
- react-bootstrap, on the other hand, gets you styled dynamic components for free, but it makes it really difficult to actually customize stuff further, like radiuses and colors.
-
TailwindCSS is a CSS framework that provides you with predefined utility classes. Instead of importing a stylesheet that has overridden certain html elements like with Bootstrap, Tailwind gives you finer grained control with tags like "red" or "lg" that you can concatenate. So for example, html for a big red button would look something like this:
<div class="red lg">Submit</div> -
- the makers of TailwindCSS recently put out a paid component library with pre-styled components for dashboards, pricing pages, etc. It's $249 for lifetime access and worth it IMO.
Other Helpful Things
- query language for API's
- lets you specify a subset fields in an API JSON response that you want, and retrieves only those fields.
- I haven't used this at all, but some frontend engineers I respect are big fans.
- dev tool for frontend developers; UI for organizing/visualizing components
Backend
Language & Frameworks
Python/FastAPI
- We generally defaulted to using python on the backend, just because that's what we were familiar with. It worked fine, but I do think we ended up writing a bunch of repetitive filler code. If you just have a CRUD app you might be able to get away without a "real" backend, and just use Firebase/Supabase (see below).
- For Python backends, I've typically used Flask, but a friend recently turned me onto FastAPI, a modern web framework for building API's in Python. It's fast, and auto-generates docs on the go (i.e. you hit the /docs endpoint, and get a swagger UI automatically).
- JavaScript used to only be run in the browser. To be able to use JavaScript on the server side as well, someone came up with Node.js. Node.js is a runtime environment, i.e. using Node.js, you can run JavaScript on a standard machine. Node.js is not a programming language or programming framework.
- "Where Node really shines is in building fast, scalable network applications, as it’s capable of handling a huge number of simultaneous connections with high throughput"
- Express, meanwhile, is a framework for building web applications in Node.js. Super popular, although I haven't used it before.
Database
- cloud-hosted, NoSQL, document-based datastore
- good for getting something out the door fast, but no latency guarantees, limited processing capabilities, awkward querying
Postgres ✅
- open source relational database
- I think relational databases make the most sense and are just easier to reason about in a lot of ways.
Authentication
- offers authentication, storage, and a NoSQL database (Firestore)
- Google project, so not great docs/support IMO
Supabase ✅
- open-source Firebase; offers authentication, storage, and a Postgres database
- slick site, nice API, good support and reviews on Twitter
Deployment
Render ✅
- new-age Heroku, makes it easy to deploy any kind of web service, cron job, static site, and/or fully managed Postgres database
Vercel ✅
- good for deploying Next.js sites, because Vercel is the parent company of Next.
- another alternative to Heroku, nice free tier and very popular, although I haven't personally used it before.
- I honestly just found the whole GCP console to be insanely confusing/difficult to navigate, so this wouldn't be my recommendation.
Recommended Stacks
Option 1 (What I Used):
UI Framework: Bootstrap
Frontend: Create-React-App
Backend: FastAPI
Auth/DB: Firebase
Deployment: Render
Option 2 (JavaScript all the way with a real server):
UI Framework: Bootstrap
Frontend: Create-React-App
Backend: Express
Auth/DB: Firebase
Deployment: Render
Option 3 (Vercel World):
UI Framework: Tailwind
Frontend: Next.js
Backend: Next.js
Auth/DB: Supabase
Deployment: Vercel
From these "template" combos above you can also mix and match stuff, like swapping in Tailwind for Bootstrap, Supabase for Firebase, etc.
Top comments (1)
Thanks, this is very helpful.
Looking forward for the 2023 version 😅