WEB APP:

cos'è e come crearla

Sviluppare una Web App può portare a molti vantaggi rispetto alle altre soluzioni.
Per intraprendere questa strada è necessario conoscere alcuni fondamenti per non sbagliare oltre che individuare le caratteristiche giuste rispetto al tipo di utilizzo che si intende fare.

Architetture possibili: monolitica o con microservizi, sviluppo di API

La primissima cosa da fare è quella di scegliere la tipologia di architettura adottare.

Architetture, tecniche e tecnologie per sviluppare applicazioni web ce ne sono diverse e sono in continua evoluzione, ma possiamo individuare 3 architetture principali.

In questa guida vengono analizzate le tre architetture principali che sono:

1. Architettura Monolitica

2. Architettura a microservizi

3. Architettura Single Page Application con backend API

1 Architettura Monolitica

Così come suggerisce il nome, le Web App monolitiche vengono sviluppate in un blocco unico. Queste presentano una serie di vantaggi che, in alcune condizioni, fanno davvero la differenza. Una Web App monolitica deve essere semplice, snella e effettuare poche operazioni, ma al meglio delle possibilità.

I vantaggi di una web app monolitica

Questo tipo di architettura è forse tra le più semplici da sviluppare da zero considerando che tutte le funzioni e funzionalità del software vengono eseguite nella stessa istanza.

Test e debug della Web App monolitica vengono eseguiti in modo rapido ed è molto facile per lo sviluppatore individuare eventuali problemi. Oltre questo, si tratta della soluzione perfetta se si ricerca la massima velocità di esecuzione della Web App stessa.

Le Web App monolitiche si contraddistinguono anche per i vantaggi in termini di sicurezza. Proprio per la loro natura, permettono un elevato controllo delle autorizzazioni sugli accessi e i possibili attacchi esterni risultano molto limitati considerando il perimetro limitato di azione di eventuali malintenzionati. Sono inoltre facilitate le operazioni di backup ed eventuali ripristini di dati.

Gli svantaggi di una web app monolitica

A fronte di questi vantaggi esistono alcuni lati negativi. Le applicazioni monolitiche sono difficili da scalare orizzontalmente, ossia con più macchine server.

Inoltre la codebase di un’applicazione monolitica può diventare davvero “grande” ed è difficile suddividere il lavoro in più team, esternalizzare parti dell’applicazione o realizzare alcune parti con tecnologie (esempio linguaggi) e tecniche diverse di sviluppo.

Risorse utili

Per approfondire questo tema, il consiglio è quello di consultare quelle che sono le risorse più interessanti sull’argomento. Ecco le più importanti:

Articolo Microsoft “Monolithic applications”

Web Application Architecture: Principles, Protocols and Practices di i Leon Shklar e Richard Rosen

Questo libro sarà molto utile per comprendere meglio le varie tipologie di architetture per la realizzazione di una Web App. Approfondisce molti tempi relativi alle architetture monolitiche in modo semplice e chiaro.

2 Architettura a microservizi

L’architettura a microservizi o modulare, a differenza della precedente, permette di suddividere il dominio della propria webapp in diverse parti, che possono essere affidate a team diversi e che possono anche essere realizzate con tecnologie differenti.

I vantaggi dell’Architettura a microservizi

Queste web app permettono però di sviluppare tutti i componenti che la andranno a comporre in modo indipendente e preciso. Soprattutto per quello che riguarda applicativi più complessi, adottare l’architettura a microservizi, consente una grande flessibilità anche dal punto di vista di eventuali aggiornamenti alla piattaforma, permettendo agli sviluppatori di intervenire su un determinato servizio in modo completamente indipendente dagli altri.

Una Web App a microservizi permette di essere scalata in modo più semplice, ad esempio aggiungendo più macchine server. Inoltre permette di adottare la tecnologia più adeguata per ciascuna funzionalità e accelera il processo di sviluppo di piattaforme complesse.

Gli svantaggi dell’Architettura a microservizi

Le Web App basate su questa tipologia di architettura sono più complesse da sviluppare e la motivazione è proprio da ricercare nelle moltissime possibilità concesse agli sviluppatori.

Risorse utili

Per approfondire questo argomento, anche in questo caso, il consiglio è quello di affidarsi a risorse come libri e guide dedicate su questo argomento:

Building Microservices: Designing Fine-Grained Systems di Sam Newman

Architecture Patterns with Python: Enabling Test-Driven Development, Domain-Driven Design, and Event-Driven Microservices

Building Event-Driven Microservices: Leveraging Organizational Data at Scale

3Sviluppo Single Page Application con backend API

In questo tipo di approccio vengono sviluppati in modo distinto due parti:

• il front end
• il backend

È un approccio molto moderno ed è utile se gli applicativi di front-end sono diversi, ad esempio Web App alla quale si affiancano mobile app iOS e Android.

Sul lato Web App il front-end in genere è realizzato come Single Page Application utilizzando i framework Javascript tra i più diffusi come React, Angular o Vue.js.

Sul lato backend le API possono essere realizzate in casa , oppure si possono usare API già disponibili e questo rende lo sviluppo molto conveniente e simile all’architettura a microservizi. In questo caso, i servizi utilizzati dall’applicativo sono esterni e resi disponibili da servizi terzi. Si tratta di una metodologia che presuppone che i compiti che l’applicativo svolgerà sono stati già sviluppati, ma sono da rendere utilizzabili attraverso un’interfaccia sviluppata appositamente.

Nel concreto una struttura di questo tipo serve ad aggregare servizi provenienti da più fonti o da fornitori specifici (esempio i cosiddetti sistemi headless). La loro integrazione richiede lo studio specifico per ciascuna API da integrare oltre che capire come e perché fare questo tipo di integrazioni.

I vantaggi

Sfruttare delle API già esistenti agevola e snellisce il lavoro degli sviluppatori. È importante però testare il loro funzionamento prima di integrarle in un nuovo software ed utilizzarle.

Non solo però: è possibile realizzare una propria applicazione web rendendo disponibili delle API affinché altre realtà possano sfruttare dati e servizi messi a disposizione dalle proprie API. Anche in questo caso, è necessario avere ben chiaro il risultato che si vuole ottenere prima di cominciare a sviluppare le proprie API. Non è inoltre da escludere che, dopo la creazione della propria Web App sviluppata in base alle proprie esigenze, si proceda a generare da lì la struttura delle API di cui si necessita.

Risorse utili

RESTful Web APIs di Leonard Richardson,Mike Amundsen e Sam Ruby

REST in Practice: Hypermedia and Systems Architecture di Jim Webber, Savas Parastatidis e Ian Robinson

Articolo Microsoft “Scenario: un’app Web che autentica gli utenti e chiama le API Web”

Come scegliere un Framework di Front-End

Dopo aver scelto che tipo di architettura, è importante scegliere a quale tecnologia affidarsi per lo sviluppo frontend. Per agevolare il lavoro degli sviluppatori, la scelta più giusta è quella di affidarsi ad un framework.

I trend dei micro front-end

Per semplificare, è possibile definire il front-end come un container che permette di visualizzare ed utilizzare le funzionalità della Web App che si sta sviluppando.

Tra i framework più utilizzati ad oggi, ci sono sicuramente Angular, Vue.js e React.
Questi framework non solo sono molto versatili, ma il web è pieno di risorse a disposizione degli sviluppatori che intendono utilizzarli. Questo permette di agevolare il lavoro agli sviluppatori che, in caso di problemi, non avranno difficoltà a rintracciare la soluzione giusta.

Se vuoi approfondire questi framework, leggi questi articoli: Angular, Vue.js.

Per semplificare e rendere ancora più preciso il lavoro di una Web App, il mondo dello sviluppo ha portato alla luce una nuova metodologia di sviluppo espressa tramite un’architettura a micro front-end. Questa permette di sviluppare indipendentemente le funzionalità della web app. Questo approccio permette inoltre la possibilità di sviluppare il front-end utilizzando varie tecnologie e scegliere quella giusta per ciascuna funzionalità sviluppata.

Come scegliere il Framework di backend

Per quanto riguarda il back-end ecco i 4 tra i framework più utilizzati al giorno d’oggi:

È bene precisare che Wordpress, Joomla o Magento non sono framework, ma CMS. A differenza dei framework, i CMS si utilizzano per coordinare il funzionamento di applicativi web più complessi. I framework sono invece utili a creare software e funzionalità che possono anche essere incluse in un CMS.

Laravel

Laravel è un framework PHP che risponde a molte delle esigenze di aziende e sviluppatori in termini di sviluppo di Web App. In particolare, grazie agli strumenti messi a disposizione, è in grado di gestire al meglio tutti gli aspetti del backend di questi applicativi e semplifica la gestione del front-end.

Il corso Hackademy di Aulab permette a chiunque imparare i fondamenti di Laravel per imparare a programmare e realizzare la propria Web App.
Grazie alle sue caratteristiche, tutti gli applicativi Web realizzati con Laravel sono scalabili e personalizzabili a piacimento. La documentazione a disposizione e la grande community permettono inoltre di reperire risorse sempre aggiornate sul framework.

Non solo Laravel: il corso Hackademy, in fase accelerate, prende in esame anche Laravel Nova. Come detto nei paragrafi precedenti, si tratta di un framework che permette di sviluppare Web App in low-code. In questo caso, lo sviluppatore è in grado di sfruttare il meglio di Laravel scrivendo però poche linee di codice. Con Laravel Nova è possibile sviluppare pannelli di amministrazione per applicativi Laravel in modo molto semplice. È quindi uno strumento molto potente in grado di facilitare il lavoro di sviluppatori affermati e non.

Laravel Forge

Se si sta utilizzando Laravel per lo sviluppo di una Web App, la scelta più intelligente da fare per pubblicarla è senza dubbio quella di affidarsi a Laravel Forge.

Forge permette di collegare la repository Git sulla quale viene caricato ed aggiornato il proprio progetto in Laravel delegando a Forge la messa online di tutti gli update. Permette quindi, in pochi semplici passaggi, di gestire il flusso di lavoro dello sviluppatore o dei team di sviluppo. Laravel Forge gestisce non solo Laravel, ma permette di utilizzare tutti i principali framework come WordPress o Symphony. In molti si affidano a Laravel Forge per la messa online di Web App vista la sua facilità e l’adattamento semplice all’utilizzo della piattaforma stessa.

Laravel: da dove cominciare?

Per approfondire tutti gli aspetti legati al mondo dello sviluppo di una Web App in Laravel è possibile consultare la documentazione ufficiale disponibile sul sito ufficiale del framework.

In alternativa, il consiglio è quello di imparare a programmare grazie al corso Hackademy di Aulab. Si tratta di un percorso di 3 mesi durante i quali si alterna docenza frontale ad esercizi guidati dai tutor a disposizione. Al termine del corso, tutti gli studenti ricevono gli strumenti per diventare sviluppatori full Stack in grado di sviluppare la propria web app da 0.

Pronto per realizzare la tua prima Web App?
Scopri il corso hackademy

Nuovi trend di sviluppo di una web app

Esistono approcci che cercano di ridurre la mole di lavoro per gli sviluppatori: tra questi abbiamo i Backend as a service e i no code / low code.

Utilizzo di Backend as a service

In casi particolari, è necessario considerare di utilizzare un servizio di backend as a service come Firebase. Più è complessa la web app che si sta sviluppando, più è probabile che ci si debba dotare di servizi del genere. In particolare, quello più utilizzato, è senza dubbio Firebase.

Si tratta di una piattaforma in grado di fornire tutte le funzionalità previste da un backend, ma in cloud . Questo permette di risparmiare risorse in fase di sviluppo, ma anche di sviluppare un servizio senza ricorrere all’utilizzo di un server dedicato.

In alternativa, il mercato ha proposto soluzioni come Strapi. Si tratta di un CMS headless open source che si basa su Node.js. L’utilizzo di Strapi nella propria web app permette di sviluppare software senza preoccuparsi delle difficoltà tipiche dei CMS. A differenza di Firebase, in questo caso non si possono utilizzare database NoSQL.

Soluzioni no-code o low-code su come fare un sito da zero

Ultimamente, il mercato sta proponendo soluzioni per la creazione di Web App alla portata di tutti. Questo permette, virtualmente, di sviluppare applicativi senza scrivere una sola linea di codice o pochissime

Nel primo caso parliamo di veri e propri framework visivi che permettono con pochi click di personalizzare qualsiasi aspetto della propria Web App. Il limite, in questo caso, è il framework stesso. Sono soluzioni che, magari in fase di start, aziende e professionisti non del settore prendono in considerazione solo per avere in poche ore una Web App funzionante da mostrare ai propri clienti.

Le soluzioni low-code permettono di realizzare, attraverso framework, Web App anche complesse, personalizzabili, ma in pochi semplici passi. Sono soluzioni perfette per sviluppatori che hanno necessità di presentare sul mercato il proprio lavoro in tempi brevi, ma allo stesso tempo cercano una soluzione che offra un minimo di flessibilità rispetto a quelle no-code. Al momento, uno dei framework più interessanti in questo campo è senza dubbio Laravel Nova.

Strumenti per disegnare prototipi

Tra gli aspetti da considerare e non tralasciare in fase di sviluppo di una Web App ci sono UX e UI. Si tratta dell’interfaccia che utenti e clienti utilizzeranno per interagire con il proprio applicativo.

In fase di progettazione, è necessario definire quelli che sono sia gli aspetti funzionali che grafici della propria Web App. Figma è uno strumento in grado di aiutare sviluppatori e grafici in questa fase.

Si tratta di uno dei tool più utilizzati del momento. Il suo successo è da ricercare nella grande flessibilità messa a disposizione dagli sviluppatori che permettono di creare prototipi non solo di Web App, ma anche di applicazioni mobile. In particolare, Figma funziona sia online attraverso browser che offline attraverso le app disponibili per i vari sistemi operativi. Permette inoltre a più persone di collaborare allo stesso progetto mostrando live commenti e modifiche effettuate da tutti i collaboratori. A meno che non si intenda utilizzare soluzioni no-code, è fondamentale affidarsi ad uno strumento come questo in fase di prototipazione di una Web App.

Vuoi imparare a creare web app efficaci e funzionanti? Il corso aulab Hackademy è incentrato sullo sviluppo web e la programmazione Object Oriented.

I linguaggi trattati saranno HTML, CSS e Javascript per lo sviluppo frontend e PHP con Framework Laravel per lo sviluppo backend; imparerai a lavorare in team con le Metodologie Agili, utilizzando il framework SCRUM.
Per il progetto finale metterai in pratica ciò che hai imparato, sviluppando da zero un portale di annunci.
Scopri il corso Hackademy