{"id":383,"date":"2013-06-05T16:03:11","date_gmt":"2013-06-05T14:03:11","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/il-design-del-codice-organizzare-javascript\/"},"modified":"2013-06-05T16:03:11","modified_gmt":"2013-06-05T14:03:11","slug":"il-design-del-codice-organizzare-javascript","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/il-design-del-codice-organizzare-javascript\/","title":{"rendered":"Il design del codice: organizzare JavaScript"},"content":{"rendered":"
\n

C’\u00e8 molto design nel codice e non intendo il codice che crea l’interfaccia utente, ma proprio il design del<\/em> codice.<\/p>\n

Il codice ben progettato \u00e8 molto pi\u00f9 semplice da mantenere, ottimizzare ed estendere, rendendo cos\u00ec gli sviluppatori pi\u00f9 efficienti. Questo significa poter utilizzare pi\u00f9 energie e maggior concentrazione per realizzare grandi progetti che rendano tutti felici: utenti, sviluppatori e stakeholder.<\/p>\n

Ci sono tre aspetti del design del codice (o code design), di alto livello e linguaggio-agnostici, che sono particolarmente importanti.<\/p>\n

    \n
  1. Architettura di sistema: il layout di base della codebase. Le regole che governano il modo in cui i vari componenti, come i model, le view e i controller interagiscono tra loro.<\/li>\n
  2. Manutenibilit\u00e0: il codice pu\u00f2 essere migliorato ed esteso facilmente?<\/li>\n
  3. Riusabilit\u00e0: quanto sono riutilizzabili i componenti dell’applicazione? Quanto facilmente pu\u00f2 essere personalizzata ciascuna implementazione di un componente?<\/li>\n<\/ol>\n

    Nei linguaggi meno stretti, e nello specifico in JavaScript, ci vuole un po’ di disciplina per scrivere del codice ben progettato. L’ambiente JavaScript \u00e8 cos\u00ec permissivo che \u00e8 facile buttare pezzi ovunque e avere ancora tutto che funziona. Stabilire in anticipo l’architettura di sistema (e attenervisi!) fornisce dei vincoli alla vostra codebase, assicurandone la consistenza generale.<\/p>\n

    Un approccio che adoro consiste in un collaudato pattern del software design, il module pattern, la cui struttura estensibile lo porta ad essere una solida architettura di sistema ed una codebase manutenibile. Mi piace creare moduli all’interno di un plugin jQuery, che porta con s\u00e9 un riusabilit\u00e0 fantastica, fornisce delle opzioni robuste ed espone una API ben fatta.<\/p>\n

    Di seguito, vi guider\u00f2 attraverso la realizzazione del vostro codice in componenti ben organizzate che possono essere riutilizzate in progetti futuri.<\/p>\n<\/div>\n

    \n

    Il module pattern<\/h2>\n

    Ci sono molti<\/em> design pattern l\u00e0 fuori e in ugual modo molte risorse che li riguardano. Addy Osmani<\/a> ha scritto un libro incredibile (e gratuito!)<\/a> sui design pattern in JavaScript, che raccomando caldamente agli sviluppatori di tutti i livelli.<\/p>\n

    Il module pattern<\/a> \u00e8 un fondamento strutturale semplice che pu\u00f2 aiutarvi a mantenere il vostro codice pulito e organizzato. Un “modulo” \u00e8 solo un literal object standard che contiene metodi e propriet\u00e0 e questa semplicit\u00e0 \u00e8 l’aspetto migliore di questo pattern: anche chi non ha familiarit\u00e0 con i pattern del tradizionale software design saranno in grado di guardare il codice e capire all’istante come funziona.<\/p>\n

    Nelle applicazioni che usano questo pattern, ogni componente ha il suo modulo distinto. Per esempio, per creare una funzionalit\u00e0 di autocompletamento, dovrete creare un modulo per il campo di testo e un modulo per l’elenco dei risultati. Questi due moduli lavoreranno insieme, ma il codice del campo di testo non toccher\u00e0 i risultati del codice dell’elenco e viceversa.<\/p>\n

    Questa sdoppiamento dei componenti \u00e8 il motivo per cui il module pattern \u00e8 ottimo per costruire una solida architettura di sistema. Le relazioni all’interno dell’applicazione sono ben definite: qualunque cosa sia in correlazione con il campo di testo viene gestita dal modulo del campo di testo e non viene disseminata per tutta la codebase, con il risultato di ottenere un codice pulito e chiaro.<\/p>\n

    Un altro beneficio dell’organizzazione basata sui moduli sta nel suo essere intrinsecamente manutenibile. I moduli possono essere migliorati e ottimizzati indipendentemente senza influenzare altre parti dell’applicazione.<\/p>\n

    Ho usato il module pattern per la struttura base di jPanelMenu<\/a>, il plugin jQuery che ho creato per il menu system fuori dal canvas. Lo user\u00f2 come esempio, per illustrare il processo di creazione di un modulo.<\/p>\n<\/div>\n

    \n

    Creare un modulo<\/h2>\n

    Per cominciare, definisco tre metodi e una propriet\u00e0 che vengono usate per gestire le interazioni del menu system.<\/p>\n

    var jpm = {\n    animated: true,\n    openMenu: function( ) {\n        \u2026\n        this.setMenuStyle( );\n    },\n    closeMenu: function( ) {\n        \u2026\n        this.setMenuStyle( );\n    },\n    setMenuStyle: function( ) { \u2026 }\n};<\/code><\/pre>\n
    L’idea \u00e8 di suddividere il codice in quanti pi\u00f9 pezzi possibili, che siano il pi\u00f9 piccoli possibile e con la maggior riusabilit\u00e0. Avrei potuto scrivere solo un metodo toggleMenu( )<\/code>, ma creare i metodi openMenu( )<\/code> e closeMenu( )<\/code> distinti fornisce maggior controllo e riutilizzabilit\u00e0 all’interno del modulo.<\/p>\n
    Notate che le chiamate al metodi e alle propriet\u00e0 del modulo dall’interno<\/em> del modulo stesso (come le chiamate a setMenuStyle( )<\/code>) hanno come prefisso la parola chiave this<\/code>: questo \u00e8 il modo in cui i moduli accedono ai propri membri.<\/p>\n
    Questa \u00e8 la struttura base di un modulo. Potete continuare ad aggiungere metodi e propriet\u00e0 di cui avete bisogno, ma non diventa pi\u00f9 complesso di cos\u00ec. Dopo che le fondamenta strutturali sono state create, il livello di riutilizzabilit\u00e0 – opzioni e una API esposta – pu\u00f2 essere creato sopra a queste.<\/p>\n<\/div>\n
    \n
    Plugin jQuery<\/h2>\n
    Il terzo aspetto del codice ben progettato \u00e8 probabilmente il pi\u00f9 cruciale: la riutilizzabilit\u00e0. Occorre un avvertimento per questa sezione: sebbene ci siano ovviamente dei modi per costruire ed implementare componenti riutilizzabili in puro JavaScript (siamo circa al 90% del percorso con il modulo di cui sopra), preferisco creare dei plugin jQuery per cose pi\u00f9 complesse, per alcune ragioni.<\/p>\n
    La pi\u00f9 importante \u00e8 che \u00e8 un forma di comunicazione non intrusiva. Se usate jQuery per creare un componente, dovreste fare in modo che sia ovvio per quelli che lo implementano. Creare un componente come un plugin jQuery \u00e8 un gran modo per dire che jQuery \u00e8 richiesto.<\/p>\n
    Inoltre, il codice di implementazione sar\u00e0 consistente con il resto del codice del progetto basato su jQuery. Tutto ci\u00f2 \u00e8 positivo per ragioni esteteiche, ma significa anche (entro una certa misura) che gli sviluppatori possono predire il modo in cui interagire con il plugin senza troppa ricerca. Solo un altro modo per creare una migliore developer interface.<\/p>\n
    Prima di iniziare a creare un plugin jQuery, assicuratevi che il plugin non sia in conflitto con altre librerie JavaScript che usano la notazione $<\/code>. \u00c8 molto pi\u00f9 semplice di quanto possiate immaginare: dovete semplicemente circondare il codice del vostro plugin in questo modo:<\/p>\n
    (function($) {\n    \/\/ jQuery plugin code here\n})(jQuery);<\/code><\/pre>\n
    Poi, impostiamo il nostro plugin e vi inseriamo il codice del modulo creato in precedenza. Un plugin \u00e8 solo un metodo definito sull’oggetto jQuery ($)<\/code>.<\/p>\n
    (function($) {\n    $.jPanelMenu = function( ) {\n        var jpm = {\n            animated: true,\n            openMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            closeMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            setMenuStyle: function( ) { \u2026 }\n        };\n    };\n})(jQuery);<\/code><\/pre>\n
    Tutto quello che occorre per usare il plugin \u00e8 una chiamata alla funzione che abbiamo appena creato.<\/p>\n
    var jpm = $.jPanelMenu( );<\/code><\/pre>\n<\/div>\n
    \n
    Opzioni<\/h2>\n
    Le opzioni sono essenziali per qualunque plugin realmente riutilizzabile, perch\u00e9 permetto la personalizzazione di ciascuna implementazione. Ogni progetto porta con s\u00e9 un sacco di stili di design, tipi di interazione e strutture di contenuto. Le opzioni personalizzabili aiutano ad assicurarsi che adattiate il plugin perch\u00e9 stia all’interno di quei vincoli di progetto.<\/p>\n
    \u00c8 un best practice fornire dei buoni valori di default per le vostre opzioni. Il modo pi\u00f9 semplice per farlo \u00e8 usare il metodo di jQuery $.extend( )<\/code>, che accetta (almeno) due argomenti.<\/p>\n
    Come primo argomento di $.extend( )<\/code>, definite un oggetto con tutte le opzioni disponibili e i loro valori di default. Come secondo argomento, passate le opzioni “passed-in”. Questo far\u00e0 il merge di due oggetti, sovrascrivento i default con qualsiasi opzione “passed-in”.<\/p>\n
    (function($) {\n    $.jPanelMenu = function(options) {\n        var jpm = {\n            options: $.extend({\n                'animated': true,\n                'duration': 500,\n                'direction': 'left'\n            }, options),\n            openMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            closeMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            setMenuStyle: function( ) { \u2026 }\n        };\n    };\n})(jQuery);<\/code><\/pre>\n
    Oltre a fornire dei buoni default, le opzioni diventano quasi una auto-documentazione: chi guarda il codice pu\u00f2 vedere subito tutte le opzioni disponibili.<\/p>\n
    Mostrate quante pi\u00f9 opzioni possibile. La personalizzazione aiuter\u00e0 nelle implementazioni future e la flessibilit\u00e0 non fa mai male.<\/p>\n<\/div>\n
    \n
    API<\/h2>\n
    Le opzioni sono un modo fantastico per personalizzare il modo in cui funziona un plugin. Un’API, d’altro canto, abilita le estensioni della funzionalit\u00e0 del plugin esponendo metodi e propriet\u00e0 da cui pu\u00f2 trarre vantaggio il codice di implementazione.<\/p>\n
    Se da un lato va benissimo esporre il pi\u00f9 possibile attraverso una API, il mondo esterno non dovrebbe avere accesso a tutti i metodi e a tutte le propriet\u00e0 interne. Idealmente, dovreste esporre solo gli elementi che saranno usati.<\/p>\n
    Nel nostro esempio, la API esposta dovrebbe includere delle chiamate per aprire e chiudere il menu, ma nulla di pi\u00f9. Il metodo interno setMenuStyle( )<\/code> gira quando il menu si apre e si chiude, ma il pubblico non ha bisogno di accedervi.<\/p>\n
    Per esporre una API, fate restituire un oggetto con qualunque metodo e propriet\u00e0 desideriate alla fine del codice del plugin. Potete anche mappare i metodi e le propriet\u00e0 che restituite a quelli all’interno del codice del modulo: qui \u00e8 dove la magnifica organizzazione del module pattern si mostra in tutto il suo splendore.<\/p>\n
    (function($) {\n    $.jPanelMenu = function(options) {\n        var jpm = {\n            options: $.extend({\n                'animated': true,\n                'duration': 500,\n                'direction': 'left'\n            }, options),\n            openMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            closeMenu: function( ) {\n                \u2026\n                this.setMenuStyle( );\n            },\n            setMenuStyle: function( ) { \u2026 }\n        };\n\n        return {\n            open: jpm.openMenu,\n            close: jpm.closeMenu,\n            someComplexMethod: function( ) { \u2026 }\n        };\n    };\n})(jQuery);<\/code><\/pre>\n
    I metodi e le propriet\u00e0 della API saranno disponibili tramite l’oggetto restituito dall’inizializzazione del plugin.<\/p>\n
    var jpm = $.jPanelMenu({\n    duration: 1000,\n    \u2026\n});\njpm.open( );<\/code><\/pre>\n<\/div>\n
    \n
    Lucidare le interfacce per developer<\/h2>\n
    Solo con alcuni semplici costrutti e alcune linee guida, ci siamo creati un plugin riutilizzabile ed estensibile che contribuir\u00e0 a renderci la vita un po’ pi\u00f9 semplice. Come con qualunque altra cosa facciamo, sperimentiamo con questa struttura per vedere se pu\u00f2 andar bene per noi, per il nostro team e per il nostro workflow.<\/p>\n
    Ogni volta che mi trovo a creare qualcosa che ha del potenziale per essere riutilizzato, lo scompongo in un plugin jQuery basato su moduli. L’aspetto migliore di questo approccio \u00e8 che ci costringe ad usare – e testare – il codice che scriviamo. Usando qualcosa man mano che lo realizzate, identificherete rapidamente i punti di forza, scoprirete i difetti e pianificherete i cambiamenti.<\/p>\n
    Questo processo porta a un codice testato per i campi di battaglia, pronto per contributi open source o per essere venduto e distribuito. Ho realizzato i miei plugin (pi\u00f9) ordinati come progetti open source su GitHub<\/a>.<\/p>\n
    Anche se non state creando qualcosa che verr\u00e0 rilasciato al pubblico, \u00e8 tuttavia ancora importante pensare al design del vostro codice. Il vostro io futuro vi ringrazier\u00e0!<\/p>\n
    Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Il codice ben progettato \u00e8 molto pi\u00f9 semplice da mantenere, ottimizzare ed estendere, rendendo cos\u00ec pi\u00f9 efficienti gli sviluppatori. Ci sono tre aspetti del code design, di alto livello e linguaggio-agnostici, che sono la chiave per raggiungere questo nirvana: l’architettura di sistema, la manutenibilit\u00e0 e la riusabilit\u00e0. Si possono raggiungere tutti e tre con il module pattern, la cui struttura estendibile si presta a una solida architettura di sistema e ad una codebase manutenibile. Anthony Colangelo ci mostra come creare codice in componenti ben organizzati che possono essere riutilizzati in progetti futuri.<\/p>\n","protected":false},"author":818,"featured_media":7000701,"comment_status":"open","ping_status":"open","template":"","categories":[271,92],"tags":[],"coauthors":[392],"class_list":["post-383","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-75-5-giugno-2013"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000701"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=383"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}