Highload JavaScript Framework without Inheritance
Download as PPTX, PDF1 like710 views
The project involves a front-end with UI widgets and a back-end with services, databases (.Net and MongoDB), and several standalone systems that interact. The front-end integrates with sites from over 70 brands. Widgets are created and their versions managed, with pros being the ability to change everything in new versions while maintaining backward compatibility, and cons being needing to fix bugs in all versions and get brands to update. Communication between widgets uses events both globally and bubbling up from children. Context is cloned and widgets reload on context changes. Load testing and error tracking are used. Plans exist to move more to front-end, use OOP and MVC patterns.
![Internal widgets
OurFramework.createWidget('UserBar', {
setting1: true,
setting2: "light",
elements: [
{id: 'Login', settings: { /* ... */ }},
{id: 'ShareLinks', settings: { /* ... */ }},
// ...
]
});](https://image.slidesharecdn.com/random-130426024742-phpapp02/85/Highload-JavaScript-Framework-without-Inheritance-11-320.jpg)
Highload JavaScript Framework without Inheritance
- 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.