Melbourne PHP User Group

20 Sept 2010

Web Design Patterns

Russell Searle

Where do we find patterns?

Benefits of patterns

Limitations of patterns

How to approach and use them

Patterns in:

•Web solution collections

•Frameworks

•Code and component libraries

•Design grids

Agenda

Anywhere and any time we:

•Consider implementation options

•Evaluate our own or others' potential solutions

•Use code or component libraries

•Interface objects, classes, structures, subsystems, applications, networks

•Connect tab A to slot B

Where do we find patterns?

Productivity

•Reuse existing code

•Reduce effort right across SDLC

•Share proven, tested code

•Common repository and coverage

Quality

•Best practice

•More efficient code

•Standard solutions and conventions

Functionality

•Professional, expert code

•Industry validated solutions

•Extensive community contributions

Benefits of patterns

(Intentionally) limited scope

•Concerned with OO object / class interfaces and coordination

•Limited application to non-OO application domains (eg. Drupal, most ERPs)

•Limited relevance to Web 2.0 app requirements, tool sets and code bases

Limitations of GoF patterns

Emphasise answers instead of questions

•Creates bias to make new questions fit one of our known answers

•Inhibits new solutions = innovation

•The good is the enemy of the best

•IMHO we need to get much better at asking questions

Potential dangers of patterns

We do have good solutions to many problems

Use them within their limitations

Know how to analyse / categorise problems

Know where to find solutions, e.g.:

•Pattern collections

•Frameworks

•Code and component libraries

•Design grids

Suggested approach to using patterns

Core J2EE patterns (some overlap with GoF)

Yahoo Design Pattern Library

Google Web Toolkit (anti-patterns?)

Others

Web solution collections

Web solutions

•Accordion, tabbed panel

•Add / subscribe, invite

•Auto-complete

•Breadcrumbs

•Calendar picker

•Dim and highlight

•Drag and drop

•Navigation: many styles and artefacts

•Promote, points, top X

•Tag cloud

•Transitions: many types

•… many more

OO structural patterns á la GoF•MVC (Model - View - Controller)

•IoC (Inversion of Control) / Dependency Injection

•Persistence: JPA, Hibernate, iBatis

•Integration: Spring Integration, Spring Batch

•Web flow: Struts, Spring Web Flow

•Faces: JSF, Spring Faces

Solution and project structure•Java EE Blueprints

•GWT

•… more: see frameworks

Patterns in web solution collections

Frameworks•Zend Framework•Symfony•CodeIgniter•CakePHP•Yii•... more

Apps built on frameworks•Smarty•Joomla!•Drupal•... more

Frameworks

Note: Links in this presentation lead to class or API references rather than project home pages

Autoloader

Image manipulation

Language, I18N

Log

Mail

Output

REST, XML-RPC

Storage

Session

Typography

Unit Testing

Web Services

MVC: nearly all frameworks

IoC / Dependency Injection: Symfony

Persistence / ORM: Doctrine, Propel, PDO

Messaging: JMS, dropr, beanstalkd

User, ACL, Security, Encryption

Cache

Generator

Config

Calendar

Debug, Exception

Filter

Form, Validators

Patterns in frameworks

jQuery

ExtJS

YUI

Dojo

Mootools

Prototype

... more

Code and component libraries

Unified DOM query

Get elements by type, class, ID, group, parent, child, sibling

Set attributes of elements

Event handling and routing

Object manipulation

Animation

Interaction

Additional controls and widgets

Patterns in code libraries

Golden Grid CSS

960 Grid

1KB Grid

Tripoli

Blue Trip

Elastic CSS

Blueprint

YAML

… more

… and the Grid System Generator

Design grids

Page layout and management

Columns and blocks

Margins, padding and containers

CSS positioning methods, including fine grids

Patterns in design grids

The end