Frontend First
A way of working.
John-Philip "JP" Johansson
Disclaimers
This is a lightning talk,
so expect gaps.
This is my first week with you,
so I might be saying what you already know/do/tried.
The demos could be better,
so that might be my hackday next month. ;)
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
Simpler schema
JSON -> JSON Schema
TESTING
JSON Schema to verify both .json file and API
Test .json file directly against the API
Alternatively use Blueprint:
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!
Demo 1 : angular apimock
Demo 2 : wikipedia translate
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 - lightning talk and disclaimer edition
By John-Philip Johansson
Frontend First - lightning talk and disclaimer edition
I shortened version of my presentation for a presentation to my co-workers at EPiServer.
