Storia del Frontend

4.1 Storia dello sviluppo web: da HTML a HTML5 e CSS3

All'inizio degli anni '90 il mondo ha visto la nascita dello sviluppo web grazie a Tim Berners-Lee. Era di fatto il primo sviluppatore Frontend: ha inventato HTML e ha scritto da solo, creando anche il primo browser. Un vero frontendista non si ferma nemmeno davanti alla mancanza di un browser.

Sebbene CSS e JavaScript non fossero ancora stati inventati, creare siti era più semplice. Si può dire che Tim Berners-Lee è il primo sviluppatore "old school" che si occupava di Frontend prima dei vostri JavaScript e CSS.

Nel 1995 l'Internet Engineering Task Force (IETF) ha approvato HTML 2.0 come il primo standard ufficiale HTML. Questa versione includeva i tag e attributi base che permettevano di creare pagine web di base. HTML 2.0 ha posto le fondamenta per lo sviluppo futuro del web.

HTML 3.2 e HTML 4.0: estensione delle capacità

Il 1997 è stato un anno importante nella storia di HTML. In quell'anno è stato rilasciato HTML 3.2, sviluppato dal consorzio W3C. Questa versione includeva il supporto per tabelle, applet Java e formule matematiche, ampliando notevolmente le possibilità degli sviluppatori web.

Più tardi nello stesso anno è apparso HTML 4.0, che ha portato miglioramenti significativi. L'inclusione del supporto per fogli di stile CSS, una semantica migliorata e nuovi elementi hanno reso HTML 4.0 uno strumento potente per creare pagine web più complesse e strutturate. L'introduzione dei fogli di stile CSS ha permesso agli sviluppatori di separare il contenuto dal suo aspetto, facilitando la gestione degli stili e semplificando l'implementazione del design.

CSS: rivoluzione nella stilizzazione delle pagine web

Il primo standard CSS (Cascading Style Sheets) è stato rilasciato dal W3C nel 1996. CSS ha permesso agli sviluppatori di stilizzare documenti HTML, separando gli elementi visivi dalla struttura della pagina. CSS1 ha offerto possibilità di stilizzazione di base per testo e immagini di sfondo.

Nel 1998 è stato introdotto CSS2, che ha aggiunto nuove funzionalità come il supporto per le media query, posizionamento assoluto e relativo, oltre a stili più complessi per la stampa.

CSS3, che ha iniziato a comparire nel 2011, ha introdotto un'architettura modulare. Questo ha permesso di implementare nuove funzioni gradualmente, comprese animazioni, gradienti, trasformazioni e layout migliorati.

HTML5: una nuova era dello sviluppo web

HTML5, sviluppato congiuntamente da WHATWG e W3C, è stato una significativa aggiornamento presentato ufficialmente nel 2014. HTML5 ha aggiunto il supporto per multimedia (video e audio), nuovi elementi per migliorare la semantica (come <article>,<section>,<header>,<footer>), formati migliorati per i moduli web e nuove API per lavorare con la grafica e il multithreading.

HTML5 ha notevolmente ampliato le possibilità per gli sviluppatori web, consentendo la creazione di applicazioni web più interattive e dinamiche. Il supporto per elementi multimediali e le nuove API ha reso le applicazioni web più potenti e funzionali.

4.2 Da jQuery ad Angular e React

Più veloce era Internet, più pesanti diventavano le pagine web. Più CSS e JavaScript contenevano. Per semplificare un po' il loro utilizzo, sono state adottate varie librerie. Una delle più popolari è stata jQuery.

jQuery: Comodità nel lavorare con JavaScript

jQuery è stato creato da John Resig e rilasciato nel gennaio 2006 alla conferenza BarCamp a New York. L'obiettivo di jQuery era semplificare l'interazione con i documenti HTML, il trattamento degli eventi, le animazioni e le interazioni Ajax per uno sviluppo web rapido.

jQuery è rapidamente diventato popolare grazie ai metodi semplici e intuitivi, che nascondevano le complessità del lavoro con JavaScript e i problemi cross-browser. Le sue funzioni principali includono:

• Selettori per trovare e manipolare facilmente gli elementi DOM
• Semplice gestione degli eventi
• Animazioni ed effetti
• Integrazione con Ajax per creare pagine web interattive

jQuery ha cambiato l'approccio allo sviluppo web, rendendolo più accessibile e conveniente per gli sviluppatori.

Angular: Introduzione alle applicazioni web dinamiche

Un'altra risposta all'aumento della complessità delle pagine web è stata l'introduzione del framework Angular. AngularJS è stato presentato per la prima volta da Google nell'ottobre 2010. Il progetto è stato creato da Miško Hevery e Adam Abrons per semplificare lo sviluppo di applicazioni a pagina singola (SPA) dinamiche.

AngularJS ha fornito potenti strumenti per lo sviluppo del lato client, includendo:

• Binding dichiarativo dei dati attraverso direttive
• Servizi integrati per lavorare con richieste HTTP
• Binding bidirezionale dei dati, che consente di aggiornare automaticamente la vista quando i dati del modello cambiano
• Modularità e testabilità del codice

Nel 2016 Google ha presentato una versione completamente riprogettata di Angular (Angular 2 e successivi), che è diventata una piattaforma per lo sviluppo di applicazioni web scalabili e ad alte prestazioni con l'uso di TypeScript.

React: Rivoluzione nel rendering UI

React è stato creato da Jordan Walke di Facebook e rilasciato per la prima volta nel marzo 2013. React è stata la risposta alla necessità di Facebook di migliorare le prestazioni e supportare interfacce utente complesse.

React ha introdotto un nuovo approccio allo sviluppo delle interfacce utente, basato su componenti e sul DOM virtuale:

• Architettura basata su componenti, che consente di creare componenti riutilizzabili e isolati
• DOM virtuale, che ottimizza l'aggiornamento dell'interfaccia, rendendolo più veloce ed efficiente
• Binding unidirezionale dei dati, che semplifica il debug e la gestione dello stato dell'applicazione

React ha rapidamente guadagnato popolarità e è diventato la base per lo sviluppo di molte applicazioni web moderne grazie alla sua performance e flessibilità. È anche diventato la base per altre librerie e framework, come React Native per le applicazioni mobili.

Queste tre tecnologie — jQuery, Angular e React — hanno giocato un ruolo chiave nell'evoluzione dello sviluppo web, ciascuna di esse ha introdotto approcci e strumenti unici, che hanno semplificato notevolmente la creazione di applicazioni web moderne.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 sono diventati tecnologie così potenti che il Web ha superato i confini del browser e si è trasformato in una tecnologia Fullstack Frontend a tutti gli effetti. E il primo a sentirlo è stato il backend.

Node.js: conquista del backend

Node.js è stato creato da Ryan Dahl e rilasciato per la prima volta nel maggio 2009. L'obiettivo principale di Node.js è fornire un ambiente di esecuzione per JavaScript fuori dal browser, che consente di utilizzare JavaScript per lo sviluppo server-side. Node.js è costruito sul motore V8 di Google, che garantisce elevate prestazioni e velocità di esecuzione.

Node.js utilizza I/O non bloccanti (input/output), che consentono di gestire molte connessioni contemporaneamente, senza bloccare il filo principale di esecuzione. Ha inoltre un vasto ecosistema di moduli disponibili attraverso npm (Node Package Manager), che facilita lo sviluppo e l'integrazione di varie librerie e strumenti. E grazie al motore V8, Node.js garantisce una rapida ed efficiente gestione delle richieste.

Electron: conquista dei desktop

Scrivere un'interfaccia utente cool per il desktop è un compito arduo, e qui accanto c'è HTML5+CSS3. Però lo si potrebbe usare... Così i programmatori hanno trovato un trucco: l'applicazione apre una finestra principale, in questa finestra si incorpora un browser (componente WebView), e in questo browser si carica il codice in HTML5, CSS3 + JavaScript.

La libreria Electron, inizialmente conosciuta come Atom Shell, è stata creata da GitHub per l'editor di codice Atom. La prima versione di Electron è stata rilasciata nel luglio 2013. Lo scopo di Electron è permettere agli sviluppatori di creare applicazioni desktop utilizzando tecnologie web come HTML, CSS e JavaScript.

Electron consente di creare applicazioni che funzionano su Windows, macOS e Linux con la stessa base di codice. Electron combina le capacità delle tecnologie web con la potenza di Node.js, consentendo l'accesso al file system e ad altre risorse di sistema. Gli sviluppatori possono utilizzare framework e librerie web esistenti per creare interfacce e funzionalità.

React Native: applicazioni mobili

React Native è stato sviluppato da Facebook e presentato per la prima volta nel marzo 2015. L'obiettivo di React Native è fornire la possibilità di creare applicazioni mobili native per iOS e Android usando JavaScript e React.

React Native utilizza componenti nativi, garantendo prestazioni comparabili alle applicazioni native. Allo stesso tempo, gli sviluppatori possono scrivere codice che funziona sia su iOS che su Android, semplificando notevolmente lo sviluppo e riducendo il tempo di supporto.

Proprio come con Electron: l'intera finestra dell'applicazione mobile apre un WebView, in cui viene caricato un "sito" scritto in HTML5, CSS3 e JS. Tutti si aspettavano che le applicazioni mobili avrebbero sostituito i siti web sui telefoni, ma è accaduto esattamente il contrario: i siti hanno iniziato a sostituire le app native.

Oggi il Frontend Fullstack Software Engineer è la professione IT più richiesta al mondo. Quindi decidere di diventare uno sviluppatore Frontend è una scelta giusta e lungimirante!