I vantaggi di Umbraco CMS Enterprise

Umbraco è una piattaforma CMS molto evoluta, che permette di gestire portali e siti web in ambito enterprise.

Rispetto ad altri competitor del settore, offre maggiori stabilità e performance, oltre a presentare delle avanzate capacità di personalizzazione ed adattamento alle esigenze specifiche del progetto da realizzare.

A differenza delle più note piattaforme CMS che sfruttano PHP (basti pensare a Drupal o WordPress), Umbraco è basato su .Net di Microsoft; è quindi possibile utilizzare un framework ben testato e conosciuto tra gli sviluppatori, ricco di funzionalità, corredato da tool ed IDE avanzati (vedi Visual Studio), che facilitano e rendono più veloce la stesura del codice, diminuendo drasticamente il time-to-market.

La possibilità di sviluppare rapidamente plugin o moduli per aumentare le funzioni del CMS e la presenza di un marketplace ufficiale nel quale condividerli (direttamente accessibile nell’interfaccia web di gestione) sono sicuramente alcuni tra i principali fattori di successo della piattaforma.

Inoltre Umbraco è un progetto open source, supportato da una comunità molto attiva e disponibile nei forum, ricco di tutorial e documentazione, che permette di effettuare sia installazioni “tradizionali” su server privati ma che è anche disponibile come SaaS attraverso Umbraco Cloud.

Tutte queste caratteristiche rendono Umbraco un prodotto di punta nel panorama Web CMS mondiale.

Best practices di sviluppo ed Umbraco

Gestione del ciclo di sviluppo

In molte piattaforme CMS è difficile riuscire a lavorare seguendo un approccio rigoroso nel ciclo di sviluppo (si pensi alla classica pipeline di rilascio sviluppo → test → produzione), dal momento che tutte le operazioni fatte dal backend del CMS (l’interfaccia web) vengono salvate direttamente sul database, senza possibilità di essere “versionate” ed applicate durante la promozione ad un altro ambiente

Da questo punto di vista, Umbraco è ottimo.

La piattaforma mette a disposizione il tool a pagamento Umbraco Courier per migrare i contenuti necessari da un ambiente all’altro, installando anche le eventuali dipendenze, direttamente da interfaccia web con un semplice click.

Qualora si stesse cercando una soluzione gratuita, nel marketplace della comunità è possibile trovare degli opportuni plugin (come Conveyor, uMirror o uSync) per tenere traccia su file system delle modifiche effettuate da backend, permettendo il loro versionamento sul repository assieme al codice sorgente.

Questo permette di lavorare con database isolati nei singoli ambienti e poi (in fase di merge delle modifiche o integrazioni) allineare la struttura dati con pochi click, direttamente da interfaccia web.

Alcuni tra questi plugin, ad es. uSync, sono così evoluti che oltre all’import manuale, supportano l’installazione automatica in fase di avvio dell’applicazione, semplificando ulteriormente il processo lavorativo.

Esempio di interfaccia di import/export per cambiamenti da backend (uSync).

Si pensi ad esempio alla realizzazione di una sezione news. Lo sviluppatore in ambiente locale lavora con Umbraco, definendo document type e viste. Al momento del commit, il pacchetto di modifiche sarà auto-consistente ed andrà ad installarsi sui vari ambienti (test, produzione) senza bisogno di interventi manuali.

In pratica, ciò che si deve andare ad inserire ambiente per ambiente è solo il contenuto vero e proprio e non le parti di presentazione/modello.

Localizzazione dei contenuti

Un CMS ha tra le sue funzionalità più interessanti ed utilizzate, la possibilità di gestire siti multilingua ed Umbraco non fa eccezione.

L’approccio che la piattaforma propone è molto semplice: creare la struttura del sito per una lingua, replicarla tante volte quante sono le lingue da supportare (o adattare la struttura lingua per lingua qualora sia necessario), definire una rotta base diversa per ogni lingua (ad es. utilizzando il relativo codice a due lettere: ‘it’, ‘en’ e così via) ed infine utilizzare gli oggetti Dictionary per fornire le traduzioni di tutti gli elementi testuali che lo richiedono.

Una volta che l’architettura è stata creata, Umbraco rende estremamente intuitivo fornire/modificare i valori delle traduzioni, infatti è disponibile una sezione apposita nel backend facilmente utilizzabile anche dai non “addetti al settore” (vedi immagine sotto).

Esempio di localizzazione dei contenuti con i Dictionary di Umbraco.

Se si ritiene eccessiva e/o non necessaria la duplicazione dell’albero dei contenuti per progetti di piccole dimensioni o in cui la struttura del sito si mantiene costante tra le diverse lingue, il marketplace offre estensioni molto interessanti, tra le quali spicca sicuramente Vorto, che permette di effettuare traduzioni/offrire contenuti localizzati 1:1 direttamente dal property editor del backend di Umbraco: in pratica, nel momento in cui vengono definite le proprietà di un documento, si possono contestualmente scegliere anche i diversi valori da attribuire in base alle lingue scelte.

Ovviamente è anche possibile utilizzare un approccio ibrido alla localizzazione, preferendo la semplicità di Vorto nella maggior parte delle pagine ma utilizzando la flessibilità del metodo standard dove necessario: fortunatamente Umbraco è così flessibile da permetterlo!

Esempio di traduzione 1:1 per alcune proprietà del modello attraverso Vorto.

Frontend evoluto con AngularJS

AngularJs è un framework client-side molto popolare e potente per la creazione di SPA ed interfacce web evolute, sviluppato da un team interno a Google.

Umbraco si avvale di AngularJs per la parte UI del backend, ma purtroppo non permette di utilizzarlo direttamente nella parte frontend del sito, preferendo un approccio più classico client-server, o comunque demandando allo sviluppatore l’onere di integrarlo.

Per realizzare siti complessi è importante riuscire a sfruttare questa tecnologia anche sulla parte applicativa destinata agli utenti finali.

Dal momento che non esisteva un modulo per questo scopo, abbiamo progettato ed implementato un plugin, disponibile su Umbraco o GitHub, che permette di:

• gestire le pagine utilizzando il consueto backend CMS, permettendo all’editor (inteso come utente editore) di essere autonomo nell’inserimento di contenuti;
• definire, a livello di sviluppo, widget o viste parziali autocontenute che svolgono una determinata funzione (es. lista news). Tali elementi sono basati ovviamente su AngularJs;
• inserire nelle pagine questi widget, facendo in modo che l’engine di AngularJs venga caricato automaticamente all’avvio della pagina, riconoscendo i componenti necessari e permettendo loro di lavorare in maniera sinergica.

Integrare il plugin è semplicissimo: basta accedere al backend di un’installazione Umbraco, navigare nella sezione Developer → Packages, ricercare “Umbraco Angularjs frontend” e premere il pulsante di installazione.

Ricerca del plugin…

…ed installazione.

Il pacchetto in fase di installazione modifica la configurazione di Umbraco per permettere l’integrazione con AngularJs.

In particolare:
Crea il document type “Sintra – AngularJs Master”, dal quale dovranno ereditare tutti i document type che utilizzeranno AngularJs; è buona norma tenere questo come il document type root di tutti gli altri, anche considerando il fatto che esiste una proprietà per abilitare/disabilitare selettivamente l’inclusione di AngularJs qualora non servisse in determinate pagine.

Crea il template “AngularJsMaster”, che inietta nella pagina il file Javascript di AngularJs (incluso nel pacchetto del plugin) ed inizializza tutte le view AngularJs utilizzate nella pagina stessa, comprensive di componenti/direttive/servizi (per maggiori informazioni su questi termini vedere il paragrafo successivo e la documentazione di AngularJs).

Per quanto riguarda l’ereditarietà dei template, valgono le stesse considerazioni fatte per il document type nel punto 1.

Crea la macro “Sintra – NgViewMacro”, che permette all’utente finale di inserire attraverso l’editor standard di Umbraco una view AngularJs come contenuto di una pagina. La macro si occupa anche di registrare tutti i componenti/direttive/servizi utilizzate all’interno della view, così che tutto possa essere inizializzato con le API di AngularJs dal template del punto 2.

Dopo aver installato il plugin, sarà cura dello sviluppatore inserire il proprio codice relativo ad AngularJs nella cartella “~/Ng”, suddividendo i diversi file per tipologia nelle relative sottocartelle:

• “Views”: contiene le view principali, considerabili come entry point di una parte del frontend basata su AngularJs. Saranno proprio questi gli elementi a poter essere inseriti in pagina attraverso la macro “Sintra – NgViewMacro”.
• “Services”: contiene i servizi AngularJs, dove è mantenuta la business logic del frontend, riutilizzabili all’interno di molteplici view/componenti/direttive.
• “Components”: contiene componenti AngualrJs, con la relativa parte di logica e di markup, riutilizzabili all’interno delle view o di altri componenti.
• “Directives”: contiene direttive AngualrJs riutilizzabili all’interno delle view o di componenti.
• “Filters”: contiene filtri AngualrJs riutilizzabili all’interno delle view o di componenti.

Una volta che il codice AngularJs è pronto, l’utente potrà inserire autonomamente la macro “Sintra – NgViewMacro” opportunamente configurata dove ritiene più conveniente, fermo restando che il document type target erediti da “Sintra – AngularJs Master”.

A titolo di esempio, immaginando di avere una view “MyView” che al suo interno utilizza il servizio “MyService” ed il componente “MyComponent”, si potrà inserire una macro con i seguenti settaggi:

Esempio di inserimento di un contenuto AngularJs in una pagina Umbraco (1/2).

Esempio di inserimento di un contenuto AngularJs in una pagina Umbraco (2/2).

La macro registrerà la view ed i relativi sotto-elementi specificati nel contesto della pagina, in fondo alla quale verrà generato del codice Javascript per l’inizializzazione di AngularJs e la registrazione dei suddetti elementi, sfruttando il template “AngularJs”.

Per maggiori dettagli sul plugin, le convenzioni utilizzate, le possibilità di configurazione ed esempi pratici dettagliati, potete fare riferimento al repo GitHub e relativo README.

Happy Umbracoing!

Riferimenti

Progetto su GitHub:
https://github.com/Sintraconsulting/umbraco-angularjs-frontend-plugin
Pagina del plugin nel marketplace:
https://our.umbraco.com/packages/developer-tools/umbraco-angularjs-frontend-plugin/