Designing and Building Web Applications From the Front-End Backward

A different sort of approach to application design and development.

Created by Kris Walker / @kixxauth

Slides: www.kixx.name/presentations/from_front_end_backward/

Manage Complexity

The first goal of software is to manage real world complexity.

Everbody stop! I need to do an inner join query.

Design For The Wild

Jake in our snow cave.

There is only one way to find out if your design will perform in the wild.

The Interface IS The Application

Customers don't pay for code. They pay for a solution to a problem.

If the application is not designed around the UI, users will be left Scanning, satisficing, and muddling through your application.

Best Example Ever

Carved wooden maps.
  • You can keep it inside your mitten.
  • It floats if you drop it in the water.
  • Does not need to be made to scale.

Another Great Example

Palm Pilot sketch.

System Design and Architecture

Spend Time on Upstream Design

  • Problem Definition
  • Requirements
  • Architecture and Design

(all you agile practitioners may begin growning now)

Identify the hard problems early.

Sketching

  • Quick
  • Disposable
  • With a Clear Vocabulary
  • And Minimal Detail

The UI is the best place to start sketching.

  • UI sketches are easier than you make them out to be.
  • And, very easy to throw away.
  • And visual, so communicate well to all stakeholders.
  • Avoid details (when done right)

The Most Important Part of Sketching

Papers in a trash can.

Prototyping

  • Quick
  • Cheap
  • Isolated and Specific
  • To test and prove a hypothesis

The front-end is the best place to start prototyping.

  • Quick to build (if done right)
  • Cheap
  • Highlight weaknesses in requirements
  • Highlight implementation challenges

Some things you might want to prototype:

  • UI designs
  • CSS Components
  • Big impact technology (like Backbone.js, Angular.js, responsive CSS)
  • Frameworks (Rails, Laraval, Drupal, Wordpress, Django)

The Most Important Part of Prototyping

Papers in a trash can.

Manage Complexity With Layers.

Cow and calf, client server.

HTTP makes a really good natural divider between layers.

The front-end is your first line of defence against real world complexity.

Balance of Power Between Client and Server.

Dumb CRUD Server -- RESTful HTML

Backbone.js -- Minimal JavaScript

Development and Maintenance

Create a Surgical Team

Laproscopic surgery.
  • Surgeon
  • Assistant surgeon
  • Toolsmith
  • Administrator

Check out Fred Brooks Mythical Man-Month

Modular Web Development

  • Modular HTML, CSS, and JS components
  • Object Oriented CSS.

Development Speed

  • Use the best tools
  • Establish and follow conventions
  • Don't rewrite!!!

Review

An application should:

  • Conquer real world complexity
  • Preserve the time of developers

Begins and ends with front-end development.

The End

By Kris Walker / @kixxauth / www.kixx.name

More resources in the next slides »

Resources: Sketching

Resources: Prototyping

Resources: Development

Resources: Books