Your SlideShare is downloading. ×
Javascript avanzato: sfruttare al massimo il web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Javascript avanzato: sfruttare al massimo il web

341
views

Published on

Javascript è uno dei linguaggi più sottovalutati e più incompresi dell'intero panorama dei linguaggi di programmazione, eppure è anche uno dei più utilizzati. …

Javascript è uno dei linguaggi più sottovalutati e più incompresi dell'intero panorama dei linguaggi di programmazione, eppure è anche uno dei più utilizzati.
Da una parte le molteplici e differenti declinazioni degli strumenti di navigazione web, dall'altra l'infelice scelta storica di usare il termine "script", hanno contribuito alla creazione del mito di un linguaggio poco rigoroso, al servizio di ogni sorta di trucco o pezza di codice.
La verità invece racconta di un linguaggio dinamico ad oggetti a tutti gli effetti, con caratteristiche molto interessanti, seppur con qualche difetto, ma soprattutto un linguaggio che, sull'onda di HTML5, rivestirà se possibile ancora più importanza nell'immediato futuro.
In questa sessione verranno presentati aspetti poco conosciuti, ma molto importanti, di Javascript (scoping, hoisting, closures, ecc.), verranno presentati alcuni design patterns che permettono di strutturare in maniera intelligente le nostre librerie applicative in funzione della manutenibilità e delle performance, senza tralasciare, ove possibile, uno sguardo ad alcuni framework come jQuery o KnockoutJS.


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Inserite l’eventuale vostro logo in basso a destra
  • Slide da mostrare prima di iniziare la sessione – non rimuovere!
  • Ultima slide, obbligatoria
  • Transcript

    • 1. Grazie a
    • 2. Siamo davvero sicuri di conoscereJavascript?
    • 3. Sicuri sicuri?!?<g>
    • 4. Agenda• L’obiettivo: organizzare la codebase• Javascript: un po di storia• Partire dalla fine: Model-View-ViewModel• Namespace e Module pattern• Pattern di creazione oggetti ed ereditarietà• Il perché dei pattern: alla base di Javascript(scoping, hoisting, closures, oggetto dicontesto, …)
    • 5. Lobiettivo• Il Web 2.0 e HTML5 rendono centrale lo svilupposoftware client• La codebase Javascript diventa sempre più estesa ecomplessa• Per un professionista diventa fondamentalelorganizzazione della codebase Javascript ai finidella manutenibilità generale• È necessario conoscere Javascript e i suoi patternstrutturali/idiomatici
    • 6. Un po di storia• Nato fra il 1995 e il 1996 nei laboratori dellaNetscape, ideato da Brendan Eich, prima conil nome di Mocha, poi LiveScript, infineJavascript (debuttando con Netscape 2.0)• Nel 1996 fu subito sottoposto alla ECMA cheda allora ne standardizza la definizione(ECMAScript), oggi siamo alla versione 5.1
    • 7. Lideatore di Javascript"JS had to look like Java only less so, be Java’s dumb kid brother orboy-hostage sidekick. Plus, I had to be done in ten days orsomething worse than JS would have happened.""JS doveva sembrare Java, solo un po meno, essere il suo fratellinoimbranato o il suo partner inesperto. In più dovevo essere pronto indieci giorni o sarebbe accaduto qualcosa di peggio di JS."Brendan Eich, 2010
    • 8. Il grande equivoco• Nonostante le parole di Eich:– Javascript non è il fratellino "scemo" di Java– Javascript in effetti non centra (quasi) nulla conJava (anzi somiglia più a LISP, Ruby, …)– Javascript non è un mero linguaggio di scripting– Javascript ha un suo preciso formalismo che deveessere assecondato
    • 9. Chi è Javascript• È un linguaggio interpretato (non compilato)• È un linguaggio a tipizzazione dinamica• È un linguaggio a scope lessicale (scope alivello di definizione non a runtime)• È un linguaggio che supporta OO• Soprattutto è il linguaggio con la più infelicee fuorviante denominazione
    • 10. ServiziUn esempio: Model-View-ViewModelView (Code)new MyView()…View (UI)<tag>…</tag>ViewModelnew MyViewModel()…BindingModelnew MyModel()…Modelnew MyModel()…Servizi(REST, …)
    • 11. Model-View-ViewModel: MessengerMessenger ViewModelViewModelViewModelView (Code)View (Code)View (Code)SendSubscribe
    • 12. M-V-VM: organizzare la codebase• Che cosa serve:– Namespace per strutturare il codice, evitareduplicazione di "simboli"– "Classi" per implementare model, view, viewmodel, messenger, utilities, service proxies, …
    • 13. M-V-VM: organizzare la codebase• Che cosa offre Javascript:– Non ha namespace– Non ha classi– Ha "solo" oggetti
    • 14. Javascript: tutto è un oggetto• In Javascript tutto è un oggetto:– L’oggetto globale dambiente: es. window– Loggetto del contesto di esecuzione: this– Un semplice oggetto: {…}– Un array: […]– Un tipo di dato built in: number, string, …– Una variabile: var foo– Una funzione: function bar(){…}
    • 15. "Instrumentare" Javascript• È possibile ottenere da Javascript ciò di cuisi ha bisogno (namespace, classi, …)utilizzando pattern strutturali/idiomatici diprogrammazione che si basano sulle suepeculiarità• Instrumentare Javascript serve anche adevitare le "trappole" insite nel linguaggio
    • 16. Namespace pattern• In Javascript è fin troppo facile definirevariabili globali• Strutturare la codebase per namespaceevita la collisione e leccessivo uso diprefissi delle denominazioni (variabili efunzioni)
    • 17. Javascript: scoping delle variabili• In Javascript lo scoping è lessicale• Lo scoping locale di una variabile:– È fissato a livello di definizione di funzione(function) se dichiarato tramite var, altrimentiè globale– Non è a livello di blocco (ovvero individuato aruntime secondo il ciclo di vita di una bloccodi codice)
    • 18. Javascript: scoping delle variabilivar foo = "foo";function bar() {var foo = "bar";//locale "bar"alert(foo);}//globale "foo"alert(foo);function bar() {foo = "bar";//globale "bar"alert(foo);}//globale "bar"alert(foo);
    • 19. Javascript: closure• In Javascript le funzioni sono oggetti• Le funzioni hanno scope lessicale chedetermina la creazione di un oggetto discope chain associato alla funzione (e chesopravvive allesecuzione della funzionestessa)• Tecnicamente parlando queste due condizioniidentificano una closure
    • 20. Namespace patternCDays12.namespace = function (ns_string) {var parts = ns_string.split(.),parent = CDays12;if (parts[0] === "CDays12") {parts = parts.slice(1);}for (var i = 0; i < parts.length; i += 1) {if (typeof parent[parts[i]] === "undefined") {parent[parts[i]] = {};}parent = parent[parts[i]];}return parent;};
    • 21. Namespace patternCDays12.namespace("CDays12.Foo.Bar");CDays12 = {Foo: {Bar: {}}}
    • 22. Module pattern• Il Module pattern estende il concetto diNamespace aggiungendo:– Uso idiomatico delle immediate functionsper creare un ambiente sandbox "protetto"– Membri privati e pubblici (privilegiati)
    • 23. Module patternImmediate functions: notazione idiomaticache permette di "auto-eseguire" unafunction expression(function () {alert("Hello world!");}());
    • 24. Funzioni in Javascriptfunction Foo(bar) {//function definition (ATTENZIONE: non è un oggetto!)}var foo = function Foo(bar) {//named function expression}var foo = function(bar) {//function expression (anonymous function)}myObj.foo = function(bar) {//method invocation}
    • 25. Module pattern• Usare una immediate function permette diassegnare ad un oggetto namespace unasorta di sandbox protetta in cui definiredenominazioni interne al namespacestesso evitandone la duplicazione
    • 26. Module patternCDays12.namespace("CDays12.Foo.Bar");CDays12.Foo.Bar = (function() {//codicereturn {myVar: "Hello World!"}}());
    • 27. Javascript e le classi• In Javascript formalmente non esistono leclassi intese come definizione statica di untipo da declinare in oggetti tramiteistanziazione• È possibile simulare la definizione di unaclasse mediante un uso accorto dellecustom constructor function
    • 28. Custom constructor functions• Una funzione se chiamata tramite la parolachiave new si comporta come se fosse uncostruttore in cui loggetto di contesto thissi riferisce alloggetto effettivamente incostruzione
    • 29. Custom constructor functionsvar Foo = function() {this.bar = function() {return "Hello World!";}};var foo = new Foo();foo.bar() //"Hello World!"
    • 30. Module pattern e costruttoriCDays12.namespace("CDays12.Foo");CDays12.Foo = (function() {var ctor = function() {this.bar = function() { return "Hello World!" };};ctor.prototype = {constructor: CDays12.Foo,name: "CDays12.Foo",version: "1.0"};return ctor;}());var foo = new CDays12.Foo();
    • 31. Javascript ed ereditarietà• Anche per quanto riguarda lereditarietànon esiste il concetto di ereditarietà di tipo• Anche lereditarietà può essere simulata inJavascript, sempre tramite le customconstructor function e luso del metodostandard apply
    • 32. Rent-a-Constructor patternvar BaseFoo = function() {this.bar = function() {return "Hello World!";}};var Foo = function() {BaseFoo.apply(this, arguments);};var foo = new Foo();foo.bar() //"Hello World!"
    • 33. Altre caratteristiche di Javascript• Ci sono anche altre caratteristiche propriedel linguaggio che sono fondamentali, inparticolare:– Hosting dello scope– Scoping delloggetto di contesto (this)
    • 34. Hoisting dello scope• Non solo lo scope locale di una variabile è alivello di function, ma la sua dichiarazione èvalida all’interno di tutta la function• In pratica la dichiarazione è come se fossefatta all’inizio della funzione (vienesollevata/hoisted)• Le function definition sono hoisted non soloper quanto riguarda la dichiarazione, maanche per quanto riguarda la definizione
    • 35. Hoisting dello scopevar foo = "foo";function bar() {//locale undefinedalert(foo)var foo = "bar";//locale "bar"alert(foo);}//globale "foo"alert(foo);
    • 36. Difendersi dallhoisting• Per difendersi dallhoisting è sempre benedichiarare ed eventualmente inizializzaretutte le variabili subito allinizio dellafunzione
    • 37. Oggetto di contesto• Ogni chiamata a funzione, durantelesecuzione della stessa, individua unoggetto di contesto accessibile tramite laparola chiave this• Loggetto di contesto non è soggetto ascope lessicale
    • 38. Oggetto di contesto• A seconda del contesto di esecuzione this si riferisce adoggetti diversi– Custom constructor functions: oggetto incostruzione– Method invocation: oggetto su cui si sta invocando ilmetodo– Function definition: oggetto globale– Callback function: oggetto di contesto della funzioneche invoca la callback anche se la callback è unmetodo di un altro oggetto
    • 39. Oggetto di contesto• È possibile imporre loggetto di contesto ad un funzioneinvocandola tramite i metodi standard apply e callvar foo = function(bar) {return this.prop + bar;}foo.apply(myObj, [ bar ]); //this === myObjfoo.call(myObj, bar); //this === myObj
    • 40. Minificazione delle risorse Javascript• Una controindicazione allorganizzazionedella codebase in questi termini è laproliferazione delle risorse Javascript chepuò impattare negativamente sulleperformance di una pagina web• Per ovviare a questo problema è possibileusare librerie di minificazione al volo comeCombres, Yahoo! YUICompressor o GoogleClosure Compiler
    • 41. Bibliografia• Javascript Patterns– Stoyan Stefanov– OReilly editore– Anno 2010
    • 42. Q&A• Materiale suhttp://www.communitydays.it/