Subscribe to access the entire course.
🌶️ tip: unsubscribe at any time.
Ah, that's a great question!
Frontend at Scale is a bi-weekly newsletter (as in, once every two weeks) that is all about software design and architecture for frontend engineers.
Subscribing to the newsletter is the best way to support my work and encourage me to keep making free resources like this one.
I probably don't need to say this, but I would never ever spam you—and you can unsubscribe with a single click at any time.
Already subscribed? Don't worry, you won't get double-subscribed. Nobody deserves to read my terrible jokes twice.
Module 3: Designing
When a customer places an order, the web app makes a request to the Core API which creates the order and returns a channel ID. The web app then uses this channel ID to subscribe to the web sockets server, which emits real-time events when the order status changes. If the connection with the web socket server drops at any point, the web app will start polling Core API with the latest order status.
[00:03] In this exercise, we’re going to put together our sequence diagram to represent one of the main interactions in FullSnack sequence Diagrams are a great way to provide more detail about our particular sequence of events or interactions. So for example, here we have the container diagram that we drew in the previous module and we see that the we have our relationship between our core API and the third party payment system represented by this arrow that says we process payment systems using this is the third party payment system.
[00:33] Now this is a great overview at a high level of what their relationship is. But of course we know that the difficult process of placing an order is much more complicated than that, and sequence diagrams are a great way to represent that complexity. So here’s the example that we saw in the previous video where we can see that placing an order involves multiple different steps. So it goes all the way from the customer to the web application to the core API to database and the payment systems for this exercise.
[01:02] I would like you to put together a sequence diagram to represent the real time order status changes. So the good news is that you don’t have to make anything up for this exercise either because you can follow the description of the sequence that we have right here. So this is essentially a written description of the entire sequence. This will tell you all of the different all of the different entities and containers that are involved in this sequence. And you can follow the the different events that happened to put together the sequence diagram.
[01:34] You’ll find this written on the description of this video as well. There’s one thing that we didn’t cover in the previous example that you will need for this exercise, which is being able to represent loops or iterations in your sequence. But I will link to a resource in the description where you’ll find information about how you can do that.
[01:52] And again, you can build this with any tool that you want, you can use TLdraw. You can use ScaliDraw pen on paper, or you can use mermaid, which is what I will recommend. The syntax is very simple for sequence diagrams and they are very easy to change as well.
[02:07] So give this one to try and I’ll see you in the next video or show you my sequence.