Frontend First

A way of working.

John-Philip "JP" Johansson

@seriemajp

www.johansson.jp

basic Idea

Traditionally

backend -> frontend

Let's Instead

frontend -> backend

but first

HTML prototypes

Wireframe

Mockup

browser

WYSIWYG

What You See

Is What You Get

(It's what clients 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'?"

MAIN Solution:

DATA

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?

Versioning

Fast iterations

View > dataformat > database

Test material

Fallback

sample data, from where?

(MS Blend)

sample data, from where?

Generate it!

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

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

https://github.com/mennovanslooten/mockJSON

supply data

Sadly, some server is needed

Happily, there's lots of simple ones

App

CodeKit | WebStorm | WebMatrix

Console

Grunt/Gulp | Node.js | Interfake

User state

localStorage

But, why?

business side of things

Title

We can fill the gaps with JavaScript today, hiding away that in reality it talks to a server behind the scenes.

node.js

Of course, you want to begin development with requirements defined as precisely as possible, but implementation tends to expose requirements you hadn’t considered, and some of those can have a considerable impact on your timeline.

Demo 0: Todo MVC

http://todomvc.com/

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.