/this-to-fetch-example

Primary LanguageJavaScriptCreative Commons Attribution Share Alike 4.0 InternationalCC-BY-SA-4.0

this to fetch Example

This repo is a study guide for completing the restful-pjs project

The code to study in this repo is two apps with the same behavior. But what is an app? An app is Data + User Interactions.

One of the big questions in application design is how the user and the data are brought together. Until now your apps have all run locally in the Browser so this question was pretty easy to answer. But full web applications are fundamentally different, the data is hosted on a server and the user gets access to the data by sending http requests to fetch the data they need.

The three example apps in this Repo have identical user experiences with fundamentally different implementations:

  • __app-this.js__: Stores it's data locally in the browser as a property in your app. To access the data you use this. app-this is synchronous.
  • __app-fetch-promises.js__: Stores it's data as a .json file behind a RESTful API, a true fullstack web app! To access the data you need to use fetch to send a requests to your API. app-fetch is asynchronous, it uses promises.
  • __app-fetch-async-await.js__: Stores it's data as a .json file behind a RESTful API, a true fullstack web app! To access the data you need to use fetch to send a requests to your API. app-fetch is asynchronous, it uses async/await.

Instal Instructions

  • clone repo & cd into the new directory
  • npm install
  • npm run start
  • navigate to localhost:3000 in your browser