====== Front End Development ======

The following are tools that I have learned for Front End development.

===== Mirage JS =====

Mirage JS lets you mock back end server APIs.

==== Static Requests ====

Static requests serve up hardcoded bits of data.

Here is a static GET request:

<code javascript>
this.get("/api/reminders", () => ({
  reminders: [
    { id: 1, text: "Walk the dog" },
    { id: 2, text: "Take out the trash" },
    { id: 3, text: "Work out" },
  ],
}))
</code>

===== Dynamic Requests =====

In Mirage JS there is a backend database that can be defined by Models and accessed using the Schema methods.

<code javascript>
import { createServer, Model } from 'miragejs'

export default function () {
  createServer({

    models: {
      reminder: Model,
    },

    routes() {
      this.get("/api/reminders", schema=> schema.reminders.all());

      this.post("api/reminders", (schema, request) => {
        let attrs = JSON.parse(request.requestBody);

        return schema.reminders.create(attrs);
      })
    },
  })
}
</code>