High-load JavaScript framework without inheritance

tips, tricks and practices from high-load

Transcript

1. JavaScript Framework without "inheritance" ”high-load"
2. Author } Company: blah } Name: blah blah } Experience: blah blah blah
3. Project } Front-end – UI widgets } Back-end – services & DB  (.Net, MSSQL, MongoDB), several stand-alone systems that interact with each other } Integration with sites of 70+ brands
4. Project } Integration with sites of 70+ brands
5. New cool open source lib var originalAddEventListener = window.addEventListener; window.addEventListener = function (){ // some code with from time to time error originalAddEventListener.apply(/*...*/); }
6. Styles overriding .brandsPage .widgedContainer .linksContainer .superLink.a { color: red; } .superLink.a { color: red !important; }
7. Widgets’ Versions } Pros: }  We can change everything in new version }  Back compatibility   }  Safe deployment to production } Cons: }  Bugs should be fixed in all version }  Need to force 70+ brands to update widgets version }  We need to support old versions due to the “slowpoke” brands
8. Inheritance in JS if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } newObject = Object.create(oldObject);
9. Widget var TestWidget = (function (){ // ... // $this - $this.context, $this,settings, ... // $core // $, _, Modernizr, ... return { render: function (container, onComplete, isReload){ // ... onComplete() } }; })();
10. Widget’s usage OurFramework.createWidget('TestWidget', { setting1: true, setting2: "light", containerId: "testWidget"}, function(widget) { widget.doSomething(10, "20"); }); OurFramework.addEventListener('UserBar.Login.onLoggedIn', function(event, object){ // ... });
11. Internal widgets OurFramework.createWidget('UserBar', { setting1: true, setting2: "light", elements: [ {id: 'Login', settings: { /* ... */ }}, {id: 'ShareLinks', settings: { /* ... */ }}, // ... ] });
12. Communication } Events, global for widgets } Events, bubbling up to the parent
13. Context } Widget has access to the cloned context } On context’s change – reload widgets } Context’s caching to localStorage
14. High load? } AKAMAI rocks } Report tracking (via pixel)   } Local storage and 3-r party APIs } AppDynamics & other server profilers } Client-side profiling } Jmeter load tests } Anti spam for comments } Jasmine } UI tests - selenium } Mobile optimized (O_OP is here)
15. Plans } Client-side error tracking   } Move more stuff to front-end } OOP } MVC
16. A Slide with no useful Information at all } Just filling the gap between previous slide and the next one (which will be along in just a moment). } No need to write it down, unless you feel completed to do so. } Nothing on this slide is examinable. } In fact I’m not really sure why I bothered with it.
17. Questions } Do you have any Qs?
18. Author } Sr. Software Engineer @ EPAM } mailto: gmail@MikitaManko.com } twitter: @MikitaManko