Web-First Design Patterns

1,882 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,882
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
53
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web-First Design Patterns

  1. 1. Web-First DesignPatternsMichael Mahemoff @mahemoff +mahemoff
  2. 2. Be Very Afraid
  3. 3. Evolution of Design PatternsThe Mother of All Design Principles The Mother of All Design Patterns Web-First Patterns Pattern-Fu
  4. 4. Static Websites
  5. 5. Interactive Websites
  6. 6. Single Page Apps
  7. 7. Modularity Principle
  8. 8. Tight Coupling
  9. 9. Tight Coupling
  10. 10. #highCohesion #lowCoupling#modularity #isolation#separationOfConcerns
  11. 11. #widget #webComponent#domainObject #module
  12. 12. A runtime configuration
  13. 13. Mediator
  14. 14. Good: No more coupling
  15. 15. Good: No more coupling
  16. 16. Good: Reuse elsewhere
  17. 17. Test DriverGood: We can test!
  18. 18. Semantic Events Pattern
  19. 19. eventA eventB eventC
  20. 20. shop cart item itemadded changed eventA eventB eventC item removed
  21. 21. #observer #listener #events #pubsub #mvc #messaging
  22. 22. Web-First
  23. 23. Automagic EventRegistration
  24. 24. eventA eventB eventCThe Problem: Event Registration
  25. 25. Timer = { init: function() { listen(“pageLoad”, this.onPageLoad); listen(“trialStart”, this.onTrialStart); listen(“trialEnd”, this.onTrialEnd); }}The Problem: Event Registration
  26. 26. Timer = { pageLoad: function() { … } trialStart: function() { … } trialEnd: function() { … } }Solution: Automagic Registration
  27. 27. 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
  28. 28. Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … }}
  29. 29. Timer = { pageLoad: function() { … } onTrialStart: function() { … } onTrialEnd: function() { … } } An example ofConvention Over Configuration
  30. 30. OOCSSScredit: Nicole Sullivan
  31. 31. h1 { background: blue; font-family: arial;}#account h1 { background: red;}#account h1:hover { border-color: black;} The Problem: CSS Jungle
  32. 32. .account { background: #f9a;}.heading { color: #882;} Solution: Use classes, not IDs or Tags
  33. 33. .account { background: #f9a;}.heading { color: #882;} Solution: Avoid hierarchies
  34. 34. ClassyHTML
  35. 35. Logged in? Show nameAllowed to rate? Managing your page? Show thumbs Show edit controls Leaving a comment? Show textarea The Problem: Complex Display Logic
  36. 36. function startEditing() { $(‘.titleInput’).show(); $(‘.mixPanel’).slideDown(); $(‘.comments’).fadeOut();}function stopEditing() { $(‘.titleInput’).hide(); $(‘.mixPanel’).slideUp(); $(‘.comments’).fadeIn();} The Problem: Complex Display Logic
  37. 37. $(html’).addClass(‘editing’);$(html’).removeClass(‘editing’);.mixPanel { display: none;}.editing .mixPanel { display: block;} Solution: Root-level class
  38. 38. $(html’).addClass(‘editing’);$(html’).removeClass(‘editing’);.comments { height: 0; position: absolute; transition: all 0.5s linear;}.editing .comments { height: 4em;} Solution: Root-level class
  39. 39. <div class=‘mixPanel forEditing’> ...</div>.forEditing { display: none;}.editing .forEditing { display: block;} Generalising It
  40. 40. a speculative pattern LiveTemplate
  41. 41. <! 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
  42. 42. <tr> <td>28.50</td> <td>48.50</td> <td>78.12</td> </tr> The Problem:Can’t transform representation
  43. 43. <ul class=‘accountTemplate’> <li>28.50</li> <li>48.50</li> <li>78.12</li></ul> Solution:Track the template
  44. 44. <ul class=‘accountTemplate’> <li>28.50</li> <li>48.50</li> <li>78.12</li> </ul> Solution:Or wait for <template> tag!
  45. 45. METATIPS:Pattern-Fu
  46. 46. A little chaos is okay(the world won’t end)
  47. 47. Agile+Lean: Technical Debt
  48. 48. Order out of chaos
  49. 49. Shuhari:Obey, Detach, Leave
  50. 50. Thankyou Michael Mahemoff @mahemoff +mahemoff

×