Communicating with the Server

Lecture Goals

  • Explore the request-response cycle
  • Review the differences between Server and Client
  • List the different HTTP Verbs + corresponding actions
  • Observe how to send GET requests using .fetch()
  • Explain what Asynchronous means in JavaScript
  • Explain why Promises are important in JavaScript
  • Observe:
    • Handling promises and errors using .then() and .catch()
    • Using json-server to create a local API
    • Rendering data to the browser window after a fetch request

Client and Server communication

Client

  • User interface
  • Responsible for styling, layout, and event functionality
  • Lightweight and loads fast
  • Acts as a “template” for dynamic data
  • Makes requests to the server

Server

  • Responsible for data storage and management
  • Changes in data may be triggered by the client, but the actual change is handled by the server-side
  • Sends a response back to the server

HTTP Protocol

HTTP protocol for HTTP requests

Image from MDN’s HTTP Overview

HTTP is:

  • Language protocol used to communicate between the server and client
  • Used for fetching resources from the server
  • Data exchange
  • Readable
  • Stateless
  • Has sessions

Open devtools in Chrome for the slideshow and demo the network tab.

HTTP Verbs & CRUD

Method CRUD Action Description
GET READ Retrieves resources
POST CREATE Creates resources
PUT/PATCH UPDATE Updates resources
DELETE DESTROY Deletes resources

Synchronous vs Asynchronous Code examples

Sync callbacks

  • forEach
  • map
  • filter
  • find

Async callbacks

  • addEventListener
  • setTimeout
  • Promise.then

Synchronous vs Asynchronous code explained

Synchronous vs Asynchronous code diagram

Image source: Laptrinx.com

  • When we order food at a restaurant, the chefs don’t wait till one dish is completely ready before starting on the next one.
  • They take in the orders from the wait staff and complete them with priorities in mind.
  • They’ll finish appetizers first and they may also be dealing with meals ordered by other customers at the same time
  • The restaurant could not function properly if dishes could only be processed one at a time and it would be very awkward for our guests if dishes were delivered one at a time in the same order that they were placed!
  • Whoever ordered first would end up with cold food! :(
  • Instead, orders are handled asynchronously, this means that appetizers can be delivered when they’re ready, potentially a couple at a time

Delivering a better experience

Synchronous vs Asynchronous delivery in terms of time

Image source: Scout APM

A Demo of Sync & Async code in practice

Promises

Promise Diagram

JSON (JavaScript Object Notation)

JSON example

Mocking the server with

json-server

Spongebob delivering a Krabby Patty

Purpose

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Created with for front-end developers who need a quick back-end for prototyping and mocking.

View Docs

Data in a JSON file API endpoints to CRUD that data

Installation

npm install -g json-server

Usage in a project

  • create a file at project root called db.json
  • add an object to the db.json file
  • each key in the object will be one of the resources you can request from the json-server
  • run the server from your terminal: json-server --watch db.json

Setup

Demo

cd 04_Communicating_with_the_Server/assets
touch db.json

copy and paste the below into the assets/db.json file:

{
  "posts": [
    { title: "JSON-server is really cool" },
    { title: "JSON-server allows you to mock an API server by creating a single file!"}
  ]
}

json-server --watch db.json

JSON server running in terminal

Make sure to start json-server from the right place!

Woman in plug running and jumping into an outlet
  • If you run json-server --watch db.json, then your terminal will need to be in the same working directory as the db.json file.

Killing a zombie server

Diagnosis

Some error occurred Error: listen EADDRINUSE: address already in use 127.0.0.1:3000

Cure

kill $(lsof -t -i:3000)

Regimen

alias k3000="kill $(lsof -t -i:3000)"

I’ve created an alias for this fix, k3000, so I can just type k3000 in my terminal to run this command. To add your own alias, you’ll want to put this code in your terminal profile: ~/.zshrc, ~/.bash_profile, or ~/.profile