some approaches in modern web development vivisection of a js framework it rally may 2014 roman melnyk softserve 

May 17, 2014 approaches in webdev @ it rally 2 | 36 web app as is http:// 

May 17, 2014 approaches in webdev @ it rally 3 | 36 web app as is / server side data wrappers / statics #content {} $(function () {}); controllers http:// 

May 17, 2014 approaches in webdev @ it rally 4 | 36 web app as is / client side 

May 17, 2014 approaches in webdev @ it rally 5 | 36 web app as is / not too simple 

May 17, 2014 approaches in webdev @ it rally 6 | 36 web app: under the hood approaches we use at the frontend html handling user event handling mvc components data transport template engine model organizer oop approach 

May 17, 2014 approaches in webdev @ it rally 7 | 36 web app: framework vivisection js framework: how it's made angular ext ember backbone 

May 17, 2014 approaches in webdev @ it rally 8 | 36 js: html handling no big issues in general however, opacity (ie8) dimension calculation, positioning calculating the results of css form handling, validating 

May 17, 2014 approaches in webdev @ it rally 9 | 36 js: user events different event{} support in ie/w3-browsers handler(event) {} vs window.event event{} structure attachEvent() vs addEventListener() 

May 17, 2014 approaches in webdev @ it rally 10 | 36 js: data transport no big issues here edge features are hardly ever used local storage sockets comet, lpr interfaces should be standardized for each transport type 

May 17, 2014 approaches in webdev @ it rally 11 | 36 js: template engine replacing of {{index}} with the content of model[ index ] some sugar: if, foreach, scope moving based on resolve (obj, path) {} path is '.'-separated string return value || undefined; // or '' 

May 17, 2014 approaches in webdev @ it rally 12 | 36 js: oop pitfalls aggregation: loose typing brings advantages inheritance via for-in loop via Child.prototype = new Parent(); encapsulation: scoping comes to rescue! polymorphism: js is type-promiscuous we have cookies mixines and this-tricks! statics references 

May 17, 2014 approaches in webdev @ it rally 13 | 36 how it's made angular ext ember backbone 

May 17, 2014 approaches in webdev @ it rally 14 | 36 how it's made: ext way html handling html is generated based on js (wat!?) direct html handling not the way of the ext jedi is querySelectorAll() is used the dom item is placed into the Ext.Element (as .el.dom) the Ext.Element contains all the sugar 

May 17, 2014 approaches in webdev @ it rally 15 | 36 how it's made: ext way html handling the Ext.CompositeElement works as the array of Ext.Elements with some methods attached directly to the array CompositeElement = [ el1, el2, … ]; CompositeElement.add = function (el) { if ( this.indexOf(el) > -1 ) { this.push(el); } } 

May 17, 2014 approaches in webdev @ it rally 16 | 36 how it's made: ext way template engine strings inside the js code own tags as control sequences '' + '…' + '' able to eval() some expressions actually, the eval() resides in the code uses classic resolve() principle own XTemplate{} for each template in the code memory leaks? 

May 17, 2014 approaches in webdev @ it rally 17 | 36 js: event-driven development there is an event storage on the host object: Host.eventHub = { evtName1: [ hnd1(){...}, hnd2(){...}, ... ], evtName2: [ hnd3(){...}, hnd4(){...}, ... ], ... }; 

May 17, 2014 approaches in webdev @ it rally 18 | 36 js: event-driven development attaching handlers to the certain event: Host.attachEvent = function (eventName, handler) { Host.eventHub[ eventName ].push( handler ); }; firing the event and triggering all handlers: Host.fireEvent = function (eventName) { Host.eventHub[ eventName ].forEach( function (event) { event(); } ); }; 

May 17, 2014 approaches in webdev @ it rally 19 | 36 js: event-driven development the host fires events sometimes: Host.load = function () { // ... Host.fireEvent('load'); }; the guest object attaches listeners: Guest = { // ... Host.attachEvent('load', function () {...}); }; 

May 17, 2014 approaches in webdev @ it rally 20 | 36 how it's made: ext way data transport ajax, jsonp, local storage, memory wrappers for interface standardizing transport objects are connected to the mvc components 

May 17, 2014 approaches in webdev @ it rally 21 | 36 how it's made: ext way oop realization for-in object extension constructors are created and stored for each custom object they are run via new Function('name', 'parm', '/* magic text */') constructors provide both public props/methods and private ones setters/getters/resetters are provided for privates 

May 17, 2014 approaches in webdev @ it rally 22 | 36 how it's made: angular way html handling direct html handling is not the typical ng way angular.element() based on the jquery/jqlite yes, $-like functionality it's used widely inside the ng access to html fragments via ng-attributes access to blocks rather then certain elements 

May 17, 2014 approaches in webdev @ it rally 23 | 36 how it's made: angular way template engine using of existing html with ng-attribs template engine uses precise dom handling: el.cloneNode el.$destroy() 

May 17, 2014 approaches in webdev @ it rally 24 | 36 how it's made: angular way event handling automatic events assigning via ng-attributes $q as a promise realization instead of callbacks hell 

May 17, 2014 approaches in webdev @ it rally 25 | 36 how it's made: angular way oop handling oop engine → modules angular.module() module.config() module.value() some sugar angular.extend() angular.copy() 

May 17, 2014 approaches in webdev @ it rally 26 | 36 how it's made: angular way oop handling module.config([name, function ($name) { /* do something with $name */ }]); the module.config() method runs the handler and passes the module[ name ] as the parameter so you can do whatever you want with it 

May 17, 2014 approaches in webdev @ it rally 27 | 36 how it's made: ember way html handling ember way does not like direct dom influence actually, nobody likes it use templates, dude 

May 17, 2014 approaches in webdev @ it rally 28 | 36 how it's made: ember way template engine using of existing html but inside the ... hbs creates the object from the template with all the functionality we need: var src = $('[type=text/x-handlebars]').html(); var tpl = Handlebars.compile(src); $('#dest').html( tpl(modelObject) ); 100% handlebars support hbs.helpers supported too 

May 17, 2014 approaches in webdev @ it rally 29 | 36 how it's made: ember way event handling the {{#view App.myEventView}} helper is used actually, it renders all the necessary html to support the user event custom events: actions: {} property .send(actionName, params) method 

May 17, 2014 approaches in webdev @ it rally 30 | 36 how it's made: ember way oop handling strong oop model with blackja classes and instantiating getters and setters as .get('propName') and .set('propName', value) methods 

May 17, 2014 approaches in webdev @ it rally 31 | 36 how it's made: ember way oop handling interesting realization of the calss / instance: yourClass = Ember.Object.extend(params): var Ctor = new Ember.ObjectInstance(); // apply params to Ctor return Ctor; and instance = yourClass.create(params): var C = this; // apply params to C return new C(); 

May 17, 2014 approaches in webdev @ it rally 32 | 36 how it's made: backbone way html handling jquery / zepto comes to rescue actually, the $.ajax() is used too 

May 17, 2014 approaches in webdev @ it rally 33 | 36 how it's made: backbone way template engine no own template engine recommends using of _.template() we can provide own template engine with black var myTpl = Handlebars.compile( tplString ); veiw.template = myTpl; view.render = function () { this.$el.html( this.template( model ) ); } 

May 17, 2014 approaches in webdev @ it rally 34 | 36 how it's made: backbone way oop handling no classic oop support the (Model || Collection || View || Router) support the .extend() for creating new instances extend is for-in-based (directly from the underscore) some sugar: _.* 

May 17, 2014 approaches in webdev @ it rally 35 | 36 your own js framework? 

some approaches in modern web development vivisection of a js framework it rally may 2014 roman melnyk softserve