Javascript per applicazioni complesse - Lo Stretto digitale

1,223 views
1,123 views

Published on

Mentre ogni giorno di più crescono e si fanno sempre più complessi gli ambiti nei quali Javascript si propone (e spesso impone) come strumento di sviluppo, viene da chiedersi se (e quando) si avvererà la legge di Atwood per la quale "ogni applicazione che può essere scritta in Javascript, sarà necessariamente scritta in Javascript".
Nell'attesa di scoprirlo meglio prepararsi con vecchi e nuovi patterns e best practices che ci consentono di realizzare software di qualità con uno dei linguaggi più duttili e trasversali di sempre.

Presentazione realizzata nell'ambito del progetto "Lo Stretto Digitale"

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Javascript per applicazioni complesse - Lo Stretto digitale

  1. 1. MESSINA - TORRE DEGLI INGLESI C/O HORCYNUS ORCA - 23/07/2013 JAVASCRIPT PER APPLICAZIONI COMPLESSE DESIGN PATTERNS & BEST PRACTICES / /Giuseppe PIZZIMENTI @gpizzimenti @strettodigitale
  2. 2. SENTI CHI PARLA...
  3. 3. JAVA..CHE? Cos'era ed a cosa serviva Javascript ...fino a 5 minuti (informatici) fa...
  4. 4. ALCUNI FATTI SU JAVASCRIPT... Sviluppato da una sola persona ( ) in 10 giorni Sintassi come il C Interpretato come Basic Dinamico come Python Funzionale come Scheme Ad oggetti ...ma senza classi! (come Perl) ...ed ha Java nel nome! @BrendanEich
  5. 5. https://www.destroyallsoftware.com/talks/wat
  6. 6. ...ED ALCUNI, ALTRI, FATTI...
  7. 7. OGGETTI IN JAVA
  8. 8. public class Point { private int x = 0; private int y = 0; //constructor public Point(int a, int b) { x = a; y = b; } public int sumXY() { return x+y; } } Point origin = new Point(23, 94); out.print(origin.sumXY());
  9. 9. OGGETTI IN JAVASCRIPT
  10. 10. var point = {}; point.x = 23; point.y = 94; point.sumXY = function() { return this.x + this.y; }; alert(point.sumXY());
  11. 11. INSTALLAZIONE
  12. 12. AGGIORNAMENTO
  13. 13. SVILUPPO
  14. 14. ...INTANTO, LÀ FUORI...
  15. 15. LA LEGGE DI ATWOOD Cos'è ed a cosa serve Javascript ...ora!
  16. 16. “any application that can be written in JavaScript, will eventually be written in JavaScript” Jeff Atwood, 17/07/2007
  17. 17. http://www.codinghorror.com/blog/2007/07/the- principle-of-least-power.html
  18. 18. FACCIAMO UN PÒ D'ORDINE..
  19. 19. NAMESPACING
  20. 20. var coord = 0; . . . var showCoord = function() { var coord = 1; alert(coord); };
  21. 21. var myApp = {}; myApp.coord = 0; myApp.data.coords.x = 0; myApp.utils.geo.setCoords = function(x,y){ myApp.data.coords.x = x; myApp.data.coords.y = y; }; ; myApp.utils.geo.setCoords(10,10);
  22. 22. //Flyweight; myApp.utils.geo.processCoords(myApp.data.coords); myApp.utils.geo.processCoords = function(coords){ process(coords.x,coords.y); }; ;
  23. 23. IIFE & REVEALING MODULE
  24. 24. //IIFE: Immediately invoked Function Expression (function() { // scope }());
  25. 25. // Revealing Module Pattern var myApp.utils.geo = (function() { //private var x = 0, y = 0, set = function(coordx,coordy) { x = coordx; y = coordy; }; // public return { setCoords: set }; }()); myApp.utils.geo.setCoords(10,10);
  26. 26. REQUIRE.JS HTTP://REQUIREJS.ORG/
  27. 27. // File Name: utils/geo.js // per convenzione , il nome del modulo è quello del file define( [ "underscore", "jquery" ], // dipendenze function( _, $ ) { /* Callback : i parametri corrispondono alle dipendenze richieste */ . . . // public return { setCoords: set }; });
  28. 28. require( [ "utils/geo" ], function( geo ) { geo.setCoords(10,10); } );
  29. 29. <script src="./libs/require.min.js" data-main="./js/main"></script>
  30. 30. /* main.js */ require.config({ paths: { "jquery": "../libs/jquery.min", "underscore": "../libs/underscore.min" }, shim: { // Underscore.js non è un modulo AMD underscore: { exports: "_" } } });
  31. 31. L'IMPORTANZA DEL DIALOGO
  32. 32. $('div#coords li').each(function(el) { var $el = $(el); $el.on('click', function(e) { var jsonUrl = "myData.jsp?id=" + $el.attr("id"); $.get(jsonUrl, function(data) { $(el).text(data.result); }) }); });
  33. 33. MEDIATOR
  34. 34. var myApp = {}; myApp.mediator = $({}); myApp.mediator.on("myApp:loadData", function(e,id) { var jsonUrl = "myData.jsp?id=" + id; $.get(jsonUrl, function(data) { myApp.mediator.trigger('myApp:dataLoaded', data, id); }) }) myApp.mediator.on("myApp:dataLoaded", function(e, data, id) { $('div#coords').find('li[id="' + id+ '"]'.text(data.result); }) $('div#coords li').on("click", function(e) { myApp.mediator.trigger('myApp:loadData',$(e.currentTarget).attr("id")); })
  35. 35. DIVIDIAMOCI I COMPITI
  36. 36. [ { "id":"1", "title":"Code Complete", "author":"Steve McConnell" }, { "id":"2", "title":"JavaScript: The Good Parts", "author":"Douglas Crockford" }, { "id":"3", "title":"The Mythical Man-Month", "author":"Fred Brooks" } ]
  37. 37. TEMPLATE
  38. 38. UNDERSCORE.JS HTTP://UNDERSCOREJS.ORG/
  39. 39. // Template <script id="tmpl-books" type="text/template"> </script> <ul> <% for (var i = 0; i < books.length; i++) { %> <% var book = books[i]; %> <li> <em><%= book.title %></em> di <%= book.author %> </li> <% } %> </ul>
  40. 40. var tmplMarkup = $('#tmpl-books').html(); var compiledTmpl = _.template(tmplMarkup, { books : data }); $('#target').html(compiledTmpl);
  41. 41. <ul> <li><em>Code Complete</em> di Steve McConnell</li> <li><em>JavaScript: The Good Parts</em> di Douglas Crockford</li> <li><em>The Mythical Man-Month</em> di Fred Brooks</li> </ul>
  42. 42. MVC ED I SUOI FRATELLI
  43. 43. MODEL : Rappresenta i dati e la logica utile per recuperarli e manipolarli VIEW : Visualizza i dati e interagisce con il fruitore CONTROLLER : Riceve i comandi del fruitore e li attua modificando lo stato degli altri due componenti
  44. 44. BACKBONE.JS HTTP://BACKBONEJS.ORG/
  45. 45. JSON [ { "id":"1", "title":"Code Complete", "author":"Steve McConnell" }, { "id":"2", "title":"JavaScript: The Good Parts", "author":"Douglas Crockford" }, { "id":"3", "title":"The Mythical Man-Month", "author":"Fred Brooks" } ]
  46. 46. MODEL myLib.models.libro = Backbone.Model.extend({ defaults: { id: _.uniqueId(), title: null, author: null } });
  47. 47. COLLECTION myLib.collections.libri = Backbone.Collection.extend({ url: myLib.settings.urls.services.libri , model: myLib.models.libro, , sortField: 'id' // default , comparator: function(item) { return item.get(this.sortField); } , sortByField: function(fieldName) { this.sortField = fieldName; this.sort(); } });
  48. 48. "VIEW" myLib.views.libri = Backbone.View.extend({ template: myLib.templates.libri, initialize: function() { var _this = this; _.bindAll( _this, "render" , "openBook"); this.listenTo(this.collection,"sort",this.render); }, events: { "click .libro": 'openBook' } , render: function() { var html = this.template({ books: this.collection.toJSON() }); this.$el.find( ".main" ).html( html ); }, openBook: function(e) { document.location.href="#libro:" + $(e.currentTarget()).attr("data-id"); } });
  49. 49. TEMPLATE myLib.templates.libri = _.template([ '<ul>', '<% for (var i = 0; i < books.length; i++) { %>', '<% var book = books[i]; %>', '<li>', '<em><a href="myPage?id=<%= book.id %>" class="roll"><span data-title="', '<%= book.title %>">', '<%= book.title %></span></a></em>', ' di <%= book.author %>', '</li>', '<% } %>', '</ul>' ].join(''));
  50. 50. "CONTROLLER" myLib.modules.libri = function(ns){ var _main = function(opts) { var membri = new ns.collections.libri(); membri.fetch({success: function(){_render(membri,opts)}}), }; var _render = function(data,opts) { if (options && options.sort) membri.sortByField(options.sort); else membri.sortByField("title"); var libriView = new ns.views.libri({ collection: data, el: $("div.container") }); libriView.render(); }; return { run: function(opts){_main(opts);} }; }(myLib);
  51. 51. ROUTER myLib.router = Backbone.Router.extend({ routes: { "/libri/sort:p_sort": "showBooks" } , showBooks: function(p_sort) { myLib.modules.libri.run(p_sort); } });
  52. 52. ..ANCORA NON M'È CHIARO...
  53. 53. ( )http://eloquentjavascript.net/ @marijnjh
  54. 54. ( ) http://www.addyosmani.com/resources/essentialjsdesignpatter @addyosmani
  55. 55. ( ) http://addyosmani.github.io/backbone-fundamentals/ @addyosmani
  56. 56. THAT'S ALL FOLKS!LO STRETTO DIGITALE - SUMMER TALKS 2013 - #LOSTRETTODIGITALE

×