A glimpse on API
Application
Programming
Interface
A
P
I
API
Exchange data
between software
between services
API
Exchange data between servers.
Exchange data between client and server.
- We initialize API fetching.
- API server queries database behind
the scene. - API server gets data back from database.
- API server returns API data back.
Exchange data between client and server.
In web, it is usually JavaScript to fetch API
JavaScript
JavaScript
JavaScript
- Runs on web browsers
- Runs on any computers
including server
JavaScript & API
JavaScript & API & Markup
JavaScript & API & Markup
J
A
M
J
A
M
Stack
DEMO: Fetch API
DEMO: Fetch API
a tale of TWO
TWO
approaches
Server-side render &
JavaScript enhance
JAMStack
1.
2.
Server-side render &
JavaScript enhance
1.
Image from www.netlify.com/jamstack
JAM Stack
2.
Image from www.netlify.com/jamstack
Traditional
Pro
- Mature frameworks with learning resources.
Con
- Page rendering and change responses is slower
JAM Stack
Pro
- Static files = fast loading.
- JavaScript rendering = User interface response fast on changes.
Con
- A new mindset to plan
- Decoupling may be harder to maintain.
Traditional
Pro
- Mature frameworks with learning resources.
Con
- Page rendering and change responses is slower
- Traditional server-side rendering has long history with mature frameworks.
- There are many learning resources for us.
- The path is clear because we built on top of our lesson learnt.
Traditional
Pro
- Mature frameworks with learning resources.
Con
- Page rendering and change responses is slower
- Most changes requires server-side re-rendering, often the whole pages.
- Result in more data to transfer.
- Result in server-side computation instead of client-side computation and thus slower.
- Can enhance with JavaScript.
JAM Stack
Pro
- Static files = fast loading.
- JavaScript rendering = User interface response fast on changes.
Con
- A new mindset to plan
- Decoupling may be harder to maintain.
- Static files loads without server-side computation and thus very fast.
- Static files is too static for us to create, that’s where static site generator comes to rescue.
- By default, changes are either loading another static files or handled by JavaScript, directly computed in browser.
JAM Stack
Pro
- Static files = fast loading.
- JavaScript rendering = User interface response fast on changes.
Con
- A new mindset to plan
- Decoupling may be harder to maintain.
- New approach = less learning resources, or fragmented learning material.
- Things will be scattered into different services.
- Good when think of them as puzzles.
- Bad for code maintenance.
- “Where is the code?”