Web-First Design Patterns
Upcoming SlideShare
Loading in...5
×
 

Web-First Design Patterns

on

  • 1,635 views

 

Statistics

Views

Total Views
1,635
Views on SlideShare
1,597
Embed Views
38

Actions

Likes
3
Downloads
50
Comments
0

1 Embed 38

http://lanyrd.com 38

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web-First Design Patterns Web-First Design Patterns Presentation Transcript

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