Resources

• Video Slides

Transcript

[00:03] Here’s another million dollar question. What is frontend architecture? So here’s the definition that we use previously to talk about software architecture. And one of the good things about this definition is that we can adopt it to talk about frontend architecture as well by just adding the frontend in a couple of places so we can define frontend architecture as this set of decisions about how we organize our frontend layer to promote these higher quality attributes.

[00:29] I know that still a lot of words, and it’s even more words now. So if you want the more concise version, we can invoke our inner Ralph Johnson and say that frontend architecture is about the important front end stuff. Whatever that is.

[00:43] So the key thing to talk about now is how do we define the word frontend? And it used to be very simple to talk about frontend and backend, let’s say ten or 15 years ago, because if you run on the client, it was the frontend. If you run on the server, it was a backend it was it was that clear.

[00:59] But of course nowadays things are not so simple. We have things that both that run both on the client and on the server, and we have things as well that are more sophisticated frontend tools that almost cross the boundary to the backend as well. So I think nowadays it’s much more accurate to think of these frontend and backend definition as a spectrum rather than as that as two opposite things.

[01:22] So on the frontend side of the spectrum, we have things like access and HTML and client side JavaScript and on the backend side of the spectrum, we have things like databases or APIs or, you know, Kubernetes, whatever, whatever Kubernetes is, which by the way, if we’re going to keep talking about Kubernetes We should probably figured out what that is. So, I mean, give me one minute here. What is Kubernetes? Okay. So it’s like.

[01:58] Anyway, so back to our spectrum. We now have things that for clearly in the middle, when we think about any modern framework that has a client and a server component like Next.JS Or Nuxt they fall right in the middle. I will say also things like React Server components that cross this boundary completely full in this area.

[02:17] So for this particular course, our definition of frontend or what do we mean by frontend lies in I’ll say in around this area of the spectrum. So where we we’re staying clear from the edges. So we’re not going to talk about, you know, CSS, for example, We’re also not going to talk about databases. So we’re going to stay in this middle area, but more toward the frontend of the spectrum.

[02:40] Now, what about this guy, though? Can we use these four dimensions of architecture to define a frontend architecture as well? Well, yes. Yes, we can.

[02:56] So let’s see a couple of examples of how two different architectures could look like by applying these four dimensions, looking through the lens of these four dimensions. So architecture, number one, we may have a style of Micro-Frontends, and this is an example of an architectural style that we may choose for this particular architecture.

[03:11] Then some characteristic characteristics that we may support or some quality attributes that we may want to prioritize our scalability, deployability and maintainability. Maybe this is our larger company that has hundreds of frontend developers and multiple teams, and we want to make sure that the codebase scales as their teams grow and that people can deploy without, you know, stepping into each other’s toes so that there’s no conflicts between teams when they make releases.

[03:42] Some of the architectural decisions that we might make in this architecture are, for example, that we’re going to share global state with signals and that we can compose micro-frontends client side. This is how we’re going to choose to bring all of our micro-frontends together using client high rendering and the logical components or the building blocks of our architecture could be models, collections, views, templates and classes. So this might be using some sort of MVC framework to to build the frontend layer, which I know it’s not very common, but this is just an example.

[04:15] Our second architecture may use style of monolithic react several components application. So we have the React here, but this is just because React server component. So it’s almost like its own architecture. So we consider it at its own particular style.

[04:32] The characteristics or quality activities that we might promote with this architecture are performance and agility and reliability. Maybe you have a smaller team who want to move fast and we care about that application being fast and reliable as well.

[04:47] Some of the decisions that we make in this architecture are to, for example, share state with a store in this case or to mutate data used in server actions. And our building blocks may include client components, server components, hooks, services and so on.

[05:03] So these two architectures, we might build this same exact application using these two architectures will look completely different. So for the end user, the applications may look exactly the same. They might be identical, in fact, but under the hood we know that they couldn’t be more different and how do we make these decisions?

[05:22] How do we choose across the infinite number of combinations that we could choose from? Architectural characteristics and style and decisions that we make? That is exactly what we’re going to cover in the rest of the course, and that is what we do in our jobs as frontend architects.