67
Michael Mahemoff @mahemoff +mahemoff Web-First Design Patterns

Web-First Design Patterns

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Web-First Design Patterns

Michael Mahemoff @mahemoff +mahemoff

Web-FirstDesign

Patterns

Page 2: Web-First Design Patterns
Page 3: Web-First Design Patterns

Be Very Afraid

Page 4: Web-First Design Patterns

Evolution of Design Patterns

The Mother of All Design Principles

Web-First Patterns

The Mother of All Design Patterns

Pattern-Fu

Page 5: Web-First Design Patterns
Page 6: Web-First Design Patterns
Page 7: Web-First Design Patterns
Page 8: Web-First Design Patterns
Page 9: Web-First Design Patterns
Page 10: Web-First Design Patterns

Static Websites

Page 11: Web-First Design Patterns

Interactive Websites

Page 12: Web-First Design Patterns

Single Page Apps

Page 13: Web-First Design Patterns
Page 14: Web-First Design Patterns
Page 15: Web-First Design Patterns

ModularityPrinciple

Page 16: Web-First Design Patterns

Tight Coupling

Page 17: Web-First Design Patterns

Tight Coupling

Page 18: Web-First Design Patterns
Page 19: Web-First Design Patterns

#highCohesion #lowCoupling

#modularity #isolation #separationOfConcerns

Page 20: Web-First Design Patterns

#widget #webComponent#domainObject #module

Page 21: Web-First Design Patterns

A runtime configuration

Page 22: Web-First Design Patterns

Mediator

Page 23: Web-First Design Patterns

Good: No more coupling

Page 24: Web-First Design Patterns

Good: No more coupling

Page 25: Web-First Design Patterns

Good: Reuse elsewhere

Page 26: Web-First Design Patterns

TestDriver

Good: We can test!

Page 27: Web-First Design Patterns

SemanticEventsPattern

Page 28: Web-First Design Patterns
Page 29: Web-First Design Patterns
Page 30: Web-First Design Patterns

eventA eventB eventC

Page 31: Web-First Design Patterns

eventA eventB eventC

shopcart

itemadded

item removed

itemchanged

Page 32: Web-First Design Patterns

#observer #listener #events #pubsub #mvc #messaging

Page 33: Web-First Design Patterns

Web-First

Page 34: Web-First Design Patterns

Automagic Event

Registration

Page 35: Web-First Design Patterns
Page 36: Web-First Design Patterns

The Problem: Event Registration

eventA eventB eventC

Page 37: Web-First Design Patterns

Timer = {

init: function() { listen(“pageLoad”, this.onPageLoad); listen(“trialStart”, this.onTrialStart); listen(“trialEnd”, this.onTrialEnd); }

}

The Problem: Event Registration

Page 38: Web-First Design Patterns
Page 39: Web-First Design Patterns

Timer = { pageLoad: function() { … } trialStart: function() { … } trialEnd: function() { … }}

Solution: Automagic Registration

Page 40: Web-First Design Patterns

AppMediator = {

init: function() {

var components=[Trial, Counter, …] var handlers = { init: [], trialStart: [], trialEnd: [] }

for (eventType in handlers) { components.forEach(function(component) { if (component[eventType]) handlers[eventType].push(component); } }

}

fire: function(eventType) { … }

}

Solution: Automagic Registration

Page 41: Web-First Design Patterns

Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … }}

Page 42: Web-First Design Patterns

Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … }}

An example ofConvention Over Configuration

Page 43: Web-First Design Patterns

OOCSSS

credit: Nicole Sullivan

Page 44: Web-First Design Patterns

h1 { background: blue; font-family: arial;}

#account h1 { background: red;}

#account h1:hover { border-color: black;}

The Problem:CSS Jungle

Page 45: Web-First Design Patterns

.account { background: #f9a;}

.heading { color: #882;}

Solution:Use classes, not IDs or Tags

Page 46: Web-First Design Patterns

.account { background: #f9a;}

.heading { color: #882;}

Solution:Avoid hierarchies

Page 47: Web-First Design Patterns

ClassyHTML

Page 48: Web-First Design Patterns

The Problem:Complex Display Logic

Logged in?Show name

Allowed to rate?Show thumbs

Leaving a comment?Show textarea

Managing your page?Show edit controls

Page 49: Web-First Design Patterns

function startEditing() { $(‘.titleInput’).show(); $(‘.mixPanel’).slideDown(); $(‘.comments’).fadeOut();}

function stopEditing() { $(‘.titleInput’).hide(); $(‘.mixPanel’).slideUp(); $(‘.comments’).fadeIn();}

The Problem:Complex Display Logic

Page 50: Web-First Design Patterns

$('html’).addClass(‘editing’);$('html’).removeClass(‘editing’);

Solution: Root-level class

.mixPanel { display: none;}

.editing .mixPanel { display: block;}

Page 51: Web-First Design Patterns

$('html’).addClass(‘editing’);$('html’).removeClass(‘editing’);

Solution: Root-level class

.comments { height: 0; position: absolute; transition: all 0.5s linear;}

.editing .comments { height: 4em;}

Page 52: Web-First Design Patterns

<div class=‘mixPanel forEditing’> ...</div>

Generalising It

.forEditing { display: none;}

.editing .forEditing { display: block;}

Page 53: Web-First Design Patterns

LiveTemplate

a speculative pattern

Page 54: Web-First Design Patterns

<! accounts.forEach(account) { > <li><!= account.balance ></li><! } >

The Problem:Even client-side templates are static

<ul> <li>28.50</li> <li>48.50</li> <li>78.12</li></ul>

Page 55: Web-First Design Patterns

The Problem:Can’t transform representation

<tr> <td>28.50</td> <td>48.50</td> <td>78.12</td></tr>

Page 56: Web-First Design Patterns

Solution:Track the template

<ul class=‘accountTemplate’> <li>28.50</li> <li>48.50</li> <li>78.12</li></ul>

Page 57: Web-First Design Patterns

Solution:Or wait for <template> tag!

<ul class=‘accountTemplate’> <li>28.50</li> <li>48.50</li> <li>78.12</li></ul>

Page 58: Web-First Design Patterns

METATIPS:Pattern-Fu

Page 59: Web-First Design Patterns

A little chaos is okay(the world won’t end)

Page 60: Web-First Design Patterns

Agile+Lean: Technical Debt

Page 61: Web-First Design Patterns

Order out of chaos

Page 62: Web-First Design Patterns
Page 63: Web-First Design Patterns
Page 64: Web-First Design Patterns
Page 65: Web-First Design Patterns
Page 66: Web-First Design Patterns

Shuhari:Obey, Detach, Leave

Page 67: Web-First Design Patterns

ThankyouMichael Mahemoff

@mahemoff+mahemoff