Download as KEY, PPTX
![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); ! ! ! } ! ! } ! };](https://image.slidesharecdn.com/velocitydeck-111114130907-phpapp02/75/IS-YOUR-WIDGET-FAST-FIVE-BEST-PRACTICES-TO-FASTER-EMBEDDABLE-CONTENT-19-2048.jpg)
Uploaded byIsmail Elshareef
IS YOUR WIDGET FAST? FIVE BEST PRACTICES TO FASTER EMBEDDABLE CONTENT
The document discusses best practices for creating fast embeddable widgets using HTML, CSS, and JavaScript. Key recommendations include avoiding DOM lifecycle events, embracing custom events, and providing a simple API to facilitate faster interactions. It emphasizes minimizing file sizes to reduce network latency and encourage developer collaboration.
IS YOUR WIDGET FAST? FIVE BEST PRACTICES TO FASTER EMBEDDABLE CONTENT
- 1. IS YOUR WIDGET FAST? FIVEBEST PRACTICES TO FASTER EMBEDDABLE CONTENT @ielshareef
- 2. ISMAIL ELSHAREEF OFFENSES: GRAND WEBSHENANIGANS (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 AWIDGET?
- 12. WHAT IS A FASTWIDGET?
- 13. FAST WIDGET (n.) A3rd-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 LIFECYCLEEVENTS 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 LIFECYCLEEVENTS 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 varmyWidgetInstance = new WidgetClass(config); myWidgetInstance.init(); myWidgetInstance.render(); myWidgetInstance.subscribe(“render”, function(data) { // Set of instructions executed when custom event “render” is executed. });
- 21.
- 22.
- 23.
- 24.
- 25. EMPOWER DEVELOPERS
- 26.
- 27. thank you @ielshareef