typescript, angular e bootstrap assieme per applicazioni real world

Template designed by

Typescript, Angular e Bootstrap assieme per applicazioni real worldAndrea Boschin – Microsoft MVP - Consultant [email protected]://blog.boschin.ithttp://www.xedotnet.org

http://blog.boschin.it/

http://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



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


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 cosa non è?

Un framework

Un nuovo linguaggio

Un plugin per il browser

Una tecnologia «vincolante»


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

Qualche esempio


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.


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


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


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!


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»


Bootstrap: Usare i componenti

Bootstrap contiene molti «controlli»

Conviene sempre privilegiare questi rispetto a quelli di Angular

Per utilizzarli al meglio usare

• Direttive

• Servizi


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#


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


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

http://www.momentjs.com/

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

mailto:[email protected]

https://www.facebook.com/thelittlegrove

https://www.facebook.com/thelittlegrove

http://twitter.com/aboschin

http://blog.boschin.it/

typescript, angular e bootstrap assieme per applicazioni real world

Education