Benvenuti su GIT BAR, il podcast dedicato al mondo dei full stack developer, i mezzo artigiani, mezzo artisti che ogni giorno infilano le mani nel fango per creare nel modo più efficace possibile quei prodotti digitali che quotidianamente utilizziamo.Eccoci qua, sesta puntata di GIT BAR, ormai abbiamo superato le cinque puntate per cui siamo a metà delle collinette per il nostro primo traguardo i 10 episodi.Questo episodio lo sto registrando in una condizione abbastanza critica infatti mi trovo in macchina e sto registrando con le cuffiette perché ho dimenticato le attrezzature a lione per cui se l'audio non sarà eccezionale avete presto capito il motivo anzi devo dire che se in qualche modo riusciremo a salvare quest'audio non è merito mio ma è merito di Alex Racuglia Podcaster da data in memore e anche uno dei più seguiti podcaster italiani che qualche giorno fa su Telegram mi ha dato dei suggerimenti su come rendere migliore l'audio registrato in macchina per cui io sono qua e li applicherò pedissecuamente.L'argomento di oggi è le progressive app.Prima di parlare però di progressive app è necessario fare un piccolo focus sulla fruizione di contenuto online.La fruizione di contenuto online viaggia prevalentemente su due canali oggi.Il primo sono le web app o i siti web quindi tutto ciò che passa attraverso una pagina html.La seconda invece attraverso l'utilizzo di app native che possono essere o android o apple quindi possiamo offrirle o dai nostri device android oppure dai nostri iphone o ipad.ognuna di queste due modalità ha supporto dei pro e dei contro quindi esistono dei lati per i quali conviene più sviluppare delle app native e degli altri per i quali appunto ha più senso sviluppare delle web apps prima di parlare di app native però è necessario collegarci quindi provare per un attimo a rivedere il percorso fatto dalle applicazioni prima di raggiungere appunto le app native.Nel 2007 quando Jobs presentò l'iPhone, egli parlò del fatto che questo nuovo device magico avrebbe potuto contenere al suo interno migliaia di applicazioni con funzionalità diverse ed erano appunto le web app, le città esplicitamente.Naturalmente Jobs cambiò velocemente idea, infatti quattro mesi dopo rilasciando l'SDK quindi il software development kit il kit per gli sviluppatori per la realizzazione di app native.Inizio a parlare di app native e di apple store.Questo passaggio produce a apple circa 40 milioni di revenue.Quindi da una parte ci sono le web app cercabili su internet sviluppate magari in html css con del javascript che possono essere linkate quindi con tutti i vantaggi di questo tipo di applicazioni dall'altra abbiamo le app native che invece hanno tutta un'altra serie di funzionalità di caratteristiche positive per esempio creano un qualche collegamento più stabile con l'utente che al posto di entrare ogni volta da browser per visualizzarle se le trova direttamente nella springboard o nel desktop del proprio device e le avvia semplicemente premendolo quindi sono sempre presenti a vista.Questo è uno dei tanti o per esempio il fatto che l'essere nativa le rende più legate al sistema operativo per cui le funzioni che riescono a eseguire sono diciamo di natura molto più profonda e con molte più funzionalità rispetto alle applicazioni web.Cosa è successo però? Che è nata l'esigenza di trovare qualcosa nel mezzo, qualcosa che possa avere pari funzionalità di un'app nativa ma che continui a tenere le caratteristiche di una web app.Infatti nel 2015 google ha presentato la nuova tipologia di web app diciamo io le ho chiamate le superman web app quindi di web app con funzioni aggiuntive.Queste web app si chiamano progressive web app.Si chiamano progressive web app perché gradualmente riescono a utilizzare le feature disponibili appunto nel device e nel browser nel quale girano.Sono diciamo a metà strada tra le app native e le web app però secondo me non vanno viste come diciamo app native diminuite bensì come web app on steroid quindi con una serie di vantaggi.Quali sono rispetto alle app native i vantaggi di una app progressive? Beh senza dubbio il primo è linkare azioni e contenuti specifici essendo delle pagine web è possibile quindi puntare ad aree specifiche di quella web app.Quindi avere dei link che agiscono all'interno.Poi sono trovabili dei motori di ricerca cosa che in realtà le app native non possono fare.Vi faccio un esempio.Io ho un'app che contiene dei contenuti.Se io volessi fare una ricerca su un contenuto specifico all'interno di quest'app e lo volessi fare da dentro Google, beh questa ricerca sarebbe praticamente impossibile perché Google non può indicizzare i contenuti all'interno dell'app.Le ricerche all'interno degli store non vanno a controllare i contenuti delle delle app stesse per cui quel contenuto sarebbe completamente tagliato fuori e sarebbe accessibile solo attraverso l'app.Questo in realtà con le web app non succede perché semplicemente le web app non sono altro che delle pagine html per cui motori di ricerca efficienti come google o bing possono vedere i contenuti all'interno e quindi proporli.Naturalmente con le tecnologie responsive queste web app sono sempre di più adattabili e responsive a seconda del design quindi riescono in qualche modo a mimetizzarsi all'interno del device quindi spesso nel momento in cui non riusciamo a distinguerle e infatti sembrano sempre di più delle app native naturalmente cosa succede? che essendo delle web app quindi trovabili da browser non richiedono quello sforzo e quella fiducia iniziale che invece richiedono le app native che prima di avviarle è necessaria l'installazione quindi cosa devo fare? devo installare l'app, avviarla e posso vedere i contenuti con le web app o le progressive web app non dobbiamo installare niente e noi possiamo tranquillamente vedere i contenuti quindi diciamo che quel salto quel gradino di fiducia richiesto per le app native non è più necessario.Altra cosa importante il problema vero delle web app si ha quando manca la connessione.Infatti capita spesso che quando manchi la connessione il nostro browser ci restituisca errore e ci mostri il famoso T-Rex, il famoso T-Rex di Chrome non so se ricordate.Bene, le progressive web app utilizzano delle tecnologie attraverso i web workers, ne parleremo dopo, che permettono diciamo di gestire i momenti in cui non c'è connessione.Anzi per essere precisi il problema dei momento in cui non c'è connessione è marginale perché o c'è connessione o non c'è se non c'è connessione l'app potrebbe bloccarsi ma il vero problema è quando abbiamo una connessione intermittente cioè quando la connessione va e viene e la nostra esperienza in termini di navigazione risulta alterata o comunque gravemente limitata.Bene in questo caso esiste appunto la tecnologia del web worker che ci permette di sviluppare una cache che va in qualche modo a salvare, volendo, i risultati delle richieste HTTPS.I risultati di queste richieste possono essere presi in considerazione nel momento in cui la connessione va a cadere per cui l'app continuerà a essere funzionale anche se la connessione non c'è più.Questa è una delle tante funzionalità così come la possibilità di utilizzare dei database uno di questi appunto è index db per la memorizzazione dei dati.Altra cosa importante nella frizione dei contenuti attraverso web app ci sono comunque meno passaggi infatti dobbiamo installare l'app, avviarla, anzi trovarla dallo store, installare l'app, avviarla e a quel punto offrire i contenuti quando invece con una web app l'unica cosa che dobbiamo fare è digitare il sito, arrivarci con un motore di ricerca e fruire i contenuti.Naturalmente le progressive app hanno una caratteristica.Per essere tali devono essere sicure quindi tutto il flusso dei dati deve viaggiare su HTTPS.Se non esiste questa possibilità beh non possiamo parlare di progressive web app.Su dispositivi Android è anche possibile l'inoltro di notifiche push chiamate Web Push che sono uno standard nelle app native e che adesso appaiono anche nelle progressive web app e che servono a rendere più ingaggiante la fruizione dei contenuti nelle tue applicazioni quindi riescono in qualche modo a instaurare una relazione tra il fruittore e il contenuto.Rispetto alle app native tra l'altro il vantaggio della Progressive Web App è che non deve fare tutto l'iter necessario per l'aggiornamento che invece deve fare una app nativa.Questo perché in realtà le app native devono essere caricate negli store una volta aggiornato e gli store hanno i loro tempi.Specialmente lo store è poi che ci mette dai 4 giorni in su devo dire che in realtà gli aggiornamenti spesso vanno sotto i due giorni però diciamo che non è un lasso di tempo prevedibile quando invece noi vogliamo rilasciare la nostra app la nostra progressive web app beh non faremo altro che fare il deploy sul nostro server o attraverso il nostro sistema di continuous integration oppure come meglio preferiamo e da quel momento in poi senza attendere altri tempi o pagare altre tariffe la nostra web app sarà aggiornata.Naturalmente quando parliamo di progressive web app non parliamo diciamo del miracolo che non ha lati oscuri, che non ha limiti.Le progressive web app hanno dei limiti, consumano più energia e più dati perché naturalmente oltre ai contenuti devono anche scaricare lo skeleton la struttura dell'applicazione.E' anche vero che la struttura dell'applicazione può essere insieme a magari i file javascript o css archiviata in una qualche cache per cui si ottimizza il traffico dei dati anche se però questo traffico ci deve comunque essere.Sono supportate perlomeno nel mondo Apple dalla versione 11.3 di iOS e devo dire che queste web app non girano completamente su tutti i device infatti diciamo che non tutta la gamma di funzionalità è operativa diciamo su iOS e Android potrebbero esserci delle funzionalità implementate su Android e delle altre implementate su safari o su chrome per ios non è possibile stabilire un engagement forte con gli utenti ios perché perché con le progressive web app abbiamo le web push le notifiche web push che non funzionano su safari mobile per cui le notifiche push non è possibile svilupparle abbiamo anche alcuni limiti al supporto offline, non esiste uno store quindi non c'è la possibilità di acquisire traffico da quel canale e non esiste un ente di controllo come gli store che appunto esegue un processo da approvazione quindi in qualche modo diciamo pubblicano cani e porci sul web diciamo che esistono anche dei limiti legati al sistema operativo e l'accesso dei componenti hardware come funzionano le progressive web app quindi quali sono le caratteristiche diciamo gli elementi che fanno sì che queste progressive web app funzionino? beh sono due il primo è l'app manifest il secondo sono i web worker che cos'è l'app manifest? l'app manifest è un file che descrive come deve comportarsi l'app come deve in qualche modo vestire i panni di un'app nativa la nostra Progressive Web App.Lì indichiamo il nome dell'app, il nome ridotto possiamo indicare l'icona, possiamo indicare il colore di sfondo della top bar e tutte quelle caratteristiche che in qualche modo vengono lette poi dal device e fanno sì che la nostra Progressive Web App abbia un lato estetico che più la faccia assomigliare a un'app nativa.In realtà però il vero diciamo snodo principale è dato dai web workers che sono dei file javascript che girano in background quindi le azioni sul DOM, le azioni sui componenti html che rendono bloccante ogni azione appunto legata al DOM non interveniscono sulle funzionalità eseguite dai web worker che possono essere completamente asincrone rispetto all'azione sul DOM e che possono durare molto di più soprattutto senza interrompere la operatività e l'attività della parte front-end legata al DOM.una delle funzionalità che si possono fare con i web worker è senza dubbio la gestione delle cache quindi è possibile attraverso l'uso appunto di questo javascript che gira in background e che comunica con il front side attraverso lo scambio di messaggi è quello appunto di archiviare l'html e il css.lhtml che può essere lo scheletron della pagina, il css lo stile della pagina è possibile anche archiviare le response HTTP per cui se la nostra applicazione fa una qualche richiesta web service è possibile mettere in cache quella risposta e fare sì che ogni qual volta si chiami questo endpoint e non ci sia connessione il web worker si metta come come middleware come elemento nel mezzo e dia a lui la risposta che ricorda quindi la risposta memorizzata alla precedente chiamata.Ricordiamo che le cache generate dal webworker è diversa dalla cache del browser.Noi sappiamo che i nostri browser memorizzano le pagine html e css però a differenza della cache del browser la cache del webworker può essere controllata sempre scrivendo quel codice javascript del file javascript appunto del web worker e abbatte i tempi di download.L'utilizzo del web worker fa sì che i tempi di download di tutti i file che ne so l'html o il css dello skeleton della pagina non devono essere ricaricati a ogni chiamata questo appunto fa sì che i tempi di download dei file siano drasticamente ridotti.Attenzione che comunque i tempi ridotti saranno solo quelli di scaricamento e non quelli di rendering.Altra funzionalità che è possibile fare attraverso i web worker è la web push.Si tratta di notifiche push che vengono inviate verso il dispositivo e che in qualche modo attivano il dispositivo anche se non si fa una richiesta.Per cui è possibile farlo tranne che su iOS.iOS nel quale qualche tempo fa è partita anche una petizione però è normale che Apple non voglia attivarle perché attivandole diciamo limiterebbe quelli che sono i vantaggi competitivi che ha un'app nativa e quindi in qualche modo andrebbe a intaccare quella quota di fattura data appunto dallo spostamento di alcuni developer dallo store verso il web attraverso il rilascio di Progressive Web Application.Adesso la domanda è naturale, viene scontata.La domanda è quando mi conviene sviluppare una Progressive Web App? Una Progressive Web App ha senso svilupparla quando ho necessità che l'app venga facilmente distribuita ad una base utenti molto ampia.perché stando sul web noi possiamo fare un po' di SEO possiamo renderla disponibile a una base utente più ampia perché non costringiamo l'utente di entrare su uno store cercare, trovare e scaricare l'applicazione, installarla per poi entrarci questa frizione data appunto dallo store viene completamente bypassata e bypassando questa frizione beh, la fetta di mercato si amplia Un altro motivo per cui valga la pena sviluppare una Progressive Web App rispetto ad un'app nativa si ha quando si parla di budget.Infatti se abbiamo un budget limitato ha senso sviluppare una Progressive Web App Web App che è sviluppata con tecnologie HTML, JavaScript e CSS tecnologie più accessibili rispetto al Java delle applicazioni Android o all'Objective-C o al Swift delle applicazioni native.tra l'altro i costi degli sviluppatori che sviluppano in Objective-C o in Java sono decisamente più alti rispetto a quelli che sviluppano in HTML, CSS e JavaScript.Altro motivo per cui valga la pena sviluppare delle progressive web app è senza dubbio il budget, sempre per lo stesso motivo di cui io vi stavo parlando poco fa, nel senso che gli sviluppatori HTML e JavaScript e CSS costano decisamente meno rispetto agli sviluppatori di linguaggi nativi e soprattutto se abbiamo il bisogno di sviluppare un'app multiplataforma beh ne dovremo sviluppare solo una perché le progressive web app girano sia su android che su ios naturalmente è possibile fare una corretta indicizzazione sui motori di ricerca e questo è importante e soprattutto c'è la possibilità di aggiornarle in modo molto più pratico come dicevo prima appunto basta fare un deploy su un server e l'app è aggiornata su tutto il device senza dover attendere i tempi di autorizzazione degli store o tempi di compilazione.Esistono però dei limiti nello sviluppo di app native per esempio quando si ha la necessità di accedere a funzioni hardware infatti le app native hanno un collegamento verso i componenti hardware ben più forte rispetto al collegamento che si ha passando attraverso un browser oppure un altro elemento che ci spinge verso l'utilizzo di app nativa è quando abbiamo bisogno di velocità e reattività all'interno della nostra app per esempio quando sviluppiamo applicazioni che prevedono funzionalità di realtà aumentate passare per il browser vuol dire introdurre un livello da strazione e quindi passare per un ulteriore collo di bottiglia.Altra cosa importante è senza dubbio quando si cerca di sviluppare un modello di business è molto semplice monetizzare le proprie applicazioni passando sugli store questo perché i produttori dei device e dei sistemi operativi hanno realizzato degli appositi store che hanno al loro interno funzionalità già semplificate per la monetizzazione delle stesse app per cui non dovremo andare a fare sistemi di iscrizione o di pagamento è tutto incluso all'interno dell'SDK della piattaforma nella quale stiamo sviluppando.Naturalmente c'è sempre da dire che questa piattaforma vorrà in qualche modo qualcosa indietro per cui una percentuale una fee del nostro business.Un altro caso in cui è necessario sviluppare un'app nativa è quando quest'app deve essere collegata con altre applicazioni.Per cui abbiamo già detto che in qualche modo le progressive web app creano un ponte portano i superpoteri presenti nelle app native li portano anche sulle web app rendendo le nostre applicazioni che stanno online molto più potenti certo è che le app native hanno dei vantaggi che ancora le web app non riescono a raggiungere ma stando al budget e stando a tutti i vantaggi le progressive web app hanno motivo di esistere Bene, la puntata di oggi, anche se in una condizione di emergenza, è terminata.Io vi ringrazio.Ci sentiamo la prossima settimana con una nuova puntata.L'unica cosa che vi chiedo è quella di aprire la vostra applicazione di podcast e iscrivervi al podcast di Gitbar.Se volete condividere con voi il vostro punto di vista o qualcosa nel quale non siete d'accordo con me potete farlo scrivendo a info@gitbar.it oppure contattandomi su twitter @brenrepo io vi saluto e ci sentiamo la prossima settimana.Ciao! Gitbar, il circolo dei full stack developer.Una volta a settimana ci troviamo davanti a due birre e con Brenrepo parliamo di linguaggi e tecniche di sviluppo web, di metodologie ed strumenti immancabili nella cassetta degli attrezzi dei Full Stack Dev.informazione informati di
