Please enable JavaScript.
Coggle requires JavaScript to display documents.
modern web app architecture, components, types, JAM Stack - Coggle Diagram
-
-
types
cloud architecture
-
Amazon AWS, Azure, Google Cloud
AWS
-
implement microservices, mobile backends, SPAs
-
-
-
-
lets you focus on the quality of the product and complexity to make them highly scalable and reliable
-
Single Page Application
-
e.g. Facebook, Gmail, Google Maps, GitHub, Twitter
pros
interactive APP, highly responsive
-
-
-
load a single web page and reload the requested data on the same pate with dynamically updated content
PWA
-
support offline experiences, background synchronization, push notifications
-
pros
supported by windows, android, and iOS
-
-
-
-
Micro Front-End
-
-
-
cons
app is complicated, causes code duplicaiton
services are loosely coupled to be developed, tested, maintained, and developed independently
isomorphic
-
-
pros
provides quick data updates, responsiveness, multiple UI, UX options
grants quicker rendering, instant display
user friendly routing, SEO and linkability
-
-
Server-Side Rendering
-
pros
SEO, linkability, instant first page load
-
-
Static Site Generation
-
cons
-
content does not change, completely re-generate the website
-
JAM Stack
decoupled architecture, clear split between server-side and client side
-
-
-
-
JavaScript
-
monolithic → everything is coupled together, all is dependent on each other
-
API's
-
-
microservices
small pieces of code that serve specific functions, completely independent of other services
Markup
-
HTML
to present a DOM that is ready to be parsed, presented and processed by web browsers
instead of relying on the server to build the content, it is relying on cached content
-
using a build tool (a static site generator), deliver to CDN
JavaScript, API's, Markup
splits the code, the site infrastructure, the content
-
-
the difference: how tightly the content, code and design are connected
-
-