Matteo Antony Mistretta

The Fast and The Mobile

antony.mistretta@gmail.com – Seat Pagine Gialle SpALinkedin: antonymistrettaTwitter: @antonymistrettaFacebook: antony.mistretta

ROME 27-28 march 2015

Two words about my companyTwo words about my company

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

Our use case scenarioOur use case scenario

BooksBooks!

ROME 27-28 march 2015 – Matteo Antony Mistretta

/* 'for-in': don't over arrays! http://bit.ly/1aUNASD */

var elements = [ 1, 3, 3, 7 ];

Array.prototype.waldo = ':P';

for (var i in elements) { process.stdout.write(elements[i]);}

Loops (I did it again)Loops (I did it again)

1337:P

/* classic 'for' */

var elements = [ 1, 3, 3, 7 ];

for (var i = 0; i < elements.length; i += 1) { process.stdout.write('' + elements[i]);}

1337

/* 'for' without continuous lookup of size */

var elements = [ 1, 3, 3, 7 ];

for (var i = 0, size = elements.length; i < size; i += 1) { process.stdout.write('' + elements[i]);}

/* the fastestest 'for' loop in all human history!!!1! */

var elements = [ 1, 3, 3, 7 ];

for (var i = elements.length; i--; ) {// i-=1 == --i :O process.stdout.write('' + elements[i]);}

/* ECMAScript 6: implicit iterator */

var elements = [ 1, 3, 3, 7 ];

for (var element of elements) { process.stdout.write('' + element);}

7331doesn't work yet -_-”

/* who cares about loop performance anyway */

_ = require('underscore');

var elements = [ 1, 3, 3, 7 ];

_.each(elements, function(element) { process.stdout.write('' + element);});

ROME 27-28 march 2015 – Matteo Antony Mistretta

http://c2.com/cgi/wiki?RulesOfOptimization

Become a frontend developer ninja with Marco Casario!Become a frontend developer ninja with Marco Casario!http://bit.ly/1Fugaqo

ROME 27-28 march 2015 – Matteo Antony Mistretta

Module Pattern

Namespace Pattern

(function(deps) { var MyModel = function(deps) { console.log(deps); };

return MyModel;}(deps));

!function(){var n=function(n){console.log(n)};return n}(deps);

(function(SEAT) { SEAT.PG = SEAT.PG || {}; SEAT.PG.Model = SEAT.PG.Model || {}; var deps = SEAT.deps; SEAT.PG.Model.MyModel = function(deps) { console.log(deps); };}(SEAT || {}));

!function(o){o.PG=o.PG||{},o.PG.Model=o.PG.Model||{};o.deps;o.PG.Model.MyModel=function(o){console.log(o)}}(SEAT||{});

define([ 'deps' ], function(deps) { var MyModel = function(deps) { console.log(deps); };

return MyModel;});

define(["deps"],function(){var n=function(n){console.log(n)};return n});

ROME 27-28 march 2015 – Matteo Antony Mistretta

define([ 'deps' ], function(deps) {var MyModule = function(deps) {

if (deps.needsMore) { require([ 'more-deps' ], function(moreDeps) { console.log(moreDeps); }); } };

return MyModule;});

ROME 27-28 march 2015 – Matteo Antony Mistretta

define(function(require) {var deps = require('deps');var MyModule = function(deps) {

if (deps.needsMore) {var moreDeps = require('more-deps');console.log(moreDeps);

}};

return MyModule;});

++

ROME 27-28 march 2015 – Matteo Antony Mistretta

{{#hasResults}}<p> {{#i18n}} {{number}} results found for "{{what}}" in {{where}}. {{/i18n}}</p><ul> {{#results}} <li> {{name}} <br>{{address}} <br>{{> stars}} </li> {{/results}}</ul>{{/hasResults}}

$('.listing').mustache('listing', { results : ... });

var renderedHtml = Mustache.render(template, {results : ... }, partials);

{{#stars}}<img src="/_assets/img/stars/{{type}}.png" />{{/stars}}

<script id="stars" type="text/html">

</script>

<script id="listing" type="text/html">

</script>

ROME 27-28 march 2015 – Matteo Antony Mistretta

$.fn.clear = function() { var $sel = $(this), $clear;

$clear = $sel.siblings('.clear-button'); if ($clear.length === 0) { $clear = $('<div class="common clear-button"/>').insertAfter($sel).hide(); }

$sel.on('change keyup button:add width:reset', function() { $clear.toggle($sel.val() !== ''); });

$clear.on('click', function() { $sel.val('').change().focus(); });

toggleClear();

return this;};

ROME 27-28 march 2015 – Matteo Antony Mistretta

var BasicView = Backbone.View.extend({ initialize : function() { $.Mustache.addTemplates(this.tplFilename, this.template); },

render : function() { return this; }, afterRender : function() {},

navigate : function(event) {...}});

var SearchForm = BasicForm.extend({ render : function() { this.$el.mustache('searchform', this.model); return this; },

afterRender : function() { BasicForm.prototype.afterRender.apply(this); this.$('input[name="where"]').acWhere().gps(); this.$('input[name="what"]').acWhat().search(); }});

var BasicForm = BasicView.extend({ afterRender : function() { this.$('input').each(function(i, el) { $(el).clear(); }); }});

var Home = BasicView.extend({ initialize : function() { BasicView.prototype.initialize.apply(this); this.searchform = new SearchForm(); },

render : function() { this.$el.mustache('home', this.model); this.$el.prepend(this.searchform.render().el); return this; },

afterRender : function() { this.searchform.afterRender(); }});

ROME 27-28 march 2015 – Matteo Antony Mistretta

define([..., 'text!tpl/common.tpl'], function(..., template) { var Header = BasicView.extend({ el : 'header', tplFilename : 'common', template : template,

handle : function() { this.render(); }, render : function() { this.$el.mustache('header', null, { method : 'html' }); main.$el.before(this.$el); return this; }, destroy : function() { this.$el.detach(); return this; } });

return new Header();});

define([..., 'text!tpl/listing.tpl'], function(..., template) { var Listing = BasicView.extend({ id : 'listing', tplFilename : 'listing', template : template,

render : function() { this.$el.mustache('listing', this.model); return this; }, afterRender : function() { ... } });

return Listing;});

define(['view/listing'], function(Listing) { var myView = new Listing();});

define(['view/header'], function(header) { var myView = header;});

++

ROME 27-28 march 2015 – Matteo Antony Mistretta

var Request = new function(request) { this.action = request.action || ''; this.params = request.params || {};

this.equals = function(request) {...} this.toString = function() {...}};Request.fromString = function() {...}var Response = new function(response) { _.deepextend(this, response || {});

this.buildListingInfo = function() { this.hasResults = this.results !== undefined; ... }};var Session = new function() { this.getUser = function(callback) {...}; this.getCoords = function(callback) {...};}APP.session = new Session();

ROME 27-28 march 2015 – Matteo Antony Mistretta

define(['jquery', 'underscore', 'mobileapp/app', 'model/request', 'model/response'], function($, _, APP, Request, Response) { var Server = function(request, options) { options = _.extend({url : APP.SERVER_URL, pagesize : 25, method : 'GET'}, Options || {});

this.request = new Request(request);

this.process = function(successCallback, errorCallback) { this.request.params = _.extend({pagesize : options.pagesize}, this.request.params);

var ajax = $.ajax({...}); };

this.redirect = function(options) { options = options || {}; if (options.newTab) window.open(this.request.toString()); else location.href = this.request.toString(); };

this.reload = function(options) { options = options || {}; this.request.removeParams(options.remove); location.href = this.request.toString(); }; };

return Server;});

ROME 27-28 march 2015 – Matteo Antony Mistretta

define(['underscore','backbone','mobileapp/app','model/request','service/server'], function(_, Backbone, APP, Request, Server) { var Router = Backbone.Router.extend({ routes : { '' : 'home', 'listing' : 'listing', 'info/:id' : 'detail', 'errore' : 'error', '*default' : 'oops' },

go : function(name, options) { var self, request, model, show;

options = _.extend({}, (options || {}));

self = this; request = Request.fromString(options.url || document.URL.replace(location.protocol + '//' + location.host, '')); model = { request : request };

...ok, I give up.

ROME 27-28 march 2015 – Matteo Antony Mistretta

Two-step minificationTwo-step minification

ROME 27-28 march 2015 – Matteo Antony Mistretta

Perceived performancePerceived performance

ROME 27-28 march 2015 – Matteo Antony Mistretta

Solution: NodeJS!Solution: NodeJS!Cutting the fat with Tiffany Conroy!Cutting the fat with Tiffany Conroy!

http://bit.ly/1Iu7BMn

routerrouter routerrouter

ROME 27-28 march 2015 – Matteo Antony Mistretta

ROME 27-28 march 2015 – Matteo Antony Mistretta

My contacts again:

Google: antony.mistretta@gmail.comLinkedin: https://www.linkedin.com/in/antonymistrettaTwitter: https://twitter.com/antonymistrettaFacebook: https://www.facebook.com/antony.mistretta

Leave your feedback on Joind.in!https://joind.in/event/view/3347

ROME 27-28 march 2015 – Matteo Antony Mistretta