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.

  • 1,400