Skip to content

Commit 732a343

Browse files
authored
Update how_it_all_works.md
1 parent 6370269 commit 732a343

File tree

1 file changed

+6
-13
lines changed

1 file changed

+6
-13
lines changed

docs/technical/how_it_all_works.md

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@ The idea was introduced in the SAP community through examples using the JavaScri
1616

1717
After the initial page load, only small HTML fragments are sent asynchronously via AJAX to update parts of the page — avoiding full reloads.
1818

19-
<p align="center">
2019
<img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" />
21-
<br/>
22-
<em> HTML "Over the Wire" Lifecycle [(Quelle)](https://community.sap.com/t5/technology-blog-posts-by-members/fiori-like-web-app-development-in-pure-abap-with-htmx-and-fundamental/ba-p/13500763) </em>
23-
</p>
20+
21+
_HTML "Over the Wire" Lifecycle [(Quelle)](https://community.sap.com/t5/technology-blog-posts-by-members/fiori-like-web-app-development-in-pure-abap-with-htmx-and-fundamental/ba-p/13500763)_
22+
2423

2524
This approach contrasts with the common separation of concerns, where HTML, CSS, and JavaScript are managed independently on the frontend while the backend only delivers data.
2625

@@ -30,16 +29,9 @@ This concept evolves into what is termed a Hypermedia-Driven Application (HDA).
3029

3130
In contrast, SPAs define all routes and actions upfront on the frontend, requiring a full rebuild for any modification. The following illustration compares MPAs, SPAs, and HDAs:
3231

33-
<p align="center">
3432
<img width="600" alt="image" src="https://github.com/user-attachments/assets/8117dc10-f0ba-4c52-9d1d-6b9d0986401d" />
35-
<br/>
36-
<em> MPA vs. SPA vs. HDA [(Quelle)](https://craftcms.com/events/dot-all-2022/sessions/a-practical-guide-to-html-over-the-wire) </em>
37-
</p>
38-
39-
40-
41-
4233

34+
_MPA vs. SPA vs. HDA [(Quelle)](https://craftcms.com/events/dot-all-2022/sessions/a-practical-guide-to-html-over-the-wire)_
4335

4436
##### 3. Rethinking Separation of Concerns
4537

@@ -50,7 +42,8 @@ Unlike traditional architectures, HDAs do not prioritize strict separation of CS
5042
Frameworks like Phoenix LiveView (2018) and Laravel Livewire (2019) were among the first to adopt this principle. Tools like htmx, hotwire, and unpoly followed, aiming to reduce complexity while maintaining high UI fidelity. These frameworks seek a "sweet spot" between SPA and MPA architectures:
5143

5244
<img width="600" alt="image" src="https://github.com/user-attachments/assets/41af4a41-829e-4289-82f5-18ee7408054b" />
53-
"Sweet Spot" between SPA and MPA (Quelle)
45+
46+
_"Sweet Spot" between SPA and MPA_
5447

5548
A recommended video offers an excellent introduction to these ideas.
5649

0 commit comments

Comments
 (0)