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


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'?"

Keep it simple



Save it as a JSON-file

Try JSON SCHEMA


JSON Schema
http://json-schema.org/

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

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

how is this significant?


Files can be versioned

Easy changes -> faster iterations

View -> dataformat -> database structure

Automated testing

Fallback

sample data, from where?



(MS Blend)

sample data, from where?



Generate it!

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

http://beta.json-generator.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