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.

  1. We initialize API fetching.
  2. API server queries database behind
    the scene.
  3. API server gets data back from database.
  4. 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

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

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?”