The document discusses different patterns for markup and JavaScript, including simple patterns using only HTML, patterns with additional logic implemented in JavaScript, and patterns with behavioral enhancements using JavaScript. It also covers some advantages of defining behaviors through JavaScript, such as improved maintainability, as well as potential disadvantages related to unnecessary code download. The conclusion recommends using JavaScript behaviors for shared interactions while being mindful of file size.

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