Frontend First


A way of working.






John-Philip "JP" Johansson

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

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?


Versioning

Fast iterations

View > dataformat > database

Test material

Fallback

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

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





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 - updated

By John-Philip Johansson

Frontend First - updated

This is an updated version of my talk. Presented on a Tech breakfast at Avanade.

  • 1,163