SharePoint Framework (SPFx) è un modello di sviluppo moderno e flessibile introdotto da Microsoft per la creazione di soluzioni personalizzate in SharePoint Online e SharePoint on-premises. Permette agli sviluppatori di creare web part, estensioni e app che si integrano facilmente con l'interfaccia utente di SharePoint, offrendo un'esperienza utente coesa e performante. Grazie all’utilizzo di tecnologie standard come TypeScript, React e altri strumenti JavaScript, SPFx consente di sviluppare soluzioni responsive e altamente personalizzabili, garantendo anche una gestione centralizzata della sicurezza e del deployment. In questo articolo andremo a vedere più nel dettaglio cos’è SharePoint Framework, quali sono le sue funzionalità e i vantaggi della sua adozione per lo sviluppo delle proprie app e intranet aziendali.
Con ogni versione di SharePoint, Microsoft ha introdotto varie nuove funzionalità e ha fornito modi diversi per soddisfare i requisiti personalizzati degli utenti finali. Per la personalizzazione, Microsoft ha reso disponibile la piattaforma di sviluppo SharePoint. Negli ultimi anni, abbiamo visto Microsoft introdurre diversi modelli di sviluppo per SharePoint. Per lo sviluppo di add-in, componenti lato client e soluzioni personalizzate con ambiti diversi, che affrontano una vasta gamma di necessità per gli sviluppatori SharePoint.
Per personalizzare i nostri requisiti nell'interfaccia utente moderna di Office 365, Microsoft ha introdotto un nuovo modello di sviluppo chiamato SharePoint Framework (SPFx). La soluzione SharePoint Framework è adatta per le aziende di sviluppo SharePoint sia per SharePoint Server (SharePoint 2016 Feature Pack 2 e SharePoint 2019) che per SharePoint Online.
Il nuovo SharePoint Framework (SPFx), offre pieno supporto agli sviluppatori SharePoint per una facile integrazione con SharePoint, supporto per strumenti open source e servizi di sviluppo lato client per SharePoint. Con SharePoint Framework, è possibile utilizzare le moderne tecnologie e strumenti web nell'ambiente di sviluppo per creare esperienze e applicazioni produttive, portabili, pronte e reattive sin dall'inizio.
Ma come funziona e quali sono le sue caratteristiche principali? Vediamolo insieme più nel dettaglio nelle prossime sezioni.
SharePoint Framework (SPFx) è un modello per la creazione di personalizzazioni basate su Microsoft SharePoint. Il Framework si basa sul concetto di costruire soluzioni lato client che si integrano con l'esperienza utente moderna di SharePoint.
Negli ultimi anni abbiamo visto diversi modelli di sviluppo per SharePoint. Partendo dai WSP in MOSS 2007, passando per le Soluzioni Sandboxed in SharePoint 2010, fino agli SharePoint Add-in in SharePoint 2013. I modelli di personalizzazione di SharePoint si sono evoluti con un unico obiettivo: separare le personalizzazioni da SharePoint per garantire l'igiene e la stabilità della piattaforma.
Il modello SharePoint Add-in è stato il primo passo verso l'esecuzione delle personalizzazioni esternamente a SharePoint. Nonostante le diverse forme di add-in, il modello presentava alcune limitazioni, una delle quali è l'uso degli iframe per integrare gli add-in nelle pagine.
Poiché SharePoint SPFx e la tecnologia in generale si stanno evolvendo e gli utenti richiedono nuove funzionalità dalle loro piattaforme di collaborazione, è stata progettata una nuova UX di SharePoint per rispondere a tale richiesta. SPFx è ora l'unico modello per costruire personalizzazioni in SharePoint moderno.
Un aspetto importante da tenere a mente è che la UX moderna di SharePoint, insieme a tutti i suoi componenti, utilizza il design web responsive. Ciò significa che, indipendentemente dal fatto che si stia utilizzando un computer desktop o uno smartphone, se si naviga in un sito team moderno, si potrà facilmente fruire del suo contenuto.
Quando si costruiscono soluzioni SharePoint SPFx, seguendo le linee guida fornite da Microsoft, non solo la soluzione sviluppata avrà un aspetto ottimale su dispositivi mobili, ma sarà anche renderizzata nell'app mobile nativa di SharePoint. È importante ricordare però che SharePoint Framework è proprio questo: un framework e si dovrebbe comunque analizzare la qualità del codice che si scrive.
Per costruire soluzioni SharePoint SPFx, è possibile utilizzare qualsiasi framework JavaScript si voglia e la creazione di soluzioni SharePoint non è limitata a Windows e Visual Studio. Poiché SharePoint Framework sfrutta stack di sviluppo web ampiamente utilizzati, le soluzioni possono essere costruite su qualsiasi piattaforma, incluso OS X e Linux, utilizzando l'editor di codice che si preferisce.
Per la prima volta Microsoft non sta utilizzando un modello di sviluppo proprietario specifico per SharePoint, ma sfrutta invece strumenti e tecniche ampiamente utilizzati dagli sviluppatori su tutte le piattaforme e stack. Inoltre, il Product Group si impegna a utilizzare solo le API pubblicamente disponibili per costruire le proprie soluzioni sopra il framework, il che consentirà agli sviluppatori di costruire soluzioni con funzionalità comparabili a quelle disponibili "out of the box" e oltre.
Ma andiamo a elencare rapidamente qui sotto le caratteristiche principali di SPFx:
Una considerazione architetturale importante da tenere in considerazione quando si utilizza SharePoint Framework (SPFx) è che si basa su JavaScript e quindi le soluzioni SharePoint SPFx vengono eseguite nel browser nel contesto dell'utente corrente.
Non c'è elevazione e trimming della sicurezza, quindi bisogna fare particolare attenzione quando si eseguono soluzioni personalizzate. Questa è una delle ragioni per cui l'uso del modello SharePoint Add-in è ancora una valida opzione, in particolare per l'uso di soluzioni di terze parti.
SharePoint è una piattaforma ricca e ci sono molti scenari diversi per estenderne le capacità standard ed è improbabile che SharePoint Framework supporti tutti questi scenari e combinare le personalizzazioni di SharePoint Framework con SharePoint Add-in potrebbe risultare in soluzioni particolarmente potenti.
Abbiamo realizzato https://intranet.ai che conta 200+ installazioni. È la soluzione pronta all'uso e personalizzabile per digitalizzare i processi e la comunicazione di qualunque azienda. Ti aiuteremo a:
Contattaci se hai in mente un progetto SharePoint Online.
L’installazione di SharePoint Framework non è complicata e richiede il completamento di pochi semplici passaggi per poterlo cominciare a usare sin da subito. Vediamo quindi quali sono questi step e come metterli in pratica.
Node.js è la componente fondamentale per l’ambiente di SharePoint Framework, poiché funge da server locale che permette di compilare, costruire ed eseguire l’ambiente di SharePoint direttamente in locale. Questa configurazione accelera e semplifica notevolmente il processo di sviluppo.
In particolare, se la propria applicazione SharePoint non ha bisogno di accedere a risorse specifiche di SharePoint, è possibile svilupparla completamente in locale senza dover disporre di un tenant o di un accesso diretto a SharePoint.
Per installare Node.js, scarica il programma di installazione dal link qui sotto e procedi con l’installazione. Non è necessario modificare alcuna configurazione nelle diverse schermate, basta cliccare sul pulsante "Next" e il processo sarà completato.
Link per l’installazione di Node.js: https://nodejs.org/en/
Ricordiamoci di riavviare il computer al termine dell’installazione, altrimenti non sarà possibile riconoscere i comandi nei passaggi successivi.
Visual Studio Code è l'IDE fornito da Microsoft, noto per supportare una vasta gamma di linguaggi di programmazione. Rispetto a Visual Studio, Visual Studio Code è molto più leggero e veloce. Sebbene esistano altre opzioni simili, come Atom, Visual Studio Code è spesso preferito per la sua velocità e semplicità.
Per installare Visual Studio Code, clicca sul link qui sotto e avvia l'installazione. Puoi personalizzare la configurazione e selezionare tutte le caselle di controllo.
Link per l’installazione di Visual Studio Code: https://code.visualstudio.com/
Ci sono 3 pacchetti NPM da installare per completare la configurazione. I pacchetti NPM sono file JavaScript ospitati che vengono creati per uno scopo specifico. Allo stesso modo, i pacchetti elencati di seguito hanno ciascuno una propria funzione.
Per installare i pacchetti NPM sopra menzionati, basterà aprire il prompt dei comandi di Node.js (clicca su Start e cerca "node.js") ed eseguire i comandi seguenti:
npm i -g @microsoft/generator-sharepoint
npm i -g yo
npm i -g gulp
Dopo l’esecuzione dei comandi, la configurazione è completata e si potrà cominciare a creare il proprio progetto SharePoint Framework.
Una web part di SharePoint è un'unità modulare di informazioni che costituisce i blocchi fondamentali di una pagina SharePoint. In sostanza, è un componente indipendente che può essere inserito, configurato e riutilizzato all'interno delle pagine di SharePoint.
Le web part possono essere considerate come widget interattivi che si integrano perfettamente nell'architettura di SharePoint, permettendo agli utenti di personalizzare le loro pagine aggiungendo funzionalità che spaziano da semplici blocchi di testo a connessioni dati complesse.
Utilizzando SharePoint Framework (SPFx), è possibile sviluppare diversi tipi di web part per rispondere a varie esigenze aziendali e migliorare l’esperienza utente.
Vediamo insieme alcuni tipi di web part che possono essere creati con SPFx nell’elenco qui sotto:
Le estensioni SPFx offrono un modo sicuro per estendere e personalizzare le esperienze di SharePoint Online senza compromettere i miglioramenti che Microsoft fornisce all'interfaccia utente.
Nella versione classica di SharePoint, l'interfaccia utente veniva spesso modificata sovrascrivendo completamente l'esperienza di base. Tuttavia, questo bloccava l’implementazione di nuove funzionalità e creava sfide operative e di manutenzione per i clienti, con un impatto negativo sul valore fornito dalla piattaforma.
Con l’introduzione delle esperienze moderne di SharePoint, Microsoft ha introdotto anche le estensioni SPFx come opzione per estendere SharePoint Online in modo sicuro e futuro. Esistono diverse opzioni di estensione che consentono un’elevata personalizzazione delle esperienze SharePoint.
La differenza principale tra estensioni e web part in SharePoint è che le web part sono progettate per essere aggiunte alle pagine dai content editor tramite il selettore delle web part e possono essere configurate in base alle esigenze aziendali. Le estensioni SPFx, invece, vengono aggiunte all’interfaccia utente attraverso l’automazione nel pacchetto SPFx e, di default, non possono essere configurate dai content editor.
Ecco i diversi tipi di estensioni attualmente disponibili per costruire un’interfaccia utente estensibile per SharePoint Online.
Come per ogni strumento di sviluppo, ci sono alcune accortezze da tenere in considerazione quando si utilizza SharePoint Framework per lo sviluppo di web part ed estensioni che possono aiutare i developer a trarne il massimo del potenziale.
Una volta trovato il pacchetto che si desidera includere nel proprio progetto, lo si dovrà installare e salvare. La best practice è installarlo con il comando:
npm install -save
che salverà le dipendenze con il prefisso ^ per impostazione predefinita. Questo significa che durante il prossimo npm install verrà installato l’ultimo modulo senza modifiche di versione principale.
Se non si salvano le proprie dipendenze, la situazione può diventare problematica per i deployment in produzione: è possibile avere versioni diverse localmente rispetto alla produzione. Nel caso qualcuno rilasci una nuova versione, si potrebbe incorrere in problemi se questa versione ha un bug che influisce sul sistema di produzione.
Per risolvere questo problema, si può usare
npm shrinkwrap
che genererà un file npm-shrinkwrap.json contenente non solo le versioni esatte dei moduli installati, ma anche quelle delle loro dipendenze, e così via. Una volta creato questo file, npm install lo utilizzerà per riprodurre lo stesso albero delle dipendenze.
In passato, si caricavano file JS e CSS nella libreria Assets. Tuttavia, nelle best practice di SPFx, abilitare e configurare un CDN (Content Delivery Network) offre grandi vantaggi di performance. In tenant online, abilitare i CDN ha mostrato un miglioramento delle prestazioni fino al 30-40% nel recupero di file come CSS e JS.
Questo permette di visualizzare le pagine più rapidamente per gli utenti finali, eseguire più velocemente i file JS e ridurre i tempi di caricamento della pagina, migliorando l’esperienza visiva. Il vantaggio deriva dalla natura stessa dei CDN, che funzionano come meccanismi di caching e conservano asset statici come JS, CSS, immagini, favicon, ecc., più vicino all’ambiente dell’utente.
L’abilitazione dei CDN non è obbligatoria, ma è considerata una best practice. È comunque possibile caricare gli asset nella libreria SiteAssets o in altre librerie documentali accessibili agli utenti finali e servire i file da lì. Nel framework SharePoint (SPFx), puoi impostare il percorso nel parametro cdnBasePath del file manifest JSON, caricando poi manualmente i file in quella posizione.
Se lasci cdnBasePath vuoto e il tuo CDN non è abilitato, i file verranno serviti dalla raccolta siti dell’App Catalog. Il luogo in cui carichi l'app è anch’esso una libreria documentale da cui verranno serviti questi file.
I pacchetti applicazione di SharePoint Framework (SPFx) possono essere distribuiti a livello di tenant, rendendo l’app disponibile in tutto il tenant, il che è vantaggioso.
Tuttavia, se per qualche motivo si sta usando un singolo tenant di Office 365 per sviluppo, UAT e produzione (ad es., raccolte siti separate per ogni ambiente), questa opzione potrebbe non essere fattibile. In tali casi, bisognerebbe considerare l’uso del catalogo app a livello di raccolta siti.
Il framework SPFx è ancora in evoluzione e, durante questo processo, alcuni rilasci di Microsoft possono presentare bug che causano problemi.
Microsoft risponde rapidamente a tali problemi rilasciando patch con correzioni. È importante rimanere aggiornati con gli ultimi pacchetti SPFx per garantire stabilità e accesso a eventuali miglioramenti e correzioni.
La piattaforma SharePoint è ormai da più di vent’anni al centro delle infrastrutture digitali aziendali di oltre 200.000 organizzazioni in tutto il mondo, con una base di più di 190 milioni di utenti attivi. Questi numeri includono aziende di tutte le dimensioni, dagli enti governativi e multinazionali alle piccole e medie imprese, che utilizzano SharePoint sia nella versione online (parte di Microsoft 365) che on-premises per costruire intranet, portali collaborativi, sistemi di gestione documentale e altre soluzioni aziendali.
E i motivi sono semplici: la sua versatilità e la sua semplicità d’uso lo rendono uno strumento di lavoro incredibilmente solido e affidabile per coloro che desiderano una piattaforma di collaborazione web completa e ricca di soluzioni per soddisfare le proprie esigenze.
E SharePoint Framework rappresenta un altro potente strumento per lo sviluppo di soluzioni personalizzate all'interno dell'ecosistema SharePoint, offrendo flessibilità e integrazione con le tecnologie moderne. La possibilità di creare componenti riutilizzabili e modulabili, come web part ed estensioni, consente alle aziende di adattare SharePoint ai propri specifici bisogni, superando alcune delle limitazioni delle precedenti versioni della piattaforma di collaborazione Microsoft.
Pur richiedendo competenze di sviluppo front-end, SPFx facilita l’adozione di pratiche di sviluppo standard e l’uso di strumenti moderni, contribuendo a un'implementazione più sicura e gestibile delle soluzioni e con l’evoluzione continua di SharePoint Framework, le aziende hanno l’opportunità di creare ambienti digitali sempre più funzionali e su misura, a supporto delle proprie attività e della produttività complessiva. Provare per credere.
SharePoint Framework (SPFx) è un modello di sviluppo introdotto da Microsoft per la creazione di soluzioni personalizzate in SharePoint, sia Online che on-premises. Permette agli sviluppatori di realizzare web part, estensioni e applicazioni integrate nell'interfaccia utente di SharePoint utilizzando tecnologie standard come TypeScript e React.
SPFx consente di sviluppare soluzioni lato client che si integrano con l'esperienza utente moderna di SharePoint. Supporta strumenti open source e servizi di sviluppo client, permettendo l'uso di tecnologie web moderne per creare applicazioni responsive e portabili.
La configurazione di SPFx include l'installazione degli strumenti necessari come Node.js, Yeoman e Gulp. Si procede poi con la creazione di un nuovo progetto utilizzando generatori Yeoman specifici per SharePoint e, infine, con lo sviluppo e il test delle soluzioni direttamente in un ambiente SharePoint.
È possibile sviluppare web part che visualizzano dati, offrono funzionalità interattive per gli utenti o si integrano con servizi esterni. Queste soluzioni possono essere personalizzate per soddisfare diverse esigenze aziendali e migliorare l'esperienza utente.
Le estensioni in SPFx permettono di personalizzare elementi dell'interfaccia utente di SharePoint, come barre degli strumenti, menu di navigazione e notifiche. Offrono la possibilità di estendere le funzionalità di SharePoint, andando oltre le semplici web part.
Per ottenere i migliori risultati, è consigliabile seguire le linee guida di Microsoft per garantire compatibilità e performance, mantenere il codice pulito e modulare per facilitare la manutenzione, e testare le soluzioni su diversi dispositivi e browser per assicurare un'esperienza utente uniforme.
Il team Modern Work risponde in maniera efficace e veloce alle necessità IT, in cui lo sviluppo software rappresenta la componente principale. Le figure tecniche hanno tutte una formazione incentrata sulla realizzazione di progetti software su stack tecnologici Microsoft e possiedono competenze nella gestione di progetti agili o di lunga durata.
