Introduzione a AngularJS

Transcript

1 11 MAGGIO 2016 Introduzione a AngularJS Ing. Evelina Agostini

2 MINI CV Ing. Evelina Agostini - evelina.agostini@elbuild.it - Laureata in Ingegneria Informatica all Università di Firenze Background: Java EE, JSF, PHP, C++, MySQL, Javascript, HTML/CSS Quasi full stack, ad oggi mi concentro maggiormente sul front end Esperienza con AngularJS dal 2014 Sviluppo software, faccio un po di tutto, mi piace imparare cose nuove :) 2

3 COS È ANGULARJS AngularJS è uno dei più popolari framework open source per lo sviluppo di web application Sviluppato originariamente da Misko Hevery (Google) nel 2009 AngularJS 1.0 è stato rilasciato nel 2012 Il progetto è adesso supportato ufficialmente da Google La versione corrente è la Angular 2 è attualmente in beta Sito web, documentazione e tutorial: angularjs.org 3

4 PRINCIPALI CARATTERISTICHE single page application MVC disaccoppia la manipolazione del DOM dalla business logic disaccoppia client side e server side fornisce struttura progettato per facilitare il testing dei componenti (unit testing, E2E testing) 4

5 JQUERY E CO. La necessità di rendere le UI delle web application altamente interattiva è ad oggi prioritaria Il rischio che si corre quando si usano strumenti come JQuery o librerie simili è creare quello che viene chiamato spaghetti code, cioè un codice senza struttura, in cui si mescola manipolazione del DOM e business logic e si creano degli accoppiamenti stretti attraverso l uso dei selettori Conseguenza? Difficoltà di manutenzione, testing e debugging mal di testa :P Differenza tra una libreria e un framework Non significa che jquery non sia utile! 5

6 PAGINA WEB CLASSIC MODE web server browser richiesta URL risposta (web page+assets) HTML JavaScript il browser carica l intera pagina l utente clicca su un link risposta (web page+assets) HTML JavaScript il browser ricarica l intera pagina 6

7 PAGINA WEB CON ANGULAR (O SIMILI) web server browser richiesta URL risposta (web page+assets) HTML JavaScript il browser carica l intera pagina l utente clicca su un link DATA risposta con dati JSON i dati sono caricati nella pagina esistente 7

8 APPLICAZIONE API-DRIVEN SERVER db API applicazione web app mobile altri sistemi 8

9 ALTERNATIVE A ANGULAR JS? 9

10 CARATTERISTICHE DI ANGULAR JS (1) Angular is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want? 10

11 CARATTERISTICHE DI ANGULAR JS (2) AngularJS permette di decorare l HTML con speciale markup che si sincronizza con il JavaScript permettendo di concentrarsi sulla business logic invece che aggiornare manualmente le viste. Il data binding e la dependency injection snelliscono fortemente il codice che devi scrivere. Tutto avviene nel browser: è un partner ideale per qualsiasi tecnologia lato server. Non si tratta di un pezzettino nel processo generale di costruire la componente client side di una web application: è una soluzione client side completa, che comprende tutto il codice necessario per gestire il DOM e le chiamate AJAX, che avresti scritto a mano. E mette tutto questo in una struttura ben definita. E basato sull idea che per costruire la UI è meglio usare codice dichiarativo, mentre il codice imperativo è perfetto per la business logic. 11

12 PERCHÉ ANGULARJS E FICO E davvero una buona idea disaccoppiare la manipolazione del DOM dalla logica dell applicazione. Migliora nettamente la testabilità del codice: dare importanza al testing del codice è un bene! Separare nettamente lo sviluppo della parte client side da quella server side permette di procedere in parallelo e facilita il lavoro in team. Permette anche il riuso di entrambe le parti. L utilizzo di un framework di questo tipo guida lo sviluppatore nella costruzione di una app, dal design della UI, alla scrittura della business logic, al testing. Rende i task comuni banali e quelli difficili possibili. Dare una struttura ben definita al codice che compone la UI migliora drasticamente la manutenibilità. 12

13 ANGULAR TI LIBERA DA ALCUNE ROTTURE Registrare callback, rischiando di creare un albero disordinato di chiamate. Hai meno codice da scrivere ed è più facile vedere cosa fa la tua applicazione. Manipulare il DOM in modo programmatico, rischiando di commettere errori e, anche qui, di complicare la struttura, mescolando la logica dell applicazione con il codice prettamente necessario per aggiornare la pagina. Pensare al trasferimento dei dati dalla UI e verso la UI. Scrivere un sacco di codice di inizializzazione solo per partire. 13

14 CURVA DI APPRENDIMENTO La barriera iniziale per cominciare a sviluppare con AngularJS è molto bassa: dopo aver visto alcuni esempi, sei pronto per partire e costruire qualcosa che funziona, anche senza aver approfondito tutti i concetti. La documentazione disponibile per partire è buona. Quando arrivi a costruire una app reale la curva si alza, e la documentazione può risultare un po più carente per i task che ti ritrovi a affrontare. Niente di impossibile comunque :) 14

15 PRINCIPALI COMPONENTI (1) Template: HTML con elementi di markup addizionali Directive: estendono l HTML con attributi e elementi custom Model: i dati, che vengono elaborati dalla business logic e mostrati nelle viste Scope: il contesto dove è memorizzato il model, in modo che i controller, le directive e le espressioni nelle viste possano accedervi Espressioni: risiedono nelle viste, accedono alle variabili e alle funzioni nello scope Compiler: esegue il parsing dei template e istanzia le directive e le espressioni 15

16 PRINCIPALI COMPONENTI (2) Filter: formattano il valore delle espressioni per mostrarle all utente Vista: cosa vede l utente (il DOM) Data Binding: sincronizza il model e le viste Controller: la business logic dietro alle viste Dependency Injection: crea e collega oggetti e funzioni Modulo: il contenitore per le diverse parti di una app Service: un componente di business logic riusabile indipendente dalle viste 16

17 DATA BINDING Il data-binding, nelle app Angular, è il meccanismo di sincronizzazione automatica dei dati tra il modello e i componenti della vista. Il modo in cui Angular implementa questo meccanismo fa sì che il model possa essere considerato la single-source-of-truth nell applicazione. In ogni istante la view è una proiezione del model; quando il model cambia, la view riflette questo cambiamento e viceversa. Questo rende possibile eliminare tutte le procedure di manipolazione del DOM dalla lista di cose di cui ti devi preoccupare :) 17

18 ONE-WAY DATA BINDING view template one-time merge model La maggior parte dei sistemi di templating collega i dati in una sola direzione effettuando un merge dei template e dei componenti del model in una vista. Dopo che l operazione di merge è stata effettuata, la vista non riflette eventuali cambiamenti nel model o in altre sezioni della stessa. Allo stesso modo, qualsiasi modifica che l utente effettua a partire dalla vista non viene propagato nel model. Questo significa che lo sviluppatore deve scrivere del codice che effettui costantemente una sincronizzazione della vista con il modello e viceversa. 18

19 TWO-WAY DATA BINDING template compiler Il template, cioè l HTML con markup addizionale o directive associate, viene compilato: questo step produce una live view modifiche nella view aggiornano il model view aggiornamento continuo il model è la singlesource-of-truth model cambiamenti nel model aggiornano la view Qualsiasi modifica nella view è immediatamente riportata nel model e qualsiasi cambiamento nel model viene propagato nella view Il model è il single-source-of-truth per lo stato dell applicazione Questo semplifica la gestione da parte dello sviluppatore Si può pensare alla vista come una proiezione istantanea del modello 19

20 DATA BINDING - ESEMPIO (1) Browser Template 20

21 DATA BINDING - ESEMPIO (2) View (DOM) Angular si occupa del binding: ogni volta che il valore dell input cambia, il valore delle espressioni è automaticamente ricalcolato e il DOM è aggiornato di conseguenza name: eve Scope 21

22 TEMPLATE (1) Questo è un template Angular. Sembra normale HTML, con alcuni elementi di markup aggiuntivi. Quando Angular esegue l applicazione, effettua il parsing del template e processa questo markup utilizzando il compiler. Il DOM, così caricato, trasformato e visualizzato diventa quindi la view. 22

23 TEMPLATE (1) Directive Il primo tipo di markup aggiuntivo sono le directive. Esse applicano un comportamento particolare a attributi o elementi nell HTML. L attributo ng-app è collegato ad una directive che inizializza automaticamente la nostra applicazione. Questo è un template Angular. Sembra La directive normale ng-model HTML, invece memorizza/aggiorna con alcuni elementi il valore del campo di input da e verso una variabile. di markup aggiuntivi. Quando Angular esegue l applicazione, effettua il parsing del template e processa questo markup utilizzando il compiler. Il DOM, così caricato, trasformato e visualizzato diventa quindi la view. 23

24 TEMPLATE (1) Il secondo tipo di markup aggiuntivo sono le doppie parentesi graffe: {{ expression filter }}. Quando il compiler incontra questo markup, lo sostituisce con il valore calcolato. Directive Un espressione in un template è uno snippet di codice JavaScript-like che permette ad Angular di leggere e scrivere le variabili. Questo è un template Angular. Sembra normale HTML, con alcuni elementi di markup aggiuntivi. Quando Angular esegue l applicazione, effettua il parsing del template e processa questo markup utilizzando il compiler. Il DOM, così caricato, trasformato e visualizzato diventa quindi la view. 24

25 TEMPLATE (2) In una tipica app Angular troviamo una serie di file HTML che rappresentano i template E possibile mostrare viste multiple in una pagina principale utilizzando la directive ng-view per caricare queste rappresentazioni parziali (partial), cioè segmenti di template posizionati in file HTML separati, in base alle configurazioni di routing 25

26 CONTROLLER In Angular, un Controller è definito da una funzione JavaScript costruttore, che viene utilizzata per modificare lo scope. Quando un Controller viene collegato con il DOM attraverso la directive ngcontroller, Angular instanzia un nuovo oggetto Controller, utilizzando la funzione costruttore. Un nuovo scope figlio viene creato e reso disponibile nel controller come parametro iniettabile ($scope). I controller sono utilizzati per: inizializzare lo stato dell oggetto $scope aggiungere funzionalità all oggetto $scope 26

27 CONTROLLER: ESEMPIO (1) 27

28 CONTROLLER: ESEMPIO (2) inizializziamo l oggetto $scope aggiungiamo funzionalità 28

29 CONTROLLER: ESEMPIO (3) $scope.findanagrams = function(){! if ($scope.name){! $scope.anagrams = calculatepermutations('', $scope.name);! }! }; Controller anagrams: [ eve, eev', vee ] name: eve findanagrams: function <div ng-controller="anagramscontroller">! <h1>ciao {{name}}!</h1>! <input type="text" ng-model="name" ng-change="resetanagrams()" placeholder="scrivi il tuo nome" />! <input type="button" ng-click="findanagrams()" value="trova anagrammi"/>! <div ng-show="anagrams.length">! Ho trovato {{anagrams.length}} anagrammi per il tuo nome:! <ul>! <li ng-repeat="anagram in anagrams">! {{anagram}}! </li>! Introduzione </ul>! a AngularJS - Ing. Evelina Agostini 29 View Scope

30 SERVICE Nell esempio che abbiamo visto il controller contiene tutta la logica. Quando l applicazione cresce è una buona pratica spostare la logica indipendente dalla vista dal controller in un service, in modo che possa essere riusata in altre parti dell applicazione. In seguito vedremo che i service sono anche il punto giusto dove inserire codice che si interfaccia con un backend. I Service in angular sono oggetti che vengono collegati, tra loro o con gli altri componenti, attraverso la dependency injection (DI). I Service possono essere usati per organizzare il codice e condividerne porzioni all interno della app. I service in Angular sono: istanziati con modalità lazy: un service viene istanziato quando un componente dell applicazione dipende da esso; singleton: ogni componente che dipende da un service ottiene un riferimento alla singola instanza generata dalla service factory. 30

31 SERVICE - ESEMPIO Dependency Injection il modulo anagramsapp dipende dal modulo permutationsmodule Controller Service 31

32 SCOPE Lo Scope è un oggetto che fa riferimento al model dell applicazione. E un contesto di esecuzione per le espressioni. Gli scope sono organizzati in una struttura gerarchica che imita la struttura del DOM. Gli scope possono essere innestati, per limitare l accesso alle proprietà da parte di un componente e allo stesso tempo fornire l accesso a proprietà condivise. Gli scope innestati possono essere: child scope: eredita le proprietà del suo parent scope isolated scope: non eredita dal suo parent scope (vediamo più avanti a cosa serve) Uno scope fornisce un contesto nel quale il valore delle espressioni viene calcolato. Per esempio l espressione {{name}} di per sé è priva di significato, a meno che non sia calcolata in uno specifico scope, che definisce la proprietà name. Gli scope forniscono un interfaccia ($watch) per osservare i cambiamenti nel model. 32

33 SCOPE - COME FUNZIONA Lo Scope è la colla tra il controller e la view. Durante la fase di compilazione del template le directive creano delle espressioni di watch sullo scope, che permettono loro di essere notificate quando le proprietà dello scope cambiano, in modo che possano visualizzare i valori aggiornati nel DOM. Sia i controller che le directive hanno un riferimento allo scope, ma non gli uni alle altre. Questo meccanismo isola il controller dalla directive e dal DOM. Questo è importante per lo unit testing dei componenti. 33

34 SCOPE - GERARCHIE Ogni applicazione Angular ha esattamente un root scope, ma può avere multipli child scope. Alcune directive possono creare nuovi child scope; quando questi sono creati, vengono aggiunti come figli del loro parent scope. Questo crea una struttura ad albero che corrisponde al DOM a cui sono collegati. Quando l espressione {{name}} viene calcolata, Angular prima guarda nello scope associato con l elemento: se non trova la proprietà name, la va a cercare nel parent scope e così via fino a raggiungere il root scope (prototypical inheritance). Nota: abbiamo visto che gli scope innestati possono essere definiti come isolated scope e in quel caso non ereditano dal loro parent scope. 34

35 SCOPE - ESEMPIO Controller Template 35

36 SCOPE - ESEMPIO Controller Template 36

37 SCOPE - ESEMPIO (2) name= Evelina names= [ Giulio, Luca, Diego ] name= Dario name= Giulio name= Luca name= Diego rootscope! name= Dario secondname= Gino 37

38 DIRECTIVE Ad alto livello, le directive sono marker su elementi del DOM (come un attributo, il nome di un elemento, un commento, o una classe CSS) che comunicano al compiler Angular di collegare una specifica funzionalità a quell elemento del DOM e ai suoi figli. Angular fornisce un set di directive built-in, come ngmodel, ngclass, ngclick, ngshow, ngrepeat Come per i controller e i service, si possono creare delle directive custom. 38

39 DIRECTIVE: MODALITÀ DI MATCHING Come un attributo: <span my-directive></span>! Come una classe CSS: <span class="my-directive: expression;"></ span> Come un elemento: <my-directive></my-directive> Come un commento: <!-- directive: my-directive expression > Best Practice: preferire i nomi dei tag e gli attributi rispetto ai commenti o ai nomi delle classi. Generalmente così è più semplice determinare quale directive è associato ad un dato elemento. 39

40 DIRECTIVE: ESEMPIO (1) Vogliamo creare un componente riusabile per mostrare messaggi di success/ warning/error utilizzando gli alert di Bootstrap 40

41 CUSTOM DIRECTIVE: ESEMPIO (2) Template Directive 41

42 CUSTOM DIRECTIVE: ESEMPIO (2) Controller Template Template della directive Directive 42

43 DIRECTIVE: SCOPE Scope: se non definisco uno scope per la directive, viene utilizzato lo scope del controller associato con il template o con la porzione del template. Attraverso l attributo scope posso regolare questo comportamento: se lo imposto a true, viene creato un nuovo scope, che si inserisce nella gerarchia; se lo associo a un nuovo oggetto (come nell esempio), creo un isolated scope e posso passare dei parametri (variabili, reference a oggetti e funzioni) alla directive. Questo è utile per riutilizzare più volte la stessa directive nello stesso contesto con contenuto diverso. scope: {! myobject: '=', myfunction: '&', mylabel: '@' } // Collegamento con l oggetto! // Passaggio del riferimento (della funzione)! // Passaggio del valore associato alla variabile! 43

44 DIRECTIVE: LINK E COMPILE Per ogni directive è possibile definire una funzione link o una funzione compile (o entrambe) La funzione link è utilizzata principalmente per collegare event listener a elementi del DOM, osservare proprietà del model per rilevare cambiamenti, e aggiornare il DOM. Si può utilizzare questa funzione per eseguire della logica, sapendo che tutti gli elementi figli sono stati compilati e tutte le funzioni link associate con gli elementi figli sono state eseguite. La funzione compile è utilizzata per modificare il DOM prima che la funzione link venga eseguita. Si può quindi utilizzare questa funzione per trasformare il DOM originale (cioè il template non compilato) prima che Angular ne crei un istanza e che lo scope venga creato. Nota: la funzione compile non ha accesso allo scope. Solitamente la funzione link è considerata il posto più sicuro per inserire il tuo codice. E quella che viene usata la maggior parte delle volte. 44

45 ROUTING Il sistema di routing di Angular permette di implementare applicazioni SPA (Single Page Application) con viste multiple. Un applicazione di questo tipo consiste di multiple view (template HTML dove ogni template è associato ad una route specifica). Con il meccanismo di routing un applicazione Angular può mostrare contenuti diversi in base a quale route viene selezionata. Il pratica le route sono URL che collegano a un contenuto specifico dell applicazione. I framework di routing per le applicazioni di tipo SPA aggiornano la URL del browser quando l utente naviga attraverso la app. Viceversa, questo permette anche di guidare la navigazione attraverso la app cambiando la URL nel browser. In questo modo si possono creare dei bookmark per sezioni specifiche della app. AngularJS fornisce di base il modulo ngroute per il routing. Un alternativa è AngularUI Router ( si tratta di un framework di routing per AngularJS, molto flessibile, che permette di organizzare le varie sezioni dell interfaccia utente in una macchina a stati. UI-Router è organizzato intorno agli state, che possono opzionalmente avere delle route collegate, così come altre funzionalità. 45

46 ROUTING: ESEMPIO App con due pagine : lista utenti e dettagli utente Usiamo ui-router per il routing 46

47 ROUTING: ESEMPIO (2) 47

48 USARE UNA API REST Essenzialmente ci sono due strumenti principali per interfacciarsi con una API REST da una app Angular: $http e $resource. $http è fornito insieme Angular ed è pensato per generiche chiamate AJAX. Lavora a più basso livello e per questo necessità probabilmente della scrittura di più codice, ma permette maggior flessibilità e controllo. $resource estende $http per l uso nello scenario di una API RESTful, fornendo un più alto livello di astrazione. Esistono anche librerie di terze parti, es. Restangular. 48

49 USARE UNA API REST: ESEMPIO (1) Riprendiamo l esempio degli utenti, questa volta recuperandoli da una API remota Per questo esempio ho utilizzato JSONPlaceholder ( jsonplaceholder.typicode.com) che fornisce fake API per testing e prototyping 49

50 USARE UNA API REST: ESEMPIO (2) 50

51 USARE UNA API REST: ESEMPIO (3) 51

52 STRUMENTI DI SVILUPPO Yeoman è usato per generare automaticamente la struttura della tua app: crea le cartelle di base, i file e le configurazioni per partire velocemente con lo sviluppo. Grunt è usato per velocizzare lo sviluppo e aiutare nell eseguire task ripetitivi. Bower è usato per per aggiungere plugin o framework di terze parti e risolvere le dipendenze. 52

53 CENNI SUL TESTING Le feature di Angular sono state progettate in modo da facilitare il testing del codice. Il principio del Separation of Concerns, che emerge dalla struttura degli elementi di Angular, facilita lo unit testing delle diverse parti. Ad esempio la Dependency Injection permette di testare i componenti passando come dipendenze degli oggetti mock. Strumenti aggiuntivi per il testing delle app Angular: Karma: è un tool command line in JavaScript che può essere usato per lanciare un web server che carica il codice dell applicazione e esegue i test. Si può configurare Karma per eseguire con vari browser in modo da verificare che l applcazione funzioni correttamente in tutti i browser supportati - Jasmine: è un framework per il testing di codice JavaScript. Non dipende da altri framework JS e non richiede che venga creato un DOM per eseguire i test - jasmine.github.io 53

54 UN ESEMPIO REALE: SHOFER (1) Shofer è un servizio di trasporto on-demand in tempo reale al momento attivo a Perth, Australia e a Durban, Sud Africa - backoffice 54

55 ANGULAR JS: UN ESEMPIO REALE (2) Shofer fornisce i suoi servizi tramite una app mobile, disponibile per Android e ios Il backoffice è realizzato con una app AngularJS backoffice backend AngularJS Java EE JAX-RS Application server: Glassfish DB: MySQL API HTTPS REST JSON app mobile 55

56

57

58

59

60

61

62 ANGULAR 2 Angular 2 è una versione completamente rinnovata per AngularJS. Attualmente la versione 2.0 è in Beta - Non si tratta semplicemente di un aggiornamento ma di una riscrittura completa dell intero framework: cambiano molte cose rispetto alla prima versione, comprese caratteristiche fondamentali. Solo alcuni esempi: Si utilizza TypeScript, che estende il Javascript. Il codice viene poi compilato in modo che il browser continui a eseguire JS Si utilizza un approccio component-based: quello che in Angular 1.X si fa con controller e directive, in Angular 2 si fa con i component Scompare lo $scope Ma allora ha ancora senso imparare Angular 1.X? La comunità degli sviluppatori ha pareri discordi. Bisogna notare che Angular 2 è il futuro ma è al momento in Beta e non si sa bene quando sarà rilasciato ufficialmente, mentre Angular 1 è un prodotto stabile, con molte risorse disponibili sia in termini di documentazione che di librerie. Fondamentalmente: dipende da cosa hai intenzione di farci 62

63 INTRODUZIONE A ANGULAR JS GRAZIE PER L ATTENZIONE! Domande? Ing. Evelina Agostini evelina.agostini@elbuild.it 63