TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
Download as PPTX, PDF2 likes522 views
Il documento tratta l'uso combinato di TypeScript, Angular e Bootstrap per lo sviluppo di applicazioni web interattive e responsivi. Viene evidenziata l'importanza di superare le limitazioni di JavaScript con TypeScript, che offre una tipizzazione statica e una migliore manutenibilità del codice. Viene inoltre discussa l'organizzazione del codice e la gestione dell'asincronia nel contesto di Angular.
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
- 1. Template designed by Typescript, Angular e Bootstrap assieme per applicazioni real world Andrea Boschin – Microsoft MVP - Consultant [email protected] 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: [email protected] Facebook: https://www.facebook.com/thelittlegrove Twitter: http://twitter.com/aboschin Blog: http://blog.boschin.it