Post on 15-Aug-2015
transcript
Template designed by
Typescript, Angular e Bootstrap assieme per applicazioni real worldAndrea Boschin – Microsoft MVP - Consultant andrea@boschin.ithttp://blog.boschin.ithttp://www.xedotnet.org
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
Elite AgencyFormazione, Consulenza, Architettura, Analisi, Progettazione, Talks
Andrea BoschinMVP Windows Development Platform
Consulente Freelance
chi siamo / chi sono
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
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
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
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
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
Typescript – Angular – Bootstrap
Typescript cosa non è?
Un framework
Un nuovo linguaggio
Un plugin per il browser
Una tecnologia «vincolante»
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
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
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.
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
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(); }
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!
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»
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
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#
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
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
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