Il documento discute l'integrazione di TypeScript, Angular e Bootstrap per lo sviluppo di applicazioni web interattive e responsive. Vengono evidenziati i vantaggi di TypeScript come un superset di JavaScript che migliora la manutenibilità e la struttura del codice, insieme all'utilizzo di Angular per la gestione delle interfacce e delle operazioni asincrone. Infine, si evidenziano strumenti e librerie a supporto, quali jQuery e Moment.js, per facilitare lo sviluppo e la gestione dei dati.

1. Typescript, Angular e Bootstrap
assieme per applicazioni real world
Andrea Boschin – Microsoft MVP - Consultant
andrea@boschin.it
http://blog.boschin.it
http://www.xedotnet.org

2. Typescript – Angular - Bootstrap
Nuovi requisiti sviluppo web
• Sempre maggiore interattività
• Utilizzo pesante di codice client-side (javascript)
• Supporto ai device mobile (responsività)
• Capacità del sito/applicazione di adeguarsi a diverse dimensioni dello schermo
• Feedback simile alle applicazioni desktop
• Eliminazione ovunque possibile di navigazione e post-back
• Utilizzo di chiamate AJAX/AJAJ
• Architetture manutenibili
• Strutturazione migliore del codice
• Richiesto soprattutto per le applicazioni enterprise

3. Typescript – Angular - Bootstrap
Strumenti a supporto
– Responsività
• Foundation 4
• Bootstrap 3
– Componenti di interfaccia
• Bootstrap 3
• AngularJS
• jQuery UI
• jQuery Mobile
– Data binding
• KnockoutJS
• AngularJS
– SPA
• Durandal
• AngularJS
– Pattern MVC/MVVM
• Durandal
• AngularJS
– Accesso al dom
• jQuery
– Utilizzo di AJAX/AJAJ
• jQuery
• AngularJS (ngHttpService)
– Unit Test
• AngularJS
– Altre librerie
• MomentJS

4. Typescript – Angular - Bootstrap
Strumenti a supporto
– Responsività
• Foundation 4
• Bootstrap 3
– Componenti di interfaccia
• Bootstrap 3
• AngularJS
• jQuery UI
• jQuery Mobile
– Data binding
• KnockoutJS
• AngularJS
– SPA
• Durandal
• AngularJS
– Pattern MVC/MVVM
• Durandal
• AngularJS
– Accesso al dom
• jQuery
– Utilizzo di AJAX/AJAJ
• jQuery
• AngularJS (ngHttpService)
– Unit Test
• AngularJS
– Altre librerie
• MomentJS

5. Typescript – Angular - Bootstrap
La selezione
• Angular (google)
• Framework per lo svilluppo di applicazioni
• Bootstrap (twitter)
• Framework per la user interface responsiva
• jQuery
• Chi non lo conosce?
• Prerequisito per l’utilizzo di Angular (versione minified)
• MomentJS
• Gestione delle date

6. Typescript – Angular - Bootstrap
Javascript?
• Javascript è affascinante... Non c’è dubbio 
• E’ un linguaggio molto divertente
• Si ottengono risultati inattesi
• Flessibilità incredibile
• Però
• È difficile da imparare
• È difficile da controllare
• È difficile da manutenere
• in una azienda questi sono problemi reali

7. Typescript – Angular - Bootstrap
Typescript cosa non è?
• Un framework
• Un nuovo linguaggio
• Un plugin per il browser
• Una tecnologia «vincolante»

8. Typescript – Angular - Bootstrap
Typescript cosa è?
• E’ un superset di Javascript
• qualunque codice Javascript è Typescript valido
• L’output del compilatore è Javascript
• non è richiesto alcun plugin per usarlo nel browser
• Aggiunge le necessarie tutele a Javascript
• Ad esempio static type checking, classi, moduli, interfacce
• Il codice scritto è più semplice e strutturato secondo OOP
• Il codice prodotto è comprensibile e manutenibile
• Non si perdono le potenzialità di Javascript
• Implementa già oggi lo standard Ecma Script 6

9. Typescript – Angular - Bootstrap
Typescript e le librerie di terze parti
• E’ possibile importare le definizioni dei tipi usando dei file di definizione
• Analoghi a file «.h» di C
• Hanno estensione «.d.ts»
• Si trovano definizioni per quasi ogni libreria esistente.
• Vedere «DefinitelyTyped»
• Le definizioni possono essere importate in Visual Studio
• Sono elaborate senza necessità di inclusioni
• Danno accesso ai membri delle classi e alle funzioni
• Non importano automaticamente la libreria! Bisogna sempre usare il tag <script />
• Possiamo scrivere noi stessi definizioni per nostre librerie esistenti

10. Qualche esempio…

11. Typescript – Angular - Bootstrap
Interfacce o classi?
• Uno dei vantaggi di Typescript è la tipizzazione che ci tutela da errori
• E’ possibile creare propri tipi (classi)
var myCar = new Car();
myCar.Plate = ‘EF 000 AH’;
• E’ molto più vantaggioso usare le interfacce
var myCar: ICar;
myCar.Plate = ‘EF 000 AH’;
• Le interfacce non generano codice Javascript.
• Godiamo del controllo dei tipi ma non paghiamo lo scotto di scaricare molto codice.

12. Typescript – Angular - Bootstrap
Organizzare il codice
• Typescript consente di dichiarare moduli
• Un modulo è analogo ad un namespace di C#
• I moduli hanno membri pubblici e privati
• Possono essere suddivisi in diversi file per ottimizzarne il caricamento
Come
• Usare «export» sugli elementi che devono essere pubblici
• Usare moduli annidati per una migliore organizzazione

13. Typescript – Angular - Bootstrap
Il contesto di «this»
• In Javascript è usuale che «this» assuma diversi significati in base al
contesto.
• Il seguente codice è normale
var _this = this;
$(function() { _this.doSomething(); })
• In Typescript la sintassi lambda gestisce questo caso automaticamente
$(() => { this.doSomething(); }

14. Typescript – Angular - Bootstrap
Angular: Controller
• Tecnica:
• Dichiariamo una classe
• Grazie a Controller As usiamo la classe al posto dello $scope
• Risultato
• La classe diventa un controller
• Il codice è meglio organizzato e comprensibile
• Possiamo sfruttare ereditarietà
• Visual Studio: L’intellisense è il nostro migliore amico!

15. Typescript – Angular - Bootstrap
Angular: Directive
• Una direttiva è?
• Si presenta come un tag HTML
• Incapsula una porzione di HTML e della eventuale logica associata
• Utili per:
• Creare componenti riutilizzabili
• Consentono di non sporcare il controller con elementi di interfaccia
• Regola: solo in una direttiva posso usare jQuery e accedere al DOM
• Posso
• Esporre proprietà per customizzare
• Rendere le proprietà «bindabili»

16. Typescript – Angular - Bootstrap
Bootstrap: Usare i componenti
• Bootstrap contiene molti «controlli»
• Conviene sempre privilegiare questi rispetto a quelli di Angular
• Per utilizzarli al meglio usare
• Direttive
• Servizi

17. Typescript – Angular - Bootstrap
Angular: Gestire l’asincronia (degli altri)
Problema
• Le operazioni asincrone sono tipiche delle applicazioni Javascript
Soluzioni
• jQuery supporta le «Promise» che risolvono in modo elegante
• Angular supporta le promise in proprio mediante Qservice
• N.B. Preferire sempre QService a jQuery per il supporto al Databinding
Come
• I metodi asincroni ritornano un oggetto «IPromise»
• Questo espone metodi callback come
• then() = successo
• catch() = eccezione
• finally() = analogo a «finally» di C#

18. Typescript – Angular - Bootstrap
Angular: Gestire l’asincronia (propria)
Problema
• E se devo creare le mie operazioni asincrone?
Soluzione
• Il QService che consente di gestire le proprie «Promise»
• L’uso di Callback classici impedisce il corretto Databinding.
Come
• Richiedere $q service
• Usare defer – resolve - reject

19. Typescript – Angular - Bootstrap
Prendiamo un «moment»
Lo so, la battuta è scontata... 
• Moment è la migliore libreria per gestire il tipo Data in Javascript
• Fa tutto... 
• http://www.momentjs.com

20. Andrea Boschin – Elite Agency
Email: andrea@boschin.it
Facebook: https://www.facebook.com/thelittlegrove
Twitter: http://twitter.com/aboschin
Blog: http://blog.boschin.it
Contact me