Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Slide typescript - xe dotnet - Codemotion Rome 2015

528 views

Published on

  • Be the first to comment

  • Be the first to like this

Slide typescript - xe dotnet - Codemotion Rome 2015

  1. 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. 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. 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. 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. 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. 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. 7. Typescript – Angular - Bootstrap Typescript cosa non è? • Un framework • Un nuovo linguaggio • Un plugin per il browser • Una tecnologia «vincolante»
  8. 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. 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. 10. Qualche esempio…
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×