the fast and the mobile - matteo antony mistretta & giada cazzola - codemotion rome 2015
TRANSCRIPT
Matteo Antony Mistretta
The Fast and The Mobile
[email protected] – 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
/* '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
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
My contacts again:
Google: [email protected]: 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