Pattern behaviors

410 views

Published on

Slides for a talk I held at the dec0de-meetup of the Frontend-Usergroup Hamburg

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

  • Be the first to like this

No Downloads
Views
Total views
410
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pattern behaviors

  1. 1. Patterns andbehaviors Optimizations for markup and JavaScript on top of patterns.
  2. 2. Content• Simple pattern• Pattern with logic• Pattern with behavior• Advantages / Disadvantages29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 2
  3. 3. Tobias Krogh• Frontend Engineer (role of an architect)• 27 years old• XING AG for two years and a quarter• jQuery is my favorite library :-)• NO twitter account to be followed• xing.to/bias• stackoverflow.com/users/134215929.06.2012 Tobias Krogh | XING AG | Patters and behaviors 3
  4. 4. HTML (simple pattern)HTML<divclass="my-pattern-class"><h4>Wow, I am a headline</h4><a href="/form">showtheform</a></div>CSS.my-pattern-class {padding: 10px;}29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 4
  5. 5. HTML / JS (pattern with logic)HTML<divid="foobar" class="my-pattern-class"><h4>Wow, I am a headline</h4><a href="/form">showtheform</a></div><script> // assuming an existingfunction "showLightbox" $("#foobara").click(showLightbox);</script>29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 5
  6. 6. HTML / JS (pattern with behavior)HTML<divclass="my-pattern-class"><h4>Wow, I am a headline</h4><a data-module="lightbox"href="/form">showtheform</a></div>JS FileBehaviors.add({ [data-module="lightbox"]:click: showLightbox});// setbehaviors on DOM ready$(Behaviors.update);29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 6
  7. 7. Advantages Whatspeaksforusingbehaviors?• Save blocking inline script• Define / transportthecodeonlyonce• JavaScript filesarecached• Maintainabilityisimproved• Update easilypossible29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 7
  8. 8. Disadvantages Whatspeaksagainstbehaviors?• Additional markup on elements• Main disadvantage:29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 8
  9. 9. Disadvantage: Availability The problemBigger JS logicmeansmoretransportevenif not needed:Behaviors.add({ "[data-module="lightbox"]:click": function() { // e.g. 100 lines and more… }});• Nofittingmarkupmeans NO need29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 9
  10. 10. Conclusion• Use JS behaviors• Most practicalforspreadsimilarscripts• Design and interaction will besimilar• Document to makeotherdevelopers happy :-)• Keepfilesize in mind (use AMD) ;-)29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 10

×