Frontend First


A way of working.






John-Philip "JP" Johansson

basic Idea



Traditionally

backend -> frontend

Instead

frontend -> backend

but first



HTML prototypes

Wireframe


Mockup


browser


WYSIWYG



What You Show

Is What You Give


(It's what they'll expect)

Don't stop



Build the whole thing!

main problem:

data



Lorum ipsum...

Sample data



consistent data



data format



"Did we decide on 17:00 or 17.00?"


"Thought we said 'open' or 'closed'?"

Save it in a file



Keep it simple

the JSON-format


Common format on the web

Regular text: read or write anywhere



(For now: let's think text-files)

JSON: Sample


{
  "name": "Fancy t-shirt",
  "info": {
    "color": "red",
    "size": "XXL"
  },
  "price": 199
}

Define JSON format


JSON Schema

Simpler schema

JSON -> JSON Schema

JSON-schema: sample


{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "info": {
      "type": "object",
      "properties": {
        "color": { "type": "string" },
        "size": { "type": "string" },
      }
    },
    "price": { "type": "integer" }
  }
}
Now that's a mouthful...

how is this significant?


Files can be versioned

Easy changes -> faster iterations

View decides dataformat,
which decides database structure

Can be used in automated testing

Fallback to sample data

sample data, from where?



(MS Blend)

sample data, from where?



Generate it!




supply data


Sadly, some server is needed

Happily, there's lots of simple ones


App

Console

Demo 1 : angular apimock






Demo 2 : wikipedia translate




demo 3 : fotbollskalendern




Questions?

Thank you!




Steps


Frontend

Backend

Side

Frontend


Either you manually change your API paths, overload them step by step, or use a router like ApiMock.

Backend


You need to serve the JSON to the frontend, but also keep it as documentation for the API implementer.

Do this with a fake server like Interfake, or create a real server with Express, or just host your files statically.

Side


A sample JSON file works as documentation, but a JSON Schema is a better option.

You can create sample data from a JSON Schema.

You can create a JSON Schema from sample data.

Tip: Do one sample (like one search result), generate the schema from that, then generate as many samples you need.

Frontend First

By John-Philip Johansson

Frontend First

This was a presentation I held on a Meetup with XD Sthlm.

  • 3,603