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

1. Patterns andbehaviors
Optimizations for markup and JavaScript
on top of patterns.

2. Content
• Simple pattern
• Pattern with logic
• Pattern with behavior
• Advantages / Disadvantages
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 2

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/1342159
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 3

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. 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. 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 File
Behaviors.add({
'[data-module="lightbox"]:click': showLightbox
});
// setbehaviors on DOM ready
$(Behaviors.update);
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 6

7. Advantages
Whatspeaksforusingbehaviors?
• Save blocking inline script
• Define / transportthecodeonlyonce
• JavaScript filesarecached
• Maintainabilityisimproved
• Update easilypossible
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 7

8. Disadvantages
Whatspeaksagainstbehaviors?
• Additional markup on elements
• Main disadvantage:
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 8

9. Disadvantage: Availability
The problem
Bigger JS logicmeansmoretransportevenif not needed:
Behaviors.add({
"[data-module="lightbox"]:click": function() {
// e.g. 100 lines and more…
}
});
• Nofittingmarkupmeans NO need
29.06.2012 Tobias Krogh | XING AG | Patters and behaviors 9

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