Frontend First
Me, myself, and I
- John-Philip "JP" Johansson
- Consultant
- UX
- Code (AKA "the reality")
The basic idea
Classic process
Requirements
Backend
Frontend
Customer
Change
requests
Modern process
Requirements
Backend
Frontend
Customer
Change
requests
Frontend First
Req.
Back.
Front.
Customer
Change
requests
Customer
Change
requests
"Agile"?
Iterate as needed.
Non-technical analogy
There's a reason you don't start hammering...
Why would that work?
"People don't know what they want until you show it to them.”
- Steve Jobs
Changes are expensive
At least for the customer...
You can't use what you can't interact with
So don't build what you don't need
Especially (in) the backend
Customers sees the frontend
- A true story
The Wireframe
We:
"This is what we're thinking."
Customer:
"Nice, but need more details."
The Mockup
We:
"This is our artist rendition."
Customer:
"We approve."
The Browser
We:
"There! We're done."
Customer:
"... This is not what we approved."
What happened?
- Technical limitations
- Browser(s)
- Backend
- Starts with high expectations and goes down
- Didn't consider interaction or devices
Back to reality
Prototype in the browser
- interactions
- responsiveness (different screen sizes)
- actual looks
= Superior to mockups
But why stop there?
Today JavaScript can fill the gaps.
You don't need a backend.
Build the whole
@#€% website!
Without a backend!
While doing this I've encountered, and solved, a few problems...
Danger!
Things are going to get a bit technical.
Are you sure you want to proceed? Y/n
Problem #1
Storage
Not a problem.
HTML, CSS, and JS are simple text files.
Problem #2
Creating (sample) content
Note:
Regardless of method,
this is always a problem.
"Content"
As in texts, headlines, images, videos, links, etc.
Don't use
lorem ipsum
Title Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.
Title Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.
Example of "lorem ipsum"
Inspiration: Blend (editor)
Sample generators
Problem #3
Handling content
"Jason"?
Java-
Script
Object
Notation
Example
{
"name": "Fancy t-shirt",
"info": {
"color": "red",
"size": "XXL"
},
"price": 199
}Easy to...
- edit
- version control
- store
- integrate with code
- use for unit tests
- blueprint for API
Also consider
JSON-Schema
Problem #4
Serving content
Technical caveat:
JSON needs a server...
Even though JSON is just a text file, the browser expects some extra information.
Use an IDE
("advanced text editor")
Run from terminal
Mac users:
'python -m SimpleHTTPServer'
Use an online service
- Apiary
- (More tips welcome!)
Problem #5
Storing user state
To simulate:
- Sign up / log in
- Remember searches
- React to choices
Browser storage
- cookies
- localStorage
Can't be shared with others though!
Online storage services
Don't worry about it,
it's just dummy data anyway.
Create your own NoSQL DB
- MongoDB, CouchDB, etc
- Host it online
- Host it locally
Backend territory alert?
Still just sample data.
Problem #6
Transitioning to a real backend
"Jason"!
Backend devs know it
API Blueprint
Free stuff!
Doing this right lets you...
- easily change frontend without changing backend
- improve developer focus and efficiency
- have better automated tests
- open up the API to the public (it's popular!)
- reuse the API for other apps, services, etc
Demos
Angular apiMock
Wikipedia translate
Fotbollskalendern
TodoMVC
Invoice App
Summary
There's no silver bullet, but...
- Keep it simple
- Separate content data from HTML
- Don't use Lorem Ipsum
- Work towards an API
- Use whatever you can to mock
- Prove your interface first
- Don't build what you don't need
Resources
Articles
Websites
Thank you
Any questions?
Frontend First (updated)
By John-Philip Johansson
Frontend First (updated)
Given at a presentation at Avanade Stockholm
