Con l’uscita dei nuovi standard HTML e EcmaSript6 (che ha rivoluzionato il modo di sviluppare in JavaScript) Google ha pensato di iniziare a sviluppare un nuovo framework per lo sviluppo di applicazioni Web basato sulla base di AngularJS.
Questa notizia ha generato un grande entusiasmo sia per chi già stava sviluppando in AngularJS sia per chi non conosceva al pieno il framework fin al momento in cui è uscita la notizia che Angular2 al contrario di quanto ci si potesse aspettare non è stato un aggiornamento di AngularJS ma bensì una riscrittura completa del framework senza alcuna compatibilità con la versione precedente.
Questa notizia ha generato sicuramente non poche polemiche che però ora dopo circa 1 anno e mezzo dall’uscita del nuovo framework possiamo vedere gli effettivi risultati e personalmente devo ricredermi su ogni critica legata al nuovo approccio creato dal team di Angular per lo sviluppo di applicazioni Web.
Quali sono le novità?
Una delle principali critiche su AngularJS era legata alla difficoltà di apprendimento del framework, il team di Angular di conseguenza ha provato a semplificare il tutto eliminando concetti come scope e controller in modo da focalizzare l’attenzione sull’elemento chiave di Angular2 il component.
Altra grande pecca di AngularJS era la difficoltà di integrazione con librerie esterne o con altri framework, ora con Angular2 l’architettura del framework è altamente modulare e favorisce la scrittura di applicazioni modulari. Molti componenti del framework sono opzionali è quindi molto facile sostituirli con altri di terze parti o direttamente create da noi.
Dal punto di vista delle prestazioni notiamo un grande miglioramento della fase di boostrapping dell’applicazione e un intelligente sistema di rilevamento delle modifiche con refresh automatico dell’applicazione. Anche la fase di rendering è stata notevolmente migliorata.
Ormai la maggior parte delle applicazioni web è improntata ad un utilizzo desktop e mobile di conseguenza il team di Angular ha introdotto di default il supporto a tutti gli eventi touch e gesture e permette elevate prestazioni per assicurare un interazione fluida sui dispositivi mobile.
Angular2 supporta tutte le novità di ES6 e in oltre supporta anche altri linguaggi come TypeScript, sarà poi il compilatore TypeScript ad occuparsi della conversione a JavaScript nativo.
L’architettura di Angular2
Il componente principale di Angular2 è il modulo, non è altro che un contenitore di funzionalità che ha il compito di renderle visibili ad altri moduli.
La suddivisione in moduli torna molto utile quando un applicazione e suddivisa in varie aree che interagiscono o meno tra di loro in modo da rendere più chiara la struttura dell’app e quindi velocizzare lo sviluppo e la manutenibilità del codice. Detto questo non è obbligatorio creare moduli per sviluppare un applicazione.
La prima cosa da creare in un applicazione Angular2 sono i component.
Un component non è altro che una classe che gestisce una view della nostra app. Si preoccupa di recuperare i dati da inviare alla view e gestire le interazione dell’utente con la view.
Successivamente bisogna creare il template.
Il template non è altro che un pezzo di codice HTML che renderizza i dati contenuti nel compoent ed invia le interazioni dell’utente con l’app al componente che lo gestisce.
Altro componente fondamentale sono le direttive.
Una direttiva permette di customizzare il codice HTML e come questo viene rendirizzato sul browser. Per esempio si possono creare tag HTML custom è fare un modo che una direttiva li trasformi in codice HTML standard. Per esempio è possibile creare un tag (<orologio></orologio>) che una direttiva riesce ad interpretare e generare il codice HTML per creare un orologio ovviamente il codice nativo dovremo scriverlo noi all’interno della direttiva pero basterà scriverlo una volta per poi poterlo utilizzare in un qualsiasi componente.
L’ultimo componente utilizzato ma non meno importate sono i servizi.
Un servizio è una classe che svolge un compito ben preciso all’interno dell’applicazione, per esempio il recupero di dati dal server , la gestione del logging , la gestione delle notifiche ecc.
Software consigliati per lo sviluppo e Link utili
Trattandosi di codice JavaScript, puoi usare un qualsiasi editor di testo, anche se è consigliato avere un software che aiuti nel completamento del codice e nella gestione del repository. La soluzione migliore al momento ricade su VSCode sviluppato da Microsoft che va al di sopra di un qualsiasi editor di testo.
Visita il sito ufficiale per tutte le info in dettaglio.
Repository GitHub ufficiale.
