Sequence Diagram Plain Text Descriptions

server-side-rendered.txt

Sequence diagram of a user interacting with a server-side rendered site.

Three columns titled: User, Browser, Server.

First set of actions:

1. User opens /index.html
2. Browser gets /index.html
3. Server finds template at views/index.pug
4. Server fetches data for all emojis
5. Server builds index.html
6. Browser renders HTML

Second set of actions:

1. User clicks 🎉 link. Arrow to browser crosses a NEW PAGE boundary.
2. Browser gets /🎉.html
3. Server finds template at views/emojis/show.pug
4. Server fetches data for 🎉 emoji
5. Server builds 🎉.html
6. Browser renders HTML

single-page-app.txt

Sequence diagram of a user interacting with a single-page app.

Three columns titled: User, Browser, Server.

First set of actions:

1. User opens /index.html
2. Browser gets /index.html
3. Server returns public/base.html
4. Browser renders empty HTML
5. Browser gets /bundle.js
6. Server returns public/bundle.js
7. Browser parses JavaScript
8. Browser fetches all emoji data for index route
9. Server returns all emoji data
10. Browser JavaScript adds IndexView with data to page

Second set of actions:

1. User clicks 🎉 link
2. Browser JavaScript changes URL to /🎉
3. Browser fetches data for 🎉
4. Server returns data for 🎉
5. Browser JavaScript replaces IndexView with EmojiView

static-site.txt

Sequence diagram of a user interacting with a static site.

Three columns titled: User, Browser, Server.

First set of actions:

1. User opens /index.html
2. Browser gets /index.html
3. Server finds file at public/index.html
4. Browser renders HTML

Second set of actions:

1. User clicks 🎉 link. Arrow to browser crosses a NEW PAGE boundary.
2. Browser gets /🎉.html
3. Server finds file at public/🎉.html
4. Browser renders HTML