by Mikita Manko on http://bit.ly/Mikita_Manko

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.