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.
Made with Slides.com