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
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