La recente affermazione in ambito web delle applicazioni rich basate su HTML5 e Javascript è diventato sorgente di una serie di librerie innovative e di strumenti che, se usati correttamente, possono semplificare enormemente lo sviluppo. In questa sessione sarà illustrato come sfruttare Typescript, in concomitanza con Angular e Bootstrap per realizzare applicazioni che sfruttino al massimo le possibilità dei browser e diano un feedback il più possibile simile alle applicazioni desktop.

1. Template designed by
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. Chi siamo
• User group attivo nel nord-est d’Italia (Mestre/Padova/Treviso)
• Più di 1000 utenti registrati
• 12 eventi serali annui con cadenza mensile
• Altri eventi propri o in collaborazione con Microsoft e altre community
XeDotNet

3. Elite Agency
Formazione, Consulenza, Architettura, Analisi, Progettazione, Talks
Andrea Boschin
MVP Windows Development Platform
Consulente Freelance
chi siamo / chi sono

4. 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
Typescript – Angular – Bootstrap

5. 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
Typescript – Angular – Bootstrap

6. 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

7. 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

8. 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

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

10. 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

11. 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

12. Qualche esempio

13. 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.

14. 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

15. 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(); }

16. 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!

17. 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»

18. 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

19. 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#

20. 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

21. 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

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