Frontend First
A way of working.
John-Philip "JP" Johansson
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
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" }
}
}
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!
supply data
Sadly, some server is needed
Happily, there's lots of simple ones
App
Console
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
By John-Philip Johansson
Frontend First
This was a presentation I held on a Meetup with XD Sthlm.
