Frontend First


A way of working.






John-Philip "JP" Johansson
@seriemajp
www.johansson.jp

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
http://json-schema.org/

Simpler schema
http://orderly-json.org/

JSON -> JSON Schema
http://jsonschema.net/reboot/

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!

http://schematic-ipsum.herokuapp.com/

http://beta.json-generator.com/


supply data


Sadly, some server is needed

Happily, there's lots of simple ones


App
CodeKit | WebStorm | WebMatrix

Console
Grunt/Gulp | Node.js | Interfake

Demo 1 : angular apimock




http://johansson.jp/angular-apimock


Demo 2 : wikipedia translate




http://johansson.jp/translate

demo 3 : fotbollskalendern




http://johansson.jp/Fotbollskalendern-web

Questions?

Thank you!




http://johansson.jp

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.