Widgets have a bad rap but they are also a fact of life. Starting from the most ubiquitous (e.g. ads) to the niche, widgets are everywhere. These slides present five best practices that lead to fast, unobtrusive embeddable code that is a welcome addition on any page.

1. IS YOUR
WIDGET FAST?
FIVE BEST PRACTICES
TO FASTER
EMBEDDABLE
CONTENT
@ielshareef

2. ISMAIL ELSHAREEF
OFFENSES:
GRAND WEB SHENANIGANS (15 YRS.)
SECRET JAVASCRIPT OPERATIVE (9 YRS.)
RUNNING A CELL OF WEB NINJAS (5 YRS.)
CURRENT OFFENSES:
OPEN API PLATFORM PROLIFERATION AT
EDMUNDS.COM
WAYS OF CONTACT:
@IELSHAREEF

3. WHAT IS A WIDGET?

12. WHAT IS A
FAST WIDGET?

13. FAST WIDGET
(n.) A 3rd-party codebase written
in HTML, CSS and JavaScript that:
1. Gets out of the way
2. Gives up control
3. Responds quickly

14. UM, WHAT’S THAT
MEAN?

15. Get out of
the way
It’s cool

16. AVOID DOM
LIFECYCLE EVENTS
window.addEventListener(“load”, function() {
! ! // set of instructions
// only executed when load event fires
! }, false);
window.addEventListener(“DOMContentLoaded”, function() {
! ! // set of instructions
// only executed when DOM is ready
! }, false);

17. AVOID DOM
LIFECYCLE EVENTS
X
window.addEventListener(“load”, function() {
! ! // set of instructions
X
// only executed when load event fires
! }, false);
window.addEventListener(“DOMContentLoaded”, function() {
! ! // set of instructions
// only executed when DOM is ready
! }, false);

18. Give up
control?
really?

19. EMBRACE CUSTOM
EVENTS
this.subscribe = function(evtName, fn) {
! ! _events[evtName] = (!_events[evtName]) ? [] : _events[evtName];
! ! _events[evtName].push(fn);
! };
! this.fire = function(evtName) {
! ! if (_events[evtName]) {
! ! ! var len = _events[evtName].length;
! ! ! for(var i=0; i<len; i++) {
! ! ! ! _events[evtName][i].call(this, evtName);
! ! ! }
! ! }
! };

20. PROVIDE AN API
var myWidgetInstance = new WidgetClass(config);
myWidgetInstance.init();
myWidgetInstance.render();
myWidgetInstance.subscribe(“render”, function(data) {
// Set of instructions executed when custom event
“render” is executed.
});

21. Respond
quickly...

22. SERVE FEWER FILES

23. NETWORK LATENCY
MATTERS

24. ⦁

25. EMPOWER DEVELOPERS

26. HELP THEM
HELP YOU!

27. thank
you
@ielshareef