Frontend First
A way of working.
John-Philip "JP" Johansson
basic Idea
Traditionally
backend -> frontend
Instead
frontend -> backend
but first
HTML prototypes
Wireframe
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/631092/pasted-from-clipboard.png)
Mockup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/631095/pasted-from-clipboard.png)
browser
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/631229/bizarro.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/631224/bower.gif)
consistent data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/632892/pasted-from-clipboard.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seriema/images/632906/pasted-from-clipboard.png)
(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.
- 3,510