Approaches in modern web development. Vivisection of a JS framework

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://

| 36 web app as is / server side data wrappers / statics <body></body> #content {} $(function () {}); controllers <?php ?> http://

| 36 web app as is / client side <div class=”person”> Uassia Poupquinne </div> <div class=”elephant”> Bimbo </div>

| 36 web app as is / not too simple

| 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

| 36 web app: framework vivisection js framework: how it's made angular ext ember backbone

| 36 js: html handling no big issues in general however, opacity (ie8) dimension calculation, positioning calculating the results of css form handling, validating

| 36 js: user events different event{} support in ie/w3-browsers handler(event) {} vs window.event event{} structure attachEvent() vs addEventListener()

| 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

| 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 ''

| 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

| 36 how it's made angular ext ember backbone

| 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

| 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); } }

| 36 how it's made: ext way template engine strings inside the js code own tags as control sequences '<tpl for=".">' + '…' + '</tpl>' 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?

| 36 js: event-driven development there is an event storage on the host object: Host.eventHub = { evtName1: [ hnd1(){...}, hnd2(){...}, ... ], evtName2: [ hnd3(){...}, hnd4(){...}, ... ], ... };

| 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(); } ); };

| 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 () {...}); };

| 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

| 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

| 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

| 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()

| 36 how it's made: angular way event handling automatic events assigning via ng-attributes $q as a promise realization instead of callbacks hell

| 36 how it's made: angular way oop handling oop engine → modules angular.module() module.config() module.value() some sugar angular.extend() angular.copy()

| 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

| 36 how it's made: ember way html handling ember way does not like direct dom influence actually, nobody likes it use templates, dude

| 36 how it's made: ember way template engine using of existing html but inside the <script type="text/x-handlebars">...</script> 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

| 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

| 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

| 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();

| 36 how it's made: backbone way html handling jquery / zepto comes to rescue actually, the $.ajax() is used too

| 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 ) ); }

| 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: _.*

| 36 your own js framework?

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

Approaches in modern web development. Vivisection of a JS framework

Approaches in modern web development. Vivisection of a JS framework

More Decks by Grygoriy Mykhalyuno

Other Decks in Programming

Featured

Transcript