Designing and Building Web Applications From the Front-End Backward
A different sort of approach to application design and development.
Created by Kris Walker
The first goal of software is to manage real world complexity.
Everbody stop! I need to do an inner join query.
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
- 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
System Design and Architecture
Spend Time on Upstream Design
- Problem Definition
- Architecture and Design
(all you agile practitioners may begin growning now)
Identify the hard problems early.
- 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
- 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)
- 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
Manage Complexity With Layers.
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
Development and Maintenance
Create a Surgical Team
- Assistant surgeon
Check out Fred Brooks Mythical Man-Month
Modular Web Development
- Modular HTML, CSS, and JS components
- Object Oriented CSS.
- Use the best tools
- Establish and follow conventions
- Don't rewrite!!!
An application should:
- Conquer real world complexity
- Preserve the time of developers
Begins and ends with front-end development.