Project Front-end – UI widgets Back-end – services & DB (.Net, MSSQL,MongoDB), several stand-alone systems thatinteract ...
Project Integration with sites of 70+ brands
New cool open source libvar originalAddEventListener = window.addEventListener;window.addEventListener = function (){// so...
Styles overriding.brandsPage .widgedContainer .linksContainer .superLink.a {color: red;}.superLink.a {color: red !importan...
Widgets’ Versions Pros: We can change everything in new version Back compatibility Safe deployment to production Cons...
Inheritance in JSif (typeof Object.create !== function) {Object.create = function (o) {function F() {}F.prototype = o;retu...
Widgetvar TestWidget = (function (){// ...// $this - $this.context, $this,settings, ...// $core// $, _, Modernizr, ...retu...
Widget’s usageOurFramework.createWidget(TestWidget, {setting1: true,setting2: "light",containerId: "testWidget"}, function...
Internal widgetsOurFramework.createWidget(UserBar, {setting1: true,setting2: "light",elements: [{id: Login, settings: { /*...
Communication Events, global for widgets Events, bubbling up to the parent
Context Widget has access to the cloned context On context’s change – reload widgets Context’s caching to localStorage
High load? AKAMAI rocks Report tracking (via pixel) Local storage and 3-r party APIs AppDynamics & other server profil...
Plans Client-side error tracking Move more stuff to front-end OOP MVC
A Slide with no usefulInformation at all Just filling the gap between previous slide and thenext one (which will be along...
Highload JavaScript Framework without Inheritance
Highload JavaScript Framework without Inheritance
Highload JavaScript Framework without Inheritance
Highload JavaScript Framework without Inheritance
Upcoming SlideShare
Loading in …5
×

Highload JavaScript Framework without Inheritance

544 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
544
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Highload JavaScript Framework without Inheritance

  1. 1. Project Front-end – UI widgets Back-end – services & DB (.Net, MSSQL,MongoDB), several stand-alone systems thatinteract with each other Integration with sites of 70+ brands
  2. 2. Project Integration with sites of 70+ brands
  3. 3. New cool open source libvar originalAddEventListener = window.addEventListener;window.addEventListener = function (){// some code with from time to time errororiginalAddEventListener.apply(/*...*/);}
  4. 4. Styles overriding.brandsPage .widgedContainer .linksContainer .superLink.a {color: red;}.superLink.a {color: red !important;}
  5. 5. 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
  6. 6. Inheritance in JSif (typeof Object.create !== function) {Object.create = function (o) {function F() {}F.prototype = o;return new F();};}newObject = Object.create(oldObject);
  7. 7. Widgetvar TestWidget = (function (){// ...// $this - $this.context, $this,settings, ...// $core// $, _, Modernizr, ...return {render: function (container,onComplete, isReload){// ...onComplete()}};})();
  8. 8. Widget’s usageOurFramework.createWidget(TestWidget, {setting1: true,setting2: "light",containerId: "testWidget"}, function(widget) {widget.doSomething(10, "20");});OurFramework.addEventListener(UserBar.Login.onLoggedIn,function(event, object){// ...});
  9. 9. Internal widgetsOurFramework.createWidget(UserBar, {setting1: true,setting2: "light",elements: [{id: Login, settings: { /* ... */ }},{id: ShareLinks, settings: { /* ... */ }},// ...]});
  10. 10. Communication Events, global for widgets Events, bubbling up to the parent
  11. 11. Context Widget has access to the cloned context On context’s change – reload widgets Context’s caching to localStorage
  12. 12. 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)
  13. 13. Plans Client-side error tracking Move more stuff to front-end OOP MVC
  14. 14. A Slide with no usefulInformation at all Just filling the gap between previous slide and thenext one (which will be along in just a moment). No need to write it down, unless you feelcompleted to do so. Nothing on this slide is examinable. In fact I’m not really sure why I bothered with it.

×