In JavaScript la scelta tra finestre di dialogo native e personalizzate presenta alcune problematiche.
Negli anni Novanta l'abuso delle finestre di dialogo native (prima tra tutte quella ottenibile tramite il metodo globale alert()) portò molti siti web a fornire ai propri utenti un'esperienza di navigazione frustrante.
Infatti la particolarità di un codice come:
'use strict';
(function() {
document.addEventListener('DOMContentLoaded', function() {
let btn = document.querySelector( '#btn' );
btn.addEventListener('click', function() {
alert('Message');
}, false);
});
})();
è che non offre altra alternativa se non chiudere la finestra di dialogo nativa che, ricordiamolo, blocca ogni altra azione sulla pagina fino a quando non viene chiusa. I browser nel tempo hanno cominciato a considerare la pratica delle finestre popup di questo tipo come altamente invasiva e a bloccarle a monte intercettando non solo le chiamate ai metodi che le generano , ma anche gli eventi globali in cui spesso vengono create in modo automatico (ad esempio il caricamento della pagina).
Si continuano ad usare ancora oggi perché il loro punto di forza è che sono incredibilmente facili da usare e perché la gestione del loro aspetto, delle dimensioni e più in generale della GUI è interamente delegata al browser.
Supponiamo ad esempio di dover fornire all'utente la scelta tra due sole opzioni:
'use strict';
(function() {
document.addEventListener('DOMContentLoaded', function() {
let btn = document.querySelector( '#btn' );
btn.addEventListener('click', function() {
let choice = confirm('Are you sure?');
if(choice) {
// È stato selezionato OK
} else {
// È stato selezionato Annulla/Cancel
}
}, false);
});
})();
In pratica lo sviluppatore deve solo gestire una condizione booleana. Come si può notare, nonostante l'enorme prezzo pagato in termini di flessibilità, usabilità, UX e aderenza agli standard odierni (si pensi all'elemento HTML5 dialog), questa soluzione è di una semplicità e concisione disarmanti.
Se invece si vuole scrivere codice moderno fornendo una soluzione usabile, accessibile e visualmente appagante, si deve essere realistici: a meno che non si disponga di un modulo già pronto a livello di componenti JavaScript, HTML5 e CSS che sia anche stato testato a lungo su dispositivi mobile, realizzare da zero questo tipo di elementi della GUI in ogni nuovo progetto è un compito che richiede uno sforzo veramente notevole.
Ad esempio su dispositivi mobile le dimensioni vanno calcolate non solo al caricamento del documento, ma anche ogni qualvolta l'utente cambi orientamento al dispositivo. A livello CSS c'è il problema dello stacking, ossia la nostra finestra di dialogo dovrà essere posizionata con uno z-index che gli permetta di essere sempre in primo piano anche se sulla pagina ci sono già altri elementi posizionati e a volte il suo posizionamento dovrà essere perfettamente centrato verticalmente e orizzontalmente o essere relativo ad un elemento specifico. E dato che stiamo usando una struttura HTML, dovremo usare anche lo standard WAI-ARIA per renderla accessibile.
Si consiglia pertanto l'utilizzo di moduli preesistenti o di framework come Bootstrap per poter ottenere la stessa concisione delle finestre di dialogo native.