‫Docente: Nella lezione
‫precedente, parlando del front-end e del
‫back-end, ho citato un paio di volte siti
‫web, o applicazioni, semplici e statici
‫e dinamici, ma senza definire bene cosa siano.
‫Quindi, in questo video, volevo chiarire queste cose e
‫parlare anche delle API per portare tutti
‫questi concetti nel quadro più ampio dello
‫sviluppo web back-end in generale.
‫Quindi, iniziamo parlando di siti Web statici
‫rispetto a siti Web dinamici.
‫Quindi, un sito Web statico, o un semplice
‫sito Web come l'ho
‫chiamato nell'ultimo video, è quando uno sviluppatore carica
‫i file finali pronti per essere serviti di un sito Web sul server Web.
‫Questi file di solito contengono HTML,
‫CSS, JavaScript, immagini e altro e, come ho detto, questi
‫sono i file esatti che il server invierà successivamente
‫al browser quando viene richiesto il sito Web.
‫Il browser prenderà quindi questi
‫file e li renderà così come sono.
‫Ciò significa che non c'è lavoro sul server,
‫non c'è codice di back-end e non c'è nessuna
‫applicazione in esecuzione.
‫Va bene?
‫Quindi, è solo un server web statico che serve file
‫statici, esattamente come ho detto nell'ultimo video.
‫Ora, potresti pensare, aspetta, quando
‫c'è JavaScript sulla pagina,
‫di solito ci sono effetti dinamici,
‫come animazioni e cose del genere, giusto?
‫Bene, quella dinamica che intendi è
‫una dinamica diversa.
‫È solo nel contesto dello sviluppo front-end.
‫Nel contesto del browser, la dinamica non ha nulla a che
‫fare con gli effetti su una pagina o le cose che si
‫muovono, ma con il modo in cui i siti web vengono generati sui server.
‫Va bene?
‫Quindi, i siti Web dinamici sono diversi dai siti Web statici
‫perché di solito sono costruiti sul
‫server ogni volta che arriva una nuova richiesta.
‫Quindi, come abbiamo visto
‫nell'ultimo video, i siti Web dinamici di solito contengono
‫un database, quindi c'è anche un'applicazione
‫in esecuzione, come un Node. js, che recupera i
‫dati dal database e quindi, insieme a un
‫modello predefinito, costruisce ogni pagina che l'utente richiede in modo
‫dinamico in base ai dati provenienti dal database.
‫Quindi, ogni volta che un browser
‫richiede una pagina, quella pagina viene quindi creata come file HTML, CSS e
‫JavaScript, che verranno quindi restituiti al browser.
‫L'intero processo è talvolta chiamato
‫rendering lato server.
‫Quindi, di nuovo, ecco perché si chiama
‫dinamico, perché il sito Web può cambiare continuamente in
‫base al contenuto che è
‫nel database o alle azioni dell'utente sul sito.
‫Ad esempio, se hai effettuato l'accesso a
‫Twitter, ti mostrerà una pagina completamente
‫diversa rispetto a quando ti sei disconnesso, giusto?
‫E domani ti mostrerà anche una pagina
‫diversa rispetto a oggi perché ci sono nuovi
‫tweet, quindi nuovi dati nel database.
‫E questo è ciò che sono i siti Web dinamici.
‫Ora, se tu, per esempio, vai da Jonas. io, e
‫dovresti, tra l'altro, vedrai
‫sempre lo stesso contenuto, lo
‫stesso sito web, indipendentemente da quando visiti
‫o cosa fai lì.
‫E quindi, questo significa che è una pagina statica, ok?
‫Ha senso questa differenza?
‫Ora, a volte usiamo il termine siti web dinamici e
‫talvolta il termine applicazione web, ma
‫sono più o meno la stessa cosa.
‫Di solito quando le persone fanno riferimento
‫ad applicazioni web, intendono un sito web dinamico con
‫alcune funzionalità come l'accesso, la creazione di profili
‫utente, la ricerca di cose e cose del genere in generale.
‫I siti web sono, ad esempio, qualcosa come un blog WordPress.
‫Sono ancora generati dinamicamente, ma
‫non possiamo davvero fare altro che leggerli, giusto?
‫E tradizionalmente, i siti Web statici e dinamici erano gli unici
‫due tipi di siti Web, ma negli
‫ultimi anni, grazie a quanto potenti
‫sono diventati i browser lato client, vediamo sempre più
‫siti Web che sono, fondamentalmente, basati su API.
‫Quindi, impariamo come funzionano e come
‫possiamo usare Node. js per alimentarli.
‫Manteniamo solo i siti Web dinamici qui
‫nella diapositiva in modo da poter confrontare meglio i due.
‫Quindi, proprio come con i siti Web dinamici, abbiamo
‫un database qui e abbiamo un'app che recupera i dati
‫dal database ogni volta che un
‫client effettua una richiesta, quindi in questo senso, un sito Web basato
‫su API è in realtà abbastanza simile a un
‫sito Web dinamico sito web.
‫Quindi, entrambi funzionano in modo dinamico.
‫Ora, la grande differenza qui è che con
‫un'API inviamo solo i dati al browser,
‫di solito nel formato dati
‫JSON, e non all'intero sito web.
‫Quindi, di nuovo, solo i dati vengono inviati al cliente e
‫non il sito Web pronto per essere visualizzato.
‫Quindi, niente HTML, niente CSS, solo i dati JSON, va bene?
‫Quindi, quando si creano siti Web
‫basati su API, ci sono
‫sempre questi due passaggi, creare un'API e quindi
‫consumare l'API sul lato client e, a
‫proposito, API sta per interfaccia di programmazione dell'applicazione e, a
‫un livello molto alto, è fondamentalmente un
‫pezzo di software che può essere utilizzato da un
‫altro software per, fondamentalmente, consentire alle applicazioni di comunicare tra loro.
‫E parleremo un po' più a
‫fondo di cosa sia effettivamente un'API una volta che inizieremo a crearne una.
‫Comunque, ora riguardo al lato client che ho appena menzionato.
‫Quindi, è qui che il sito Web viene
‫effettivamente assemblato collegando i dati che riceviamo a
‫una sorta di modello, di solito utilizzando un framework front-end
‫fantasioso come React, Angular o Vue.
‫Non entrerò nello specifico qui
‫perché sarebbe per un corso front-end, ma
‫in termini molto generali, è così che funziona.
‫Quindi, vedi che durante la creazione di un sito Web
‫basato su API, la fase di costruzione del
‫sito Web si è spostata dal back-end al front-end, giusto?
‫Oppure possiamo anche dire che è stato spostato dal server al client.
‫Ecco perché molte
‫volte vedrai siti Web dinamici chiamati rendering lato
‫server perché in realtà sono costruiti sul server.
‫D'altra parte, i siti Web basati su API
‫sono spesso chiamati rendering lato client, il che ha senso, giusto?
‫Quindi, per noi sviluppatori
‫di back-end, in realtà è molto più semplice creare un'API
‫e lasciare che le persone del front-end creino un sito, giusto?
‫E infatti, Node è uno strumento assolutamente perfetto per
‫la creazione di API, ed è molto comunemente usato per questo,
‫ma ovviamente è anche perfettamente
‫adatto per creare un sito Web renderizzato dinamico lato server.
‫Quindi, in questo corso, realizzeremo effettivamente entrambe le versioni,
‫a partire dall'API, e alla fine del corso,
‫anche costruendo un sito Web renderizzato utilizzando gli stessi dati.
‫Ho scelto di fare entrambe le cose perché credo che sia estremamente
‫importante per te sapere come costruire sia un'API che un
‫sito Web renderizzato lato server.
‫E ora, solo per finire
‫questo video, volevo menzionare rapidamente che le
‫API che creiamo con Node, o in realtà, qualsiasi altro linguaggio,
‫possono, ovviamente, essere
‫consumate da altri client oltre al semplice browser, il
‫che è un enorme vantaggio di costruire un'API invece
‫di un sito Web renderizzato lato server.
‫Quindi, supponiamo di
‫creare un'API di esempio su jonas. io/api/myCourseData.
‫Quindi, ogni volta che raggiungiamo quell'URL, il server invierà i dati sui
‫corsi di sviluppo
‫web che sto attualmente insegnando.
‫Ora, finora abbiamo parlato solo di
‫richieste provenienti da browser web, ma potremmo anche richiedere
‫e quindi consumare gli stessi esatti dati
‫JSON su un'app iOS nativa o un'app Android,
‫o anche su app desktop per Mac
‫o per computer Windows.
‫Le possibilità sono davvero infinite quando costruiamo un'API perché
‫abbiamo semplicemente un'origine dati, che può
‫essere richiesta e utilizzata ovunque, non solo
‫nei browser.
‫Questo è un po' il problema quando costruiamo un
‫normale sito web dinamico.
‫Restituiamo file HTML e CSS e
‫JavaScript e solo i browser possono davvero
‫capirli, quindi siamo intrappolati in quella singola piattaforma.
‫E questo potrebbe non essere un
‫problema in molti casi, ma per prodotti complessi che
‫richiedono molte app e quindi siti Web
‫e app Web, di solito è sempre necessaria un'API.
‫Quindi, in questo esempio su Jonas. io, potrei creare questa API
‫e quindi creare un sito Web basato su API e
‫alcune app e ottenere i miei dati
‫su tutti questi client da un'unica fonte, ok?
‫E alcune persone o team non hanno nemmeno alcun
‫cliente proprio e vendono semplicemente l'accesso alla loro
‫API a terze parti
‫che poi consumeranno queste API e non le proprie.
‫Quindi, ci sono davvero intere aziende costruite
‫attorno a questa filosofia di vendere semplicemente un'API ad
‫altri sviluppatori o aziende.
‫Ad ogni modo, spero che con questa diapositiva finale il concetto,
‫la ragione e, in qualche modo, la filosofia alla
‫base della creazione delle API ora ti siano chiari come il cristallo.
‫Quindi, ora andiamo avanti.