Hey friends 👋 I'll keep the intro short today because we have a packed issue with not one, not two, but three super exciting things to chat about.

We have a full preview of what's to come in the Fundamentals of Frontend Architecture workshop, which I'm doing my very best to finally launch by the end of the month; we have an exclusive free giveaway for Frontend at Scale readers thanks to our friends at zeroheight; and we have the triumphant return of a classic section of the newsletter—the bookshelf!

Plus, we'll talk about frontend development's existential crisis, cognitive load, the value of going back to the basics, and a lot more. Let's dive in!

FUNDAMENTALS OF FRONTEND ARCHITECTURE

Against The Law

If you’ve been on the waitlist for the Fundamentals of Frontend Architecture workshop for some time, you might be wondering, “When is Maxi going to launch this thing? Didn’t he say early June?”

That’s a very good question, dear reader. Yes, I did say early June, and yes I’m aware we’re already in July. But there’s a good reason why I haven’t launched the course yet:

It’s against the law.

Of course, I’m talking about Hofstadter’s Law, which says that “things always take longer than we expect, even when we take into account Hofstadter’s Law.”

And what can I say? I’m a father of two and I drive an SUV with like 16 airbags—not really the law-breaking type.

To be honest, I wish I had a good excuse for the delay, like “My dog ate my domain model” or “My daughter drew over my sequence diagrams.” But the truth is that I’ve just been doing what I do best—procrastinating on the project while convincing myself that I was doing “research.”

Luckily, a few weeks ago, I got over this self-imposed mental block and started making some solid, consistent progress on the workshop. And in the spirit of keeping the momentum going, today I’d like to share a full preview of what you can expect to find in it, along with an updated release date.

Well, I still don’t have an exact release date, but I’m aiming for the last week of July. I would love to get this out before the end of the month, and I’m working very hard to hit that deadline. I’ll have an actual date to share by the next issue of the newsletter.

Oh, and you might have noticed that I’ve been using the words “workshop” and “course” interchangeably here. It was originally just “workshop,” but I realized it was causing confusion for some people who thought it would be a live event, so I started referring to it as “course” as well… and now I’m using both words, which is arguably even more confusing. Sorry about that, naming things is hard.

The format is the same though—this is a pre-recorded video course that you can watch at your own pace. It also has a few exercises (with solutions) to follow along with, like you would in a live workshop.

Alright, let’s talk about what this workshop/course (same thing) is all about.

Who is the course for?

I mean, it’s 100% free, so it’s literally for anyone who wants to do it! However, I do have a specific audience in mind who I think would benefit the most from this course.

First, this is a fundamentals course, so it’s aimed at developers who have limited or no experience in software architecture. If you’re a seasoned architect already, you might find most of the content a bit shallow, but if you’re just getting started, I think the course would make a pretty good introduction.

Second, this is a frontend architecture course, meaning that we won’t be going too deep into infrastructure, data, or backend development. I designed the course to be as accessible as possible to frontend developers of all kinds, which is why we’re not going to assume any full-stack or backend knowledge. If you’re looking for a deep dive into microservices or Kubernetes, this might not be the right course for you.

And finally, this course is for both aspiring frontend architects and frontend developers who are perfectly happy staying on the engineering side. Even if you don’t have intentions of ever taking the architect’s path, I’m sure you’ll find the tools and techniques we cover throughout the course useful. This is for anyone who wants to build robust frontend applications that stand the test of time a little better.

With that out of the way, let’s now talk about the actual contents of the course, which are divided into four core modules: foundations, understanding, designing, and implementing.

1. Foundations

We’re going to start with the basics. In this first module, we’ll define exactly what we mean by “frontend architecture,” we’ll see how it compares to the more general discipline of software architecture, and we’ll talk about the difference between architecture and software design.

We’re also going to answer the question every architect fears the most:

“So… what would you say you do here?”

“Well, that’s easy,” says Mr. Architect, “our job is to deliver value by aligning objectives with key stakeholders.”

Thanks, Mr. Architect, that surely clears things up, but we’re going to do a bit better than that. There isn’t an industry-standard Frontend Architect job description, but we’ll do our best to cover some of the most common responsibilities and expectations of the role at companies of different sizes.

2. Understanding

The rest of the course is entirely project-based. Throughout the remaining modules, we’ll be working on the design and implementation of a food delivery web application called FullSnack, which as you’ll see in the screenshots below, looks suspiciously similar to Uber Eats (it’s actually just Uber Eats).

As architects, we’re not only responsible for solving problems the right way, but also for making sure we’re solving the right problems. So before we jump into the actual design of the architecture, we have to start by getting a solid understanding of the project we’re going to tackle.

In this section, we’re going to identify our project’s architectural requirements, we’ll talk about architectural drivers like constraints and quality attributes, and we’ll cover a few tools and techniques for drawing clear diagrams to communicate our vision with the rest of the team.

3. Designing

Once we have our problem clearly laid out, it’s time come up with a good solution for it—and that’s exactly what we’re going to do in the Designing module of the course.

Here’s where we put our software designer hats on to create the actual architecture of our project, covering techniques such as domain modeling, sequence diagrams, and Architectural Decision Records (ADRs) to keep a log of our important decisions.

In this section, we’ll also start breaking down our app into modules. We’ll wrap things up by putting together a High-Level Design Document for our architecture, and we’ll talk about Low-Level documents as well.

4. Implementing

Finally, we’ll finish things up with the Implementing module, which is where we’ll finally get to see how we can translate our architecture into actual code.

So yes, we’re going to see some code, but not a lot. In case it wasn’t evident by now, this isn’t a coding course, but we’re going to see just enough of it so that we can talk about the strategies you can use to support your team and project during implementation.

In this module, we’ll chat about project setup and folder structure, we’ll break up our modules into components, and we’ll see how we can keep things organized with a simple component hierarchy. We’re also going to cover some guardrails and constraints that you can implement to protect the architecture as the codebase continues to grow.

And that’s it! I know it might look like a lot (and we’re certainly covering a lot of ground), but don’t worry—I designed the course to be as short and dynamic as possible.

This is a practical course, so we’re going to be pretty lean on the theory side of things, and we’re going to focus on how you can actually put these techniques into practice—although I will share a bunch of resources at the end for those of you who’d like to go deeper into these topics.

As I mentioned earlier, there are a few exercises throughout the course where you can get your hands dirty, stretch your architectural muscles, and hopefully make all the concepts we’re going to cover stick a little better.

If the course sounds interesting and you’d like to be part of the early-access group, let me know by replying to this email or shooting me a message at [email protected], and I’ll put you on the list to access the first half of the course a week or two before the official launch.

I’m very excited to share this with you all, and I hope you’re excited to see it too. Now, If you’d excuse me, I have about 40 videos to record and approximately a billion “umm”s to edit out. See you all soon!

🎁 THIS WEEK'S GIVEAWAY 🎁

To celebrate the release of the free downloadable e-book, The Case for Web Components, the folk at zeroheight are offering the chance to win 2x tickets (worth £498) to Converge, their two-day design systems conference, this October in Brighton, UK.

Enter now for the chance to get yourself (and a friend/colleague) access to 20+ fantastic speakers across design and dev. Not to be missed this October 3rd to 4th at the iconic Brighton Dome.

Next Sunday, July 14th, I'll pick one winner at random and I'll reach out via email with the good news. Best of luck! 🍀

ARCHITECTURE SNACKS

Links Worth Checking Out

📕 READ

1. Andrew Cairns wrote a fun article about the Primitive Obsession code smell, and how we can fix its potential drawbacks using a technique known as Value Objects.
2. Go from zero to performance hero with this excellent web performance guide the SpeedCurve team put together.
3. If you’re looking to catch up on the classics, here’s a fantastic list of software engineering papers curated by my fellow compatriota Facundo Olano.
4. Geoff Graham tells us that the key to getting better at frontend development is to go back to the basics and truly grasp the fundamentals of HTML and CSS.
5. Are you finally feeling your JavaScript Fatigue is getting better? Well, hold on to that feeling, because here comes what Kirill Bobrov likes to call Senior Engineer Fatigue.
6. Alex Molas wrote a short essay on one of the key traits of a good abstraction—not that its implementation is easy to read, but that it rarely needs to be read at all.

​

🎥 WATCH

​Facing Frontend's Existential Crisis by Ryan Carniato

You probably know Ryan as the creator of Solid.js, but did you know he’s also one of the world’s greatest framewologists? Ok yes, I just made that word up, but if there was a discipline that studied web frameworks, I’m sure Ryan would be one of the best in the field. In his latest talk at React Summit 2024, he walks us through a bunch of competing rendering patterns (traditional server-side rendering, islands architecture, server components, and Qwik’s resumability) and explains where the weaknesses of each one are and why none of them is a silver bullet. While we might never find the “one framework to rule them all”, Ryan thinks some of these problems are fixable, and he’s making it his personal goal to find a better alternative. I truly enjoyed this talk—highly recommended!

​

🎧 LISTEN

​Don’t Make Me Think by yours truly, read by Josh Cirre

Josh from the Laravel team started Learning Driven Development recently, a new podcast with a very cool name in which he reads through interesting software development articles and shares his thoughts on them. And for the very first episode of the podcast, Josh honored us by reading Don’t Make Me Think—the essay on issue #8 of this very newsletter! I know some of you weren’t around when I wrote this one, so this is a fantastic opportunity to have it read to you by Josh—who, by the way, is the first person I’ll call when I write my first book and need someone to read the audio version.

BOOKSHELF

Building Large Scale Web Apps

Are you looking for a field guide to modern web development with React that is comprehensive, easy to follow, and nicely organized? Well, I’ve got just the thing for you, because Building Large Scale Web Apps by Addy Osmani and Hassan Djirdeh is all of those things and much more.

In about 300 pages, the book has chapters on Performance, Testing, Design Systems, State Management, and pretty much any other aspect of modern web development you can think of. Each topic is explained clearly and with helpful examples, and each chapter includes a bunch of resources that you can take a look at if you want to dive deeper.

One thing I really like about the book is that its chapters can all be read in isolation. So you can pick up the book at any time, take a look at the table of contents, and decide what you want to learn more about that day. Some of my favorite chapters in the book include:

• Managing Software Complexity—you know how much I love talking about complexity, and this chapter gives a fantastic overview of this topic.
• Organizing Code—which, in my opinion, is one of the hardest challenges of modern frontend development.
• Scalable Web Architecture—a chapter that goes beyond the boundaries of frontend development and touches on infrastructure concepts such as CDNs, Docker containers, and even Kubernetes.
• Technical Migrations—a problem we’re all destined to run into at some point in our careers. This chapter has some great tips about how to handle migrations, including some notes on how generative AI tools can make this process less painful.

Building Large Scale Web Apps is a great resource for both seasoned developers who want to learn new techniques for tackling particular challenges of large frontend systems, as well as developers looking for an overview of the most important aspects of building a modern JavaScript application.

And if all of that wasn’t enough, Addy and Hassan are working on some additional chapters to the book, and they regularly share their progress on their Substack which I definitely recommend subscribing to as well.

That’s all for today, friends! Thank you for making it all the way to the end. If you enjoyed the newsletter, it would mean the world to me if you’d share it with your friends and coworkers. (And if you didn't enjoy it, why not share it with an enemy?)

Did someone forward this to you? First of all, tell them how awesome they are, and then consider subscribing to the newsletter to get the next issue right in your inbox.

I read and reply to all of your comments. Feel free to reach out on Twitter or reply to this email directly with any feedback or questions.

Have a great week 👋

– Maxi