Frontend First

John-Philip Johansson

www.johansson.jp

@seriemajp

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

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

  • 1,174
Loading comments...

More from John-Philip Johansson