Il DOM non lascia, raddoppia

Un’ombra sul web

di

thumbnail

05

set

2016

Con Chrome 53 e Safari 10, entrambi novità di questi e dei prossimi giorni, si apre un’era nuova per chi sviluppa web.

Una pagina web, come quella che state leggendo, viene realizzata mettendo assieme codice HTML (il contenuto) e CSS (gli stili). Chi ne è capace può scrivere direttamente questo e quello, mentre chi non sa o non vuole farlo può rivolgersi a uno degli ennemila strumenti disponibili che permettono di farlo in modo guidato o semiautomatico, come scrivere in Microsoft Word ed esportare in HTML, oppure usare gli strumenti incorporati di WordPress. In entrambi i casi che ho scelto come esempio la qualità dello HTML prodotto sarà mediocre, ma comunque efficace.

CSS per gli stili, dicevamo. È evidente che Apogeo non avrebbe piacere se io pretendessi di far apparire questo mio articolo con un font Comics Sans, corpo 24, color verde pisello. Quindi il CSS usato su tutto il sito Apogeonline è stato redatto da un grafico e viene adottato automaticamente da tutte le pagine HTML, compresa questa mia.

Chi ha scritto quel riquadro?

Le cose si complicano però quando entra in gioco JavaScript, il linguaggio di programmazione del web. Fate clic, o tap col dito se siete su piattaforma mobile, sul motore di ricerca di Apogeonline in alto a destra, dove c’è la scritta trova sul sito. Visto? Entra in gioco un programmino di tre righe che nasconde la scritta e allarga il riquadro dove potete scrivere la frase da cercare. Secondo voi, un programma del genere – che modifica l’aspetto degli elementi della pagina – deve rispettare gli stili impostati dal designer originale del sito o deve partire da zero?

La questione è più complicata di quel che sembra. L’autore del programmino su cui ho attirato la vostra attenzione potrebbe essere un programmatore remunerato da Feltrinelli per scrivere proprio quelle righe di codice (e quindi starà lavorando con la presupposizione che il suo codice giri nel contesto grafico di Apogeonline) o potrebbe essere un estraneo che sta sviluppando un widget, un componente inseribile in molte diverse pagine web, come per esempio le cartine basate su Google Maps che decorano la pagina dove siamo di milioni di siti. Nel primo caso ha senso che il CSS su misura di questo sito sia automaticamente applicato a qualsiasi operazione venga compiuta dallo script; nel secondo caso, no.

Il modello ombra

Sappiatelo: tutti i browser, tutte le pagine, tutti gli script che v’è capitato di vedere negli ultimi vent’anni si comportano nel primo modo. O, più tecnicamente: ogni programma JavaScript “vede” la pagina su cui sta lavorando in un formato standard chiamato DOM, Document Object Model, che è standard (per impedire che il povero programma si trovi davanti condizioni radicalmente differenti quando gira dentro Google Chrome e quando vive dentro Microsoft Edge), Quando il programma altera la pagina, per esempio inserendo un nuovo elemento in risposta a un clic, inserisce il nuovo elemento nel DOM e questo elemento nasce automaticamente in un formato decorato con gli stili CSS dei suoi fratelli maggiori.

Ora le cose cambiano, perché Google, Microsoft, Apple e Mozilla/Firefox hanno deciso che nei browser di nuova generazione esisterà un secondo DOM, chiamato Shadow DOM, accessibile a JavaScript e indipendente dagli stili preesistenti della pagina. Ci si lavora da anni, ma la prima versione davvero completa, shadowDOMv1, vede la luce in questi giorni. Google Chrome, come spesso succede, c’è arrivato per primo con la versione 53 del 31 agosto scorso mentre Safari 10 (incorporato in iOS 10 e macOS Sierra, entrambi attesi a fine settembre 2016) aggiungerà prestissimo i suoi centinaia di milioni di utilizzatori al novero. Questa nuova tecnologia diventa quindi accessibile a chiunque sfogli il web da un dispositivo mobile debitamente aggiornato.

[Cueball siede a un tavolo. Appare un messaggio sullo schermo del laptop.] Urgente: Aggiornamento cruciale! [Il messaggio prosegue.] Dettagli: Sistema un problema che può causare l'incendio del laptop. (Questo aggiornamento richiede il riavvio del computer.) [Cueball clicca su Ricordamelo più tardi.] click

Ora bisogna solo convincere la gente ad aggiornare. Specie chi usa Android.

A chi non mastica di HTML potrebbe sembrare una novità da poco, ma la comunità degli sviluppatori web è in agitazione, perché la novità apre possibilità prima impensabili. Senza voler scendere nei dettagli più tecnici, diciamo che l’autore di una pagina web potrà usare una nuova parola chiave di quel linguaggio, <slot>, per indicare il punto in cui il JavaScript ospite può creare ed inserire nuovi componenti. Il programmatore può creare funzionalità complesse senza più preoccuparsi di pestare i piedi al contenuto circostante della pagina (è persino possibile dichiarare identificatori unici – gli id dello HTML – senza temere collisioni con quanto esiste tutto attorno al componente). E i grafici possono sbizzarrirsi, perché è possibile creare un CSS a parte per il componente, ordinare al componente di ereditare lo stile della pagina, o fare a metà.

È l’alba di un web nuovo e modulare, in cui più team di persone possono collaborare allo sviluppo di una webapp composta di più elementi senza doversi coordinare rigidamente come una squadra di nuoto sincronizzato. Tutti quelli a cui è capitato di leggere pagine in cui gli elementi si sovrappongono e risultano inutilizzabili o illeggibili sentitamente ringraziano.




Luca Accomazzi (@misterakko) ha messo le mani su un calcolatore (Apple) nel 1980 e da allora non le ha quasi mai staccate anche se, avendo una moglie e una figlia, viene da sospettare che qualche pur breve pausa l’abbia trovata. Su Internet dal 1992, si dedica a tempo pieno a scrivere siti – circa trecento da fine 1997 – fermandosi solo per scrivere libri per Apogeo (spesso in sodalizio con Lucio Bragagnolo). L’azienda che ha fondato, Accomazzi.net, è specializzata in commercio elettronico e newsletter.

In Rete: www.accomazzi.net

Letto 2.635 volte | Tag: , ,

Lascia il tuo commento