Che cos’è l’architettura basata su componenti e perché è importante?
I componenti Web consentono di creare elementi HTML personalizzati. Troverai componenti Web utilizzati più di frequente nei moderni framework JavaScript front-end. Ma "Web Components" è in realtà uno standard web W3C e non necessita di un framework per essere utile.
Cosa sono i componenti Web?
I componenti Web funzionano come Lego per HTML. Sono una raccolta di tecnologie che aiutano a rendere l'HTML più utile e riutilizzabile. Per ulteriori informazioni, controlla la specifica W3 Web Components e la pagina di Mozilla Developer Network su Web Components .
Queste tecnologie sono:
- Elementi personalizzati
- Modelli HTML
- Lo Shadow DOM
- Moduli ES
Diamo un'occhiata a questi a turno.
Elementi personalizzati
Gli elementi personalizzati sono elementi HTML speciali che JavaScript rende più funzionali. Sono utilizzati al meglio per visualizzare dati sempre aggiornati senza callback. Puoi anche nominarli come preferisci.
Modelli HTML
I modelli sono blocchi riutilizzabili di HTML. Sono ottimi per gli elementi che vanno in più posizioni o su più pagine come intestazioni, piè di pagina e menu.
Lo Shadow DOM
Il DOM è il collante che lega ciò che vedi nel browser al codice HTML. Lo Shadow DOM è una parte del DOM che ti consente di mantenere separati markup, stile e funzionalità.
Utilizzando lo shadow DOM, ogni elemento personalizzato può ottenere il proprio DOM. In questo modo si evita che le funzioni di stile e JavaScript modifichino gli elementi che non si desidera siano interessati.
Moduli ES
Queste sono le librerie JavaScript speciali che fanno funzionare i componenti web.
Uno dei principali vantaggi dei componenti Web è che puoi riutilizzare il tuo HTML personalizzato ovunque. Poiché i componenti Web sono semplici HTML e JavaScript, sono compatibili con le app JavaScript vanilla e con i framework. Puoi saperne di più su webcomponents.org .
Componenti Web con un framework
Il modo più semplice per iniziare a utilizzare i componenti Web è con un framework. Prima ancora che i componenti web esistessero, Angular.js forniva una funzionalità simile chiamata direttive. Hanno fatto molto dello stesso lavoro dei componenti, prima che i componenti diventassero uno standard.
Ora che i componenti sono uno standard, ci sono altri framework che si basano sul concetto di componente web. Rendono l'utilizzo di componenti Web più semplice e snello, oltre ad astrarre gran parte della complessità dell'utilizzo di JavaScript di basso livello.
Vue
Vue.js è un popolare framework front-end basato su componenti che è uno dei preferiti dagli sviluppatori. Vue è facile da imparare e facile da programmare. Il framework semplifica anche l'aggiunta di componenti semplici a siti Web HTML di base.
Reagire
React è un framework front-end ampiamente adottato a livello commerciale. Questo framework è anche uno dei preferiti dagli sviluppatori. React è meglio conosciuto per la semplificazione dello sviluppo web inserendo HTML, CSS e JavaScript in un unico script.
Per saperne di più, dai un'occhiata alla nostra carrellata di tutorial per imparare React a creare app web .
Componenti Web senza framework
Puoi scrivere componenti web in semplice JavaScript. Ma è difficile farlo, soprattutto per i principianti. Esistono però librerie leggere che puoi aggiungere al tuo codice esistente. Ti danno la facilità delle moderne pratiche JavaScript senza l'overhead elevato di un framework completo.
Polimero
Polymer è il contributo di Google al movimento dei componenti web. È una raccolta di librerie leggere che semplificano la creazione di elementi personalizzati rispetto al semplice JavaScript. Ha librerie per la creazione di elementi personalizzati e modelli.
Polymer ha una libreria per polyfill per garantire la compatibilità con i browser meno recenti. C'è anche una versione anticipata dei componenti di material design per aggiungere material design al semplice HTML.
Sottile
Un'altra opzione è Slim.js, una libreria all-in-one che semplifica l'aggiunta a un semplice sito Web. Semplifica il processo di creazione degli elementi personalizzati e fornisce l'accesso diretto al DOM ombra.
Stencil
Ultimo ma non meno importante è l'eccellente Stencil, che ti dà il meglio di entrambi i mondi. È simile a React e fornisce molte delle stesse funzionalità. Ma ti offre quella funzionalità a livello di framework senza bloccarti in un framework pesante.
Stencil inoltre precompila i componenti, il che li rende più leggeri. Al contrario, framework come React caricano l'intero framework nel browser e compilano i componenti al volo. Quando i componenti Stencil arrivano al browser, sono solo JavaScript e HTML vanigliati senza alcun bagaglio aggiuntivo.
Componenti Web e Web Design
Uno dei principali ostacoli all'uso dei componenti è la perdita di framework di progettazione, come Bootstrap . Tecnicamente, puoi utilizzare Bootstrap con un sito Web basato su componenti. E c'è una porta Bootstrap per React. Ma se vuoi usare qualcosa come Stencil o Vue, potresti non essere soddisfatto della mancanza di compatibilità tra i tuoi componenti e il framework.
Framework tradizionali per il web design
La buona notizia è che ci sono diversi framework di progettazione tra cui scegliere. Vaadin fornisce alcuni bellissimi componenti. Per un gusto aziendale, c'è OpenUI5 . E come già accennato, Polymer di Google offre anche componenti dell'interfaccia utente dei materiali .
La cattiva notizia è che non troverai la stessa esperienza che ottieni da Bootstrap in nessuno di questi framework. E mancano molti elementi che vedi nella maggior parte dei framework di progettazione, come la tipografia.
Qual è l'approccio del framework di progettazione basato sui componenti?
Una tecnologia diversa, come i componenti web, merita un approccio diverso. I tachioni sono l'approccio migliore. È più facile da usare per i designer, ma può fornire agli sviluppatori una base solida e pulita. Tachyons è mobile-first e fornisce un design coerente che è sottile ma genera bellissimi risultati.
Tachyons scompone le classi CSS per il minimo utilizzo possibile. Ad esempio, ecco come crei un pulsante usandolo:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>Nella maggior parte dei framework di progettazione, assegneresti al collegamento una classe di pulsanti e un'altra classe per arrotondare gli angoli. In Tachyons, scegli al volo imbottitura, bordo, colore, ecc. Tutte le abbreviazioni possono sembrare complicate all'inizio, ma seguono uno schema di denominazione coerente che è facile da imparare.
La classe più piccola possibile è un approccio che non funziona per i siti Web tradizionali perché intasa le classi HTML. Ma con l'architettura basata su componenti, probabilmente utilizzerai lo stesso pulsante più e più volte in tutta l'app. Ciò significa che devi creare quel pulsante solo una volta per l'intero sito web.
Pensare in componenti
Un altro ostacolo è far sì che il tuo cervello cambi marcia dai tradizionali layout del sito web alla struttura basata sui componenti. Esistono due tecniche per aiutarti a imparare a pensare per componenti.
L'approccio atomico
Pensa a una pagina web come a un organismo. Le parti come la sezione dell'eroe, la guida ai prezzi e le recensioni degli utenti sono come le cellule dell'organismo. Questi sono pezzi che puoi spostare in sicurezza nei loro componenti, che tu li riutilizzi o meno.
I pulsanti, le intestazioni e le virgolette sono come atomi. Gli atomi sono la parte più piccola possibile. Quando non ha senso scomporre ulteriormente un componente, è un atomo. Questi sono solitamente componenti che userete più e più volte durante il progetto e possibilmente tra i progetti.
L'approccio DRY
Oppure puoi semplicemente dimenticare tutte quelle sciocchezze di organismi, cellule e atomi e tenerlo ASCIUTTO . DRY sta per Don't Repeat Yourself.
Qualunque cosa, grande o piccola, può essere una componente. Quindi scrivi il tuo HTML come al solito. Quando trovi qualcosa che desideri riutilizzare, come una galleria o un piè di pagina, suddividilo nel suo componente.
Dovresti usare i componenti Web nel tuo prossimo progetto?
I punti principali da considerare sono il tuo team e gli standard web.
Tutti i principali browser hanno adottato componenti web. CanIUse valuta i componenti personalizzati con un tasso di adozione del 93% e i modelli con il 95% , quindi sono sicuri da usare. E ci sono polyfill per i pochi ritardatari che non supportano i componenti web. Ciò significa che la conformità non è un problema.
Se hai un team senza esperienza in framework o JavaScript, potrebbe avere difficoltà ad adottare questa nuova tecnologia. Ma probabilmente farebbero fatica ad adottare qualsiasi nuova tecnologia se fosse così. E se sei solo, fallo! È sempre una buona idea sviluppare le tue abilità.
Le parti più difficili dell'adozione di componenti web sono la carenza di framework di progettazione e imparare a pensare in termini di componenti. Ma li abbiamo trattati entrambi. I componenti Web esistono dal 2014, quindi non sono una nuova tecnologia. Ma sono una tecnologia migliore.
