Highload JavaScript Framework without Inheritance

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 withsites of 70+ brands
• 5.
  New cool opensource 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, globalfor widgets  Events, bubbling up to the parent
• 13.
  Context  Widget hasaccess to the cloned context  On context’s change – reload widgets  Context’s caching to localStorage
• 14.
  High load?  AKAMAIrocks  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 errortracking  Move more stuff to front-end  OOP  MVC
• 16.
  A Slide withno 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.