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" }
}
}
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.
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.
