Anche quest'anno sei sopravvissuto alle feste coi parenti e, incredibilmente sano e salvo, finalmente puoi riprendere fiato e concentrarti sul futuro prossimo: il 2023 è arrivato e ha portato con sè diverse novità, soprattutto per il mondo del coding!
Quali saranno i trends 2023 del web development? Cosa dovrai aspettarti come aspirante programmatore informatico? Ce ne ha parlato, la scorsa settimana, il nostro Coach Giancarlo Valente durante il "Circle Hack Live 2023" l'evento dedicato al Club Alumni di Aulab.
Te lo sei perso? Nessun problema! Ci pensiamo noi!
Ecco qui un riassuntino degli hot topic dell'evento dedicato ai web developers.
Secondo il Coach, nel 2023, ogni developer dovrà monitorare 4 macro trend:
- Low Code/ No code
- Isomorphic Applications
- Artificial Intelligence (AI)
- Universal Platform -> l'innovazione più forte dei prossimi 10/20 anni.
Vediamo come li ha illustrati il coach!
1) Low/No code
Per questo trend lavoriamo con Laravel e il Coach presenta un framework open source che si chiama Filament php.
Laravel non ci risparmia novità per quest anno:
PHP 8.2 che prosegue la sua strada verso una maggiore tipizzazione a febbraio uscirà Laravel 10 e strumenti che già esistevano si stanno consolidando, come Octane (un plugin per Laravel per eseguire applicazioni laravel su un application server più performante) e Vapor (plugin Laravel a pagamento che ci consente di eseguire le nostre applicazioni laravel con tecnologia serverless, quindi con le cosiddette funzioni.)
Per quanto riguarda Laravel queste sono le novità, ma c’è anche qualcosa che si confermerà: si andrà a confermare, infatti, come asset fondamentale per Laravel l'utilizzo del TALL Stack. Che cos'è il TALL Stack?
Facile! Il TALL Stack è l'utilizzo combinato del quartetto composto da: Tailwind css – Alpine.js – Laravel – Livewire
Tailwind css: framework css di frontend che si sta affermando come standard fondamentale, come framework css con un approccio al frontend moderno ed estremamente efficace
Alpine.js: framework JavaScript minimale, per ridurre al minimo le interazioni JavaScript che facciamo lato client
Livewire: il sistema che ci consente di realizzare applicazioni estremamente interattive e flessibili con Laravel, ma lavorando semplicemente in linguaggio PHP.
Ricordiamo che Livewire è un sistema "component based", basato su componenti (come Blade, il php template system di Laravel).
E cosa riesce a fare livewire? Quando il client effettua la richiesta il server elabora una response con un html completo, che può essere immediatamente visualizzato dal browser e con il quale possiamo interagire immediatamente;
poi il server manda una piccola applicazione js, estremamente performante, e da quel momento in poi sul client abbiamo un componente che ha il suo stato interno memorizzato nell'html e, ogni volta che interagiremo con il componente, partirà una chiamata js verso il server, e il server risponderà con una porzione html per aggiornare il componente stesso e il suo nuovo stato.
Un sistema estremamente performante! E sulla base di questo TALL STACK è stato costruito il framework che presentiamo, ovvero Filament php, che si propone come il "TALLkit elegante per gli artigiani laravel".
Parliamo, quindi, di un set di strumenti che consentono di realizzare applicazioni in modo molto efficace. Come funziona?
I creatori, in pratica, hanno preso in prestito la DX (Developer Experience) resa popolare da Laravel Nova, fatta di codice dichiarativo, e l'hanno messa a disposizione di un ecosistema open source. La scelta tecnica rispetto a Nova è diversa, perché Nova ha un backend Laravel e un front end in Vue.js mentre filament è basato sul TALL Stack.
Con Filament, scriveremo codice dichiarativo e il sistema si occuperà di realizzare la cosa per noi in maniera immediata. Proprio come con Laravel Nova possiamo creare dei back office, con tutta la possibilità di gestire le resources, possiamo creare per ogni entità una risorsa e lavorare su quei dati in modo molto molto rapido. Questo strumento mette, inoltre, a disposizione un completo form builder che possiamo usare sia nel back office che nel front. Fornisce persino un sistema per creare in modo dichiarativo (quindi no-code) delle griglie performanti, proprio un grid system.
Ci sono per Filament una serie di elementi aggiuntivi gratuiti che possiamo includere (per esempio un elemento per integrare i grafici)
Parleremo meglio di Laravel Filament PHP in un appuntamento a Febbraio proprio con il nostro coach Giancarlo Valente, da non perdere!!
2) Isomorphic Applications
Se conosci il linguaggio Javascript, sicuramente avrai capito di cosa parliamo. Il framework che andremo a presentare come trend 2023 in questo senso è Qwik.
Javascript ovviamente anno dopo anno continua a generare nuove tecnologie e nuovi frameworks.
Una novità importante di Js per il 2023 è il Vite, questo tool estremamente performante che è stato integrato anche nel building degli asset di Laravel; React la fa da padrona per quanto riguarda la DX, ma stanno emergendo altri frameworks Javascript come Solid js che ha una DX molto simile a React, però vanta un motore di esecuzione che sembra riesca ad outperformare React.
Anche Svelte inizia ad essere sotto i riflettori e sta crescendo molto come ecosistema.
Ovviamente legato a React abbiamo Next.js che ci introduce proprio al discorso delle isomorphic applications.
Qual è il tema? Questi frameworks Javascript servono per realizzare le cosiddette SPA – Single Page Applications. Applicazioni che vengono trasferite sul client e girano completamente sul client, interagendo col server attraverso chiamate API. Quest' esperienza non è esattamente altamente performante per alcuni motivi, di base costituiti da piccoli ritardi, soprattutto nella prima chiamata e altre piccole difficoltà che ogni framework sta cercando di sistemare.
Quindi, cos'è successo? Che sopra questi frameworks sono nati tutti una serie di strumenti che ci consentono di fare questa isomorphic application.
Dietro React è emerso Next.js (che oggi sembra un po' essere diventato lo standard per chi vuole fare applicazioni React)
Vue, dal suo canto, ha Nuxt.js, Svelte ha Svelte kit, e sono emersi degli strumenti come Astro che consentono di dividere la nostra applicazione in piccole isole e far girare diversi frameworks su varie isole.
Ma cosa fanno questi sistemi in realtà? Il Server Side Rendering: consentono al framework Javascript di girare sia lato server che lato client. Perchè? Perchè nel modello delle single page application il nostro client fa una richiesta e il server risponde con una pagina web. Ma questa pagina web per il modello SPA è completamente vuota, non può visualizzare nulla! La sua indicazione è di caricare un JS, un CSS e un <div> all interno del quale verrà esplosa la nostra applicazione.
Il client, quindi, riceve quell html e fa una seconda request, dove viene reinviato al client un Javascript, che in genere è enorme, perchè contiene il framework e la nostra applicazione completa. Qual è il problema?
Che il tempo che serve all' applicazione per diventare interattiva per l'utente è un po' rallentato, c'è un pochettino di ritardo.
Tutti quei sistemi sopracitati cosa fanno, quindi?
Il browser fa la get request, il serverr fa girare l applicazione react lato server e genere un html completo, con conetnuto, già visualizzabile! Poi il ciclo continua: ciò che è stato già considerato lato server side, viene sincronizzato lato client side e viene fatto il re-rendering della pagina e vengono agganciati i listener: cosa vuol dire? Che il tempo che occorre perchè l'utente possa interagire con l'applicazione diminuisce notevolmente. Ma è ancora lungo. Ed è qui che subentra Qwik.
Come avrai capito, Qwik è un framework focalizzato sulle performance, che permette di realizzare un'unica code base che giri un pochettino lato server e un pochettino lato client.
La DX è la stessa di React. Quindi perchè usare Qwik?
La DX è identica per rendere il passaggio eventuale indolore, ma il modello di esecuzione di qwik – trasparente per il developer è estremamente elaborato. I creatori – Misko Hevery (creatore di Angular), Manu Almeida (creatore di Stencil) e Adam Bradley (creatore ionic) – hanno inventato la "Resumable Application".
Come funziona?
Qwik ha una parte client che girerà sul client, ma ha anche una parte server. Noi creiamo l'applicazione e la mettiamo nel server;
il client fa la prima request;
l'applicazione gira sul lato server;
il server ritorna un html con lo stato per ogni componente, inserito proprio in attributi specifici dell'html.
Otteniamo un html immediatamente visualizzabile; in più quest html è particolare, perchè quando vado a interagire col componente (dato che all'input è stato legato un pezzo di Javascript) partirà un' altra request e il server risponderà con lo stesso pezzettino di Javascript che avrà creato in automatico che serve a rendere il componente interattivo.
Quindi cos'ha fatto il server? Ha "spezzettato" la componente in varie parti in modo tale da far si che l'applicazione venga caricata in modo graduale man mano che viene utilizzata dall'utente. Approfondendo, ci sono anche dei meccanismi che, addirittura, possono anticipare il caricamento, ottenendo un'esperienza per l'utente assurdamente performante e rapida!
Vuoi saperne di più su Qwik? L'evento col coach è previsto per Marzo 2023!
3) AI: Intelligenza Artificiale
Impossibile non aver sentito parlare, nell'ultimo periodo, di Chat GPT-3 e Github CoPilot.
Quello del codice assistito da intelligenza artificiale è un argomento estremamente interessante. L'AI in questi ultimi anni ci sta facendo davvero vedere cos'è capace di fare: generazione di immagini, video, immagini tridimensionali e voice cloning sono solo alcuni degli spunti possibili. Ma quello che a noi interessa sottolineare come l'intelligenza artificiale sta aiutando il coding: GitHub CoPilot e Chat GPT-3.
GitHub CoPilot si presenta come "your AI pair programmer".
Hanno preso tutta la code base di Github e l'hanno data in pasto all'AI. Il sistema è diventato, quindi, in grado di auto-compilare il tuo codice. Digitando il tab accetti il codice generato in autonomia. Non si tratta di un semplice "cerca un testo e riproponilo", ma entrano davvero nel merito del codice! Scritto anche in un'altra modalità, il sistema capisce che i due codici sono equivalenti: croccante, eh?
Chat GTP-3 presenta una schermata in cui c'è un prompt: puoi inserire la richiesta che vuoi. Richiedendo, ad esempio, un "codice in React per visualizzare una gallery di immagini", l'intelligenza artificiale non solo propone un esempio di snippet di codice in React richiesto, ma addirittura lo descrive! Più dettagliati si è nella richiesta, migliore sarà il risultato. Anche per chat GPT-3 c è un plugin da installare in VS code. Code GPT è il plug-in che va a contattare chat GPT-3 e risponde direttamente in Visual Studio Code.
E, pensa un po', Microsoft sta considerando di investire 10 miliardi di dollari in OpenAI, proprietaria di Chat GPT-3. Ci sentiamo di dire che la questione ha un futuro, che dici?
Laravel ha un pacchetto che si chiama Open AI Client e, indovina un po'? Un'intensa sessione di live-coding con Laravel che comunica con Open AI, ti aspetta, sempre in compagnia del nostro coach Giancarlo Valente, ad Aprile 2023!
4) Universal Platform
La strada che abbiamo di fronte nel prossimo decennio verso la creazione di una piattaforma universale per far girare le applicazioni web – e non solo! –
Un altro trend individuato su questo filone è il Web Assembly, una tecnologia che sta ancora maturando.
Conoscerai sicuramente Figma: un'azienda che ha investito tantissimo nel web assembly, da diversi anni, anche se non era ancora effettivamente pronto. Se carichiamo figma sul browser e andiamo su Network e su wasm (che sta appunto per Web Assembly) ci accorgeremo che lui sta in quel momento scaricando l'applicazione fatta in Web Assembly. Adobe ha persino comprato Figma, visto il potenziale del competitor!
Ma che cos'è il Web Assembly? Ce lo dice proprio Chat GPT-3!
"Web Assembly è un formato binario di basso livello" cosa significa? Un codice sorgente scritto in un linguaggio di programmazione viene compilato e diventa un codice binario web assembly.
Il codice sorgente in quale linguaggio di programmazione? In questo momento il migliore a supportare Web Assembly è Rust, ma ce ne sono diversi e diversi altri si stanno mobilitando in tal senso. (Persino il linguaggio PHP ha un compilatore web assembly in questo momento! E siamo tutti in attesa che il linguaggio Javascript proceda a sua volta)
Questo strumento è stato progettato per essere eseguito nei browser web moderni:
- il browser riceve il web assembly
- un JIT (Just In Time Compiler), estremamente efficiente, perchè deve fare una traduzione piccolissima, compila istantaneamente il wasm in codice macchina nativo, ottenendo delle performance strabilianti, inarrivabili da qualsiasi altro linguaggio di programmazione interpretato.
Il vantaggio è che, compilato una volta verso wasm, al cambio del dispositivo che abbia un JIT, lo stesso binario sarà eseguito anche sulla nuova macchina, con performance al massimo! "Questo rende il wasm una piattaforma estremamente attraente, perchè io posso compilare una sola volta e far girare l'applicativo su un'ampissima gamma di dispositivi!"
Trattandosi, poi, di codice binario è molto più facile da scaricare ed eseguire.
"Anche se è una tecnologia non ancora completa, il potenziale per farla diventare una piattaforma di runtime universale per le applicazioni web è enorme"
Questi i trends 2023 di cui, se sei uno sviluppatore web, non puoi assolutamente tralasciare l’approfondimento! Non perderti, quindi, tutti gli appuntamenti delineati nell’articolo. Ti aspettiamo!
