L’estensibilità è un principio di ingegneria del software che favorisce la crescita futura del sistema.
Può essere considerata come la misura della capacità di estendere un sistema e il livello di sforzo richiesto per implementare l’estensione.
Le estensioni possono essere l’aggiunta di nuove funzionalità o la modifica delle funzionalità esistenti. Il principio prevede miglioramenti senza compromettere le funzioni di sistema esistenti.
In una delle presentazioni dell’open conference tenutasi durante il Camp aziendale di Giugno, Francesco Sacchi ci ha illustrato alcuni strumenti validi in tal senso.
Architettura a plug-in
L’idea è di utilizzare una sorta di architettura a plug-in, estendibile da altri sviluppatori senza comprometterne le funzionalità esistenti e la logica dei dati.
Questo permette al team di sviluppo di un prodotto di delegare parte dello sviluppo a terze parti o addirittura all’utilizzatore, e di concentrarsi sullo sviluppo di funzionalità core. Inoltre il meccanismo a plugin può essere utilizzato dagli sviluppatori stessi per ottenere una migliore organizzazione del codice.
Cerchiamo di rendere più chiaro quest’ultimo concetto.
Pensiamo alla nostra applicazione per la quale si prevedono dei punti di estensibilità. Definiremmo delle interfacce ad hoc per permettere agli utilizzatori di avere la possibilità di estenderla secondo le loro esigenze. Questo comporta che noi, sviluppatori di questa applicazione, non dobbiamo progettarla prevedendo tutti i possibili scenari di utilizzo (anche quelli più singolari) bensì concentrandosi sulle funzionalità utili a tutti. Avere un progetto estendibile porterebbe vantaggi in termini commerciali perché alla classica domanda “Questo prodotto può fare questa cosa?” la risposta passerebbe da “No” a “No, ma potresti svilupparla per rispondere ad una tua esigenza”.
JSON Schema
Una delle funzionalità più frequenti nello sviluppo di una applicazione è quella che permette l’inserimento di dati attraverso un form. Ogni applicazione ha i suoi dati specifici e ogni form è a sé stante, ma il meccanismo di base è sempre lo stesso e può essere generalizzato.
JSON schema è una specifica per la definizione della struttura dei dati JSON, che porta i seguenti vantaggi:
- Descrive il formato dati esistente.
- Fornisce una documentazione chiara, leggibile dall’uomo e dalla macchina.
- E’ corredato di una validazione strutturale completa , utile per i test automatici.
- Offre una convalida strutturale, convalida dei dati inviati dal cliente.
Tra le diverse librerie esistenti, Francesco porta come esempio react-jsonschema-form, un componente React in grado di creare moduli HTML da uno schema JSON di input sfruttando la semantica Bootstrap come default.
Web components
Negli ultimi anni abbiamo assistito ad un interessante crescendo di strumenti, sotto forma di librerie e framework, per lo sviluppo di interfacce Web: da Angular a React, da Vue a Ember.
L’effetto involontario generato dalle librerie e dai framework JavaScript per semplificare la creazione di interfacce Web è stato, sotto certi aspetti, proprio quello di complicarla.
Gli elementi delle nostre interfacce sono spesso legati indissolubilmente alla libreria o al framework che ci ha semplificato la vita per realizzarle.
Cosa possiamo fare allora per evitare questa complessità?
C’è un modo per realizzare componenti Web tali che possano essere utilizzati in qualsiasi applicazione indipendentemente dalla libreria o framework utilizzato?
I Web Component sono un insieme di specifiche standard per la creazione di elementi HTML personalizzati e riutilizzabili in pagine ed applicazioni Web.
Allo stato attuale i Web Component non si basano più su specifiche a se stanti, ma fanno riferimento agli standard di HTML e DOM.
Oltre alla possibilità di creare elementi HTML personalizzati, i Web Component supportano un meccanismo di incapsulamento che consente il loro riutilizzo all’interno di una qualsiasi applicazione Web o framework senza rischio di interferenze con il codice esistente.
Sono basati essenzialmente su 3 funzionalità:
- Custom element: rappresentano un insieme di API JavaScript per la creazione di elementi del DOM personalizzati associati ad uno specifico tag HTML
- Shadow DOM: un insieme di API JavaScript che consentono di gestire un DOM specifico per un componente, indipendente dal DOM della pagina Web, realizzando il meccanismo di incapsulamento a cui accennavamo prima
- HTML template: si tratta di un’integrazione alle specifiche dell’HTML che consente di definire porzioni di markup che non viene interpretato al caricamento della pagina Web, ma che viene istanziato a runtime
Nel progetto al quale sta lavorando, Francesco utilizza e suggerisce LitElement, una semplice classe base per la creazione di componenti web veloci e leggeri che funzionano in qualsiasi pagina web con qualsiasi framework.
LitElement utilizza lit-html, una libreria Javascript per creazione di template HTML, per eseguire il rendering nello shadow DOM e aggiunge API per gestire proprietà e attributi. Le proprietà vengono osservate e gli elementi vengono aggiornati in modo asincrono quando cambiano le proprietà.
Demo di una applicazione estendibile
Qualora siate incuriositi e voleste vedere un esempio pratico, Francesco ha realizzato una demo di un’applicazione che genera una form in base a due input:
- un JSON schema che descrive i campi della form
- un web component (tag e url) responsabile del render
I campi sono precompilati con lo schema e l’url di un web component da lui sviluppato che genera un qr code partendo da un url.