Skip to content

Latest commit

 

History

History
105 lines (85 loc) · 2.05 KB

0.5-one-page-note-diagram.md

File metadata and controls

105 lines (85 loc) · 2.05 KB

0.5: Single page app diagram

sequenceDiagram

    BROWSER->>SERVER: HTTP GET https://studies.cs.helsinki.fi/exampleapp/spa
    SERVER-->>BROWSER: HTML-code
    BROWSER->>SERVER: HTTP GET https://studies.cs.helsinki.fi/exampleapp/main.css
    SERVER-->>BROWSER: main.css
    BROWSER->>SERVER: HTTP GET https://studies.cs.helsinki.fi/exampleapp/spa.js
    SERVER-->>BROWSER: spa.js

    Note over BROWSER: browser starts executing js-code <br> that requests JSON data from server 

    BROWSER->>SERVER: HTTP GET https://studies.cs.helsinki.fi/exampleapp/data.json
    SERVER-->>BROWSER: [{"content":"test","date":"2023-01-11T17:32:32.196Z"}, ...]

    note over BROWSER: browser executes the event handler <br> that renders notes to display
Loading

Chain events Diagram:

1

graph TD;
   Browser;  
   to 
   Server;
Loading

GET https://studies.cs.helsinki.fi/exampleapp/spa activate server

graph TD;
   Server;  
   to   
  Browser;
Loading

HTML Code deactivate server

2

graph TD;
   Browser;  
   to 
   Server;
Loading

GET https://studies.cs.helsinki.fi/exampleapp/main.css activate server

graph TD;
  Server;  
  to   
  Browser;
Loading

Main.css deactivate server

3

graph TD;
   Browser;  
   to 
   Server;
Loading

GET https://studies.cs.helsinki.fi/exampleapp/spa.js activate server

graph TD;
 Server;  
 to   
 Browser;
Loading

Spa.js deactivate server

Note over BROWSER: browser starts executing js-code
that requests JSON data from server

4

graph TD;
   Browser;  
   to 
   Server;
Loading

GET https://studies.cs.helsinki.fi/exampleapp/data.json activate server

graph TD;
   Server;  
   to   
   Browser;
Loading

[{"content":"test","date":"2023-01-11T17:32:32.196Z"}, ...] deactivate server

note over BROWSER: browser executes the event handler
that renders notes to display