web-first design patterns
DESCRIPTION
TRANSCRIPT
![Page 1: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/1.jpg)
Michael Mahemoff @mahemoff +mahemoff
Web-FirstDesign
Patterns
![Page 2: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/2.jpg)
![Page 3: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/3.jpg)
Be Very Afraid
![Page 4: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/5.jpg)
![Page 6: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/6.jpg)
![Page 7: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/7.jpg)
![Page 8: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/8.jpg)
![Page 9: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/9.jpg)
![Page 10: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/10.jpg)
Static Websites
![Page 11: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/11.jpg)
Interactive Websites
![Page 12: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/12.jpg)
Single Page Apps
![Page 13: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/13.jpg)
![Page 14: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/14.jpg)
![Page 15: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/15.jpg)
ModularityPrinciple
![Page 16: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/16.jpg)
Tight Coupling
![Page 17: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/17.jpg)
Tight Coupling
![Page 18: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/18.jpg)
![Page 19: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/19.jpg)
#highCohesion #lowCoupling
#modularity #isolation #separationOfConcerns
![Page 20: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/20.jpg)
#widget #webComponent#domainObject #module
![Page 21: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/21.jpg)
A runtime configuration
![Page 22: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/22.jpg)
Mediator
![Page 23: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/23.jpg)
Good: No more coupling
![Page 24: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/24.jpg)
Good: No more coupling
![Page 25: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/25.jpg)
Good: Reuse elsewhere
![Page 26: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/26.jpg)
TestDriver
Good: We can test!
![Page 27: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/27.jpg)
SemanticEventsPattern
![Page 28: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/28.jpg)
![Page 29: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/29.jpg)
![Page 30: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/30.jpg)
eventA eventB eventC
![Page 31: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/31.jpg)
eventA eventB eventC
shopcart
itemadded
item removed
itemchanged
![Page 32: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/32.jpg)
#observer #listener #events #pubsub #mvc #messaging
![Page 33: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/33.jpg)
Web-First
![Page 34: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/34.jpg)
Automagic Event
Registration
![Page 35: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/35.jpg)
![Page 36: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/36.jpg)
The Problem: Event Registration
eventA eventB eventC
![Page 37: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/37.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/38.jpg)
![Page 39: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/39.jpg)
Timer = { pageLoad: function() { … } trialStart: function() { … } trialEnd: function() { … }}
Solution: Automagic Registration
![Page 40: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/40.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/41.jpg)
Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … }}
![Page 42: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/42.jpg)
Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … }}
An example ofConvention Over Configuration
![Page 43: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/43.jpg)
OOCSSS
credit: Nicole Sullivan
![Page 44: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/44.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/45.jpg)
.account { background: #f9a;}
.heading { color: #882;}
Solution:Use classes, not IDs or Tags
![Page 46: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/46.jpg)
.account { background: #f9a;}
.heading { color: #882;}
Solution:Avoid hierarchies
![Page 47: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/47.jpg)
ClassyHTML
![Page 48: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/48.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/49.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/50.jpg)
$('html’).addClass(‘editing’);$('html’).removeClass(‘editing’);
Solution: Root-level class
.mixPanel { display: none;}
.editing .mixPanel { display: block;}
![Page 51: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/51.jpg)
$('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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/52.jpg)
<div class=‘mixPanel forEditing’> ...</div>
Generalising It
.forEditing { display: none;}
.editing .forEditing { display: block;}
![Page 53: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/53.jpg)
LiveTemplate
a speculative pattern
![Page 54: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/54.jpg)
<! 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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/55.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/56.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/57.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/58.jpg)
METATIPS:Pattern-Fu
![Page 59: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/59.jpg)
A little chaos is okay(the world won’t end)
![Page 60: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/60.jpg)
Agile+Lean: Technical Debt
![Page 61: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/61.jpg)
Order out of chaos
![Page 62: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/62.jpg)
![Page 63: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/63.jpg)
![Page 64: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/64.jpg)
![Page 65: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/65.jpg)
![Page 66: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/66.jpg)
Shuhari:Obey, Detach, Leave
![Page 67: Web-First Design Patterns](https://reader034.vdocuments.net/reader034/viewer/2022051609/547bd9a3b379594e2b8b4e43/html5/thumbnails/67.jpg)
ThankyouMichael Mahemoff
@mahemoff+mahemoff