Introduzione ad AngularJS e Sviluppi Futuri

Ultimamente sto studiando molto le soluzioni che ci permettono sviluppare delle mobile app sfruttando direttamente le conoscenze di sviluppo web che io ed i lettori di questo blog possediamo. Tra i vari nomi uno molto ricorrente è stato quello di AngularJS, ti va di scoprirlo assieme?

Con questo articolo non voglio entrare nella classica lotta di quartiere dove da una parte sentiamo “sono meglio le applicazioni native” mentre dall’altra arriva la risposta “ma le web app stanno migliorando ogni giorno” perché altrimenti non ci leviamo più le gambe e non avrò l’opportunità di farti scoprire qualcosa di nuovo; al massimo potresti leggere qualche citazione presa da questo o quel sito internet.

Attraverso il contenuto che troverai in questo articolo sarai in grado di creare il tuo punto di vista personale e in aggiunta tornerai a casa conoscendo AngularJS e il suo funzionamento; non mi pare male come accordo non credi?

Se mi permetti di spendere i miei due cent sulla questione nativo VS web posso semplicemente dire che personalmente spingo per le seconde e non tanto perché in questo modo posso sfruttare le mie conoscenze di sviluppo, ma piuttosto è stata una decisione presa in base ai seguenti punti:

  • il web è qua per restare (come dicevo anche nel mio articolo sull’importanza del web design);
  • dover apprendere due linguaggi di programmazione (Objective C e Java) per sviluppare su due piattaforme diverse mi sembra una gran perdita di tempo;
  • l’Internet of Things demanda delle API più robuste e non ci sarà modo di fermarlo;
  • possiamo mantenere le informazioni all’interno di un unico server e servirle sia al sito web che al device;
  • gli ultimi esempi portati da Firefox OS, Windows Phone e Ubuntu Phone dimostrano che la tecnologia è pronta.

Ci sono sicuramente molti altri motivi per i quali potremmo reputare le applicazioni web migliori rispetto alle native, come qualcuno potrebbe dire del contrario; ma quest’oggi mi voglio focalizzare sull’importanza di approfondire lo sviluppo di applicazioni mobile sfruttando le conoscenze e le tecnologie che quotidianamente utilizziamo per sviluppare i nostri siti web.

Quest’ultimo punto lo ritengo sicuramente un vantaggio; se possiamo sfruttare le nostre conoscenze di HTML5 e CSS3 per costruire le interfacce delle nostre applicazioni (sia web che mobile quindi) saremo sicuramente più veloci e potremmo creare un’esperienza utente unica e che si trasmette anche attraverso i diversi dispositivi.

Ma come dicevo precedentemente, l’intento di questo articolo non è tanto quello di dichiarare le web app migliori delle altre; piuttosto quello di permetterti di scoprire una nuova tecnologia che ti permetterà di velocizzare il tuo sviluppo senza dover stare a perdere nottate nella risoluzione di un bug.

Come ho incontrato AngularJS e perché dovresti continuare a leggere…

Ebbene iniziamo a togliere tutti questi segreti e discorsi e ammettiamo subito che io non conosco AngularJS da molto. Vedi, il web sforna nuove tecnologie ogni giorno ed è facile rincorrere qualche unicorno che poi si rivela semplicemente un sogno. Dato che ho la responsabilità di presentarti le migliori tecnologie (o almeno quelle che io ritengo tali), non mi posso permettere il rischio di parlarti di quelle sbagliate o che non hanno una buona implementazione.

Facciamo un esempio, quante librerie/framework o ambienti di sviluppo sono usciti negli ultimi anni?

Se ci riferiamo soltanto a quelli che basano lo sviluppo su tecnologie dedicate al web possiamo dire: Sencha Touch, Titanium, React.js, PhoneGap, Meteor.js, Dart, Ionic, Kendo UI, Cordova e addirittura una semplicissima libreria JavaScript che ha preso il nome di App.js; sono davvero un sacco di linguaggi, strutture e semantiche diverse!

Ma la nascita di questi framework mi ha anche fatto pensare molto al fatto che questa tecnologia stesse prendendo sempre più piede e che sarebbe intelligente investire ora del tempo per apprendere al meglio le sue evoluzioni; un po’ come è successo quando ho scelto WordPress per la creazione di wpAndMore, sei anni fa questa piattaforma era molto lontana dai successi odierni ma ammetto che è stata una scelta saggia!

Detto questo c’è un’altra notizia che ti devo dare, se sei intenzionato a creare app native sfruttando le tecnologie web AngularJS non sarà sufficiente; è ottimo per scrivere web app compatibili con qualsiasi browser moderno (compreso quelli negli smartphone) ma devo confessarti che ho incontrato questo framework mentre ne stavo studiando un altro: Ionic.

ionic

Non parlerò molto di Ionic in questo articolo, perché la mia intenzione è presentarti AngularJS, ma è una citazione doverosa che devo fare e che ti permetterà di capire la visione a lungo termine che potrai ottenere scoprendo per primo questo framework.

Ionic è un framework che sfrutta Cordova per compilare il codice web che abbiamo usato per creare la nostra web app in applicazioni native per cellulari. Oltre a questo presenta una libreria UI e una serie di plugin che permettono di velocizzare e semplificare molto il nostro lavoro. Forse ti stai chiedendo: ma allora cosa c’entra AngularJS con tutto questo?

AngularJS è il framework selezionato per lo sviluppo della nostra web app e scoprendo questo prima ancora di mettere le mani su Ionic potremmo scoprire la logica alla base che ci permetterà in un attimo di creare mobile app native ;)

Ma allora, cos’è AngularJS?

Che sia un framework spero di avertelo fatto capire ;)

L’argomento interessante quando si parla di AngularJS è il fatto che cerca di integrarsi completamente all’interno del tuo codice HTML riducendo al minimo la necessità di creare delle funzioni di callback da zero; questo è veramente interessante dato che le funzioni di callback sono le strutture dove perdiamo la maggior parte del tempo quando sviluppiamo in JavaScript.

Anche la gestione degli eventi è stata migliorata ma prima ancora di proseguire elencando le bellezze di questo framework andiamo subito ad analizzare per cosa non è buono AngularJS. Se hai intenzione di creare delle applicazioni mobile come editor GUI o dei veri e propri giochi; purtroppo questo framework non ti sarà di grande aiuto e ti consiglio di volgere la tua attenzione a qualcosa più simile a jQuery.

Ma se la tua intenzione è quella di sviluppare un’applicazione CRUD (dove si svolgono le azioni di Create, Read, Update, Delete) allora ti stai rivolgendo al framework adatto!

Cerchiamo subito di capire come AngularJS funzioni e quale sia un suo codice di esempio.

La funzionalità principale di questo codice è il data binding ovvero la sincronizzazione automatica dei dati tra i componenti che definiscono il modello e quelli che ne definiscono la vista. Tendenzialmente il processo di sincronizzazione di questi elementi è rilasciato allo sviluppatore, cosa che ci costringe a scrivere un sacco di codice che gestisca l’aggiornamento dei dati che vengono modificati all’interno del modello o della vista dopo la prima attività di merge che avviene all’esecuzione dell’applicazione.

Grazie ad AngularJS questo non succede perché per prima cosa il nostro browser carica un template che genera una live view della nostra vista e questo significa che questa non è altro che una proiezione del nostro modello. Di conseguenza il controller dedicato completamente indipendente dalla vista che stiamo costruendo; cosa che aiuta incredibilmente anche la costruzione di test per i componenti stessi.

Forse, una cosa ancor più interessante che avrei dovuto farti notare è che tutto il codice che abbiamo scritto è del semplice codice HTML! A parte i richiami ai file JavaScript e CSS necessari per il corretto funzionamento della nostra applicazione AngularJS comunica con la nostra pagina HTML utilizzando semplicemente degli specifici attributi HTML e una forma di template system che viene sfruttato grazie alle doppie parentesi graffe ({{}}).

Utilizzando elementi come le parentesi o attributi HTML ai quali siamo ormai abituati grazie al loro utilizzo quotidiano possiamo dare una spinta al nostro sviluppo e incrementare la nostra velocità di esecuzione. Oltre a questo non bisogna dimenticarsi che grazie a questo approccio conosciamo di già la sua sintassi :D

Da cosa ci libera AngularJS

Ovviamente quando ci troviamo a scegliere un framework piuttosto che un altro c’è sempre da comprendere per bene i motivi per i quali siamo spinti alla scelta; in cosa ci aiuta ad essere più veloci? Quali sono le sue uniche feature che ci permettono di sceglierlo rispetto ad un altro?

liberta

Se devo essere onesto con te non ne conosco molti altri e mi sto avvicinando da poco a questo stesso framework motivato dagli argomenti che ti ho descritto precedentemente; quindi il mio punto di vista non potrà essere obiettivo al 100%. Proprio come dicevo prima, talvolta bisogna fare delle scelte e io mi sono fidato abbastanza ciecamente del fatto che AngularJS potrebbe essere il framework adatto…

Magari tu non nutri la stessa fiducia di Google che ultimamente sta spingendo moltissimo su questo framework piuttosto che il precedente linguaggio Dart. Comunque sia, prima di concludere questo articolo ti lascio una piccola lista con diversi punti a favore che portano AngularJS un framework ancor più interessante da conoscere:

  • registrazione delle callback – come dicevo anche precedentemente, le funzioni di callback sono tra le attività che complicano maggiormente il codice. Con questo framework non avremo più bisogno di preoccuparci di queste strutture e velocizzeremo ulteriormente i tempi di sviluppo;
  • modifica del DOM semplificata – molto spesso quando si lavora con AJAX e il DOM una tra le pratiche più difficili da fare sono la gestione di tutte quelle manipolazioni di basso livello che si possono fare allo stesso DOM. Conoscendo questo framework sarai in grado di descrivere nel dettaglio come la tua applicazione dovrà comportarsi in base a quale azione e pagina senza doverti preoccupare di altro;
  • spostare dati da e alla nostra interfaccia – altra cosa molto fastidiosa da fare è tenere traccia di tutti i dati che un’applicazione CRUD, molto basata agli effetti AJAX, può scatenare. Richieste, moduli da compilare e molto altro succede all’interno delle pagine di una applicazione; avere un framework che ci aiuta a gestire ogni aspetto non può che essere d’aiuto;
  • non dovrai scrivere troppo codice di inizializzazione – tendenzialmente il codice necessario per ottenere un semplice Ciao Mama all’interno di un’applicazione AJAX è veramente molto, ma anche questa volta tutti questi scambi vengono facilitati con l’integrazione di questo framework e permettono di abbattere moltissimo i tempi di sviluppo della propria applicazione.

Quattro punti in cui possiamo facilitare ripetitive e lunghe pratiche, non sembra male pensando che poi potremmo sfruttare queste stesse strutture quando andremo a compilare applicazioni mobile native grazie ad Ionic!

Conclusioni

Ebbene, ancora una volta siamo giunti al termine del nostro appuntamento quindi, prima di concludere mi sembra doveroso cercare di fare un piccolo riassunto dei concetti che abbiamo affrontato in questo articolo.

La cosa che desidero farti capire maggiormente è che ad oggi non hai bisogno di studiare complessi linguaggi di programmazione per lo sviluppo di applicazioni mobile, se conosci i linguaggi standard del web (HTML5, CSS3 e JavaScript) sei più che in grado di avvicinarti a soluzioni come quelle proposte da Ionic.

Di sicuro interesse è ricordarsi che come framework JavaScript Ionic ha selezionato AngularJS e che questo ha dimostrato con molta irruenza la sua utilità nella costruzione di web app infatti, come dicevamo proprio poco fa, molte strutture che prima erano a completo carico dello sviluppatore, sono state delegate a questo framework e, come scopriremo nel prossimo futuro, ci permettono di velocizzare incredibilmente il nostro lavoro!

Anche il fatto che grazie ad AngularJS possiamo scrivere del classico HTML ed essere in grado di creare dei template che possono aggiornarsi in maniera asincrona è incredibilmente interessante e utile da sapere.

Sono sicuro che questo articolo sarà un ottimo spunto per invitarti a conoscere meglio questo framework e ad approfondire le tue conoscenze nei suoi confronti. Se così fosse ti ricordo fin da ora che non dovrai attendere molto per altri articoli su quest’argomento all’interno di queste pagine e ti invito a dare un’occhiata a skillsAndMore dato che al suo interno troverai nei prossimi mesi anche un corso interamente dedicato ad AngularJS.

Ma detto questo devo confessarti che sono curioso di conoscere la tua idea a riguardo. Anche tu pensi che sia sempre più facile e possibile poter sviluppare delle applicazioni native partendo da dei linguaggi di sviluppo dedicati al web? Hai qualche opinione a riguardo? Meglio imparare nel dettaglio Objective C (o Swift) e Java?

Mi farebbe veramente piacere conoscere il tuo punto di vista quindi non esitare a commentare questo articolo oppure a contattarmi direttamente attraverso la pagina dedicata!

Lascia il tuo Pensiero