1. Web-First
Design
Patterns
Michael Mahemoff @mahemoff +mahemoff

3. Be Very Afraid

4. Evolution of Design Patterns
The Mother of All Design Principles
The Mother of All Design Patterns
Web-First Patterns
Pattern-Fu

10. Static Websites

11. Interactive Websites

12. Single Page Apps

15. Modularity
Principle

16. Tight Coupling

17. Tight Coupling

19. #highCohesion
#lowCoupling
#modularity #isolation
#separationOfConcerns

20. #widget #webComponent
#domainObject #module

21. A runtime configuration

22. Mediator

23. Good: No more coupling

24. Good: No more coupling

25. Good: Reuse elsewhere

26. Test
Driver
Good: We can test!

27. Semantic
Events
Pattern

30. eventA eventB eventC

31. shop
cart
item item
added changed
eventA eventB eventC
item removed

32. #observer #listener
#events #pubsub
#mvc #messaging

33. Web-First

34. Automagic
Event
Registration

36. eventA eventB eventC
The Problem: Event Registration

37. Timer = {
init: function() {
listen(“pageLoad”, this.onPageLoad);
listen(“trialStart”, this.onTrialStart);
listen(“trialEnd”, this.onTrialEnd);
}
}
The Problem: Event Registration

39. Timer = {
pageLoad: function() { … }
trialStart: function() { … }
trialEnd: function() { … }
}
Solution: Automagic Registration

40. 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

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

42. Timer = {
pageLoad: function() { … }
onTrialStart: function() { … }
onTrialEnd: function() { … }
}
An example of
Convention Over Configuration

43. OOCSSS
credit: Nicole Sullivan

44. h1 {
background: blue;
font-family: arial;
}
#account h1 {
background: red;
}
#account h1:hover {
border-color: black;
}
The Problem:
CSS Jungle

45. .account {
background: #f9a;
}
.heading {
color: #882;
}
Solution:
Use classes, not IDs or Tags

46. .account {
background: #f9a;
}
.heading {
color: #882;
}
Solution:
Avoid hierarchies

47. Classy
HTML

48. Logged in?
Show name
Allowed to rate? Managing your page?
Show thumbs Show edit controls
Leaving a comment?
Show textarea
The Problem:
Complex Display Logic

49. function startEditing() {
$(‘.titleInput’).show();
$(‘.mixPanel’).slideDown();
$(‘.comments’).fadeOut();
}
function stopEditing() {
$(‘.titleInput’).hide();
$(‘.mixPanel’).slideUp();
$(‘.comments’).fadeIn();
}
The Problem:
Complex Display Logic

50. $('html’).addClass(‘editing’);
$('html’).removeClass(‘editing’);
.mixPanel {
display: none;
}
.editing .mixPanel {
display: block;
}
Solution: Root-level class

51. $('html’).addClass(‘editing’);
$('html’).removeClass(‘editing’);
.comments {
height: 0;
position: absolute;
transition: all 0.5s linear;
}
.editing .comments {
height: 4em;
}
Solution: Root-level class

52. <div class=‘mixPanel forEditing’>
...
</div>
.forEditing {
display: none;
}
.editing .forEditing {
display: block;
}
Generalising It

53. a speculative pattern
Live
Template

54. <! accounts.forEach(account) { >
<li><!= account.balance ></li>
<! } >
<ul>
<li>28.50</li>
<li>48.50</li>
<li>78.12</li>
</ul>
The Problem:
Even client-side templates are static

55. <tr>
<td>28.50</td>
<td>48.50</td>
<td>78.12</td>
</tr>
The Problem:
Can’t transform representation

56. <ul class=‘accountTemplate’>
<li>28.50</li>
<li>48.50</li>
<li>78.12</li>
</ul>
Solution:
Track the template

57. <ul class=‘accountTemplate’>
<li>28.50</li>
<li>48.50</li>
<li>78.12</li>
</ul>
Solution:
Or wait for <template> tag!

58. METATIPS:
Pattern-Fu

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

60. Agile+Lean: Technical Debt

61. Order out of chaos

66. Shuhari:
Obey, Detach, Leave

67. Thankyou
Michael Mahemoff
@mahemoff
+mahemoff