SharePoint Framework (SPfx) : getting started and Deep Dive (Partie 1/3)

SharePoint Framework (SPfx) est le nouveau modèle de développement dévoilé par Microsoft en Mai 2016. Celui-ci donne aux adeptes du collaboratif, plus de flexibilité pour le développement côté client mais aussi pour créer de nouvelles fonctionnalités et expériences sur SharePoint Online.

Ce poste est le premier d’une série de 3 articles dont voici la trame :

• Partie 1 : SharePoint Sites modernes et la nouvelle expérience utilisateur !
• Partie 2 : Bonnes pratiques et optimisation d’une solution SPfx, intégrer Office Fabric UI React et les tests unitaires.
• Partie 3 : SPfx et VSTS/DevOps pour l’intégration/livraison continue.

SharePoint Framework  – Partie 1 : nouvelle expérience (SharePoint moderne)

Lors des missions réalisées chez la majorité de mes clients, de nombreux utilisateurs finaux (en particulier ceux qui utilisent uniquement SharePoint de temps en temps) avaient du mal avec l’ancienne expérience – en utilisant le ruban, en ajoutant, en configurant des composants Web et surtout pour changer la position du composant. Il en ressort aussi que la manipulation était trop complexe pour les débutants sur SharePoint, voire même pour les connaisseurs parfois !

SharePoint – Les 4 dernières années

Durant ces 4 dernières années, Microsoft a mis l’accent sur Office 365 (solution collaborative sur le Cloud), du coup les équipes de Satya Nadella ont priorisé le modèle de développement en nuage «Cloud first». De par cette émergence d’un nouveau modèle, de nouvelles fonctionnalités ont vu le jour :

• L’apparition des environnements dits «hybrides» entre local et en ligne qui sont devenus plus courants mais très complexes à mettre en place et à gouverner sur le long terme !
• Le passage à des approches de développement «orientés cloud» mais qui restent toujours supportées en local, par exemple apps/add-ins.
• Les charges de travail se sont nettement améliorées à l’issue de la manière dont on personnalise la plateforme.
• La gestion des documents s’en trouve aussi améliorée ainsi que la co-création qui est devenue solide.
• Une excellente plateforme intranet. Même OneDrive for Business fonctionne très bien !

Mais à part ça, y a-t-il de vrais changements pour l’utilisateur final ?

Rajeunissement de SharePoint

Fin 2016, les équipes de Redmond annoncent vouloir donner un coup de jeune à SharePoint, mais aussi à Office365. Des améliorations au niveau du corps de SharePoint et OneDrive sont apportées :

• Nouvelle expérience utilisateur des sites modernes (look and feel !) avec le support natif de l’affichage mobile (par défaut sites et pages sont responsives).
• Intégration avec les groupes transverses d’Office365 : SharePoint n’est plus considéré comme une plateforme à part, au contraire, il doit être perçu comme un fondement de l’écosystème Office365 et que toutes les autres applications (Delve, Outlook, Teams, etc.) puissent communiquer avec dans les deux sens via des canaux adaptés par contexte et domaine.
• Contrôle d’accès modernisé et amélioré en Cloud.
• Intégration de Microsoft Flows avec la plateforme.

SharePoint moderne c’est quoi ?

Dans cette partie, je vous propose de passer en revue l’ensemble de la nouvelle expérience « moderne »  de SharePoint Online. Celle-ci a un impact direct sur l’expérience utilisateur final mais aussi sur les options de personnalisation qui peuvent être utilisées.

Sites d’équipe (Team sites)

Au travail, il est important que chaque membre de l’équipe rationalise ses efforts, surtout lorsqu’il est en déplacement. En effet, les sites d’équipe SharePoint fournissent un emplacement central pour gérer les fichiers d’équipe, entrer des données importantes, s’y connecter et partager des actualités en temps réel. Voici la particularité de ce type de site :

• Intégration avec les groupes Office 365 : chaque groupe aura une approche unique du fonctionnement de SharePoint et de ce qui fonctionne le mieux. Certains seront axés sur le courrier électronique, d’autres centrés sur les fichiers et d’autres axés sur le chat.

• Nouvelle page d’accueil de SharePoint.

• Création des pages modernes simplifiée.
• Nouvelle fonctionnalité « Teams News ».
• Nouvelle expérience “Liste” des éléments/librairie Documentaires.
• Capacité de stockage par site augmentée jusqu’à 25TB.

Page de contenu des sites

• Nouveau design des pages et une expérience utilisateur plus agréable.

Les pages modernes

• Nouveaux Canvas.
• Plus de zones WebPart classiques.
• Elles supportent des Apps et non plus les iFrames et les MasterPages.
• Elles sont similaires à l’allure récente de la page des Blog Delve.

WebPart côté client (Client Side WebPart)

Les WebParts côté client sont des contrôles qui se rajoutent à une page moderne, mais qui s’exécutent localement du côté client (navigateur). Ce sont des blocs de construction de base pour les pages qui s’affichent dans un site SharePoint. Parmi les nouveautés des WebPart Modernes :

• Implémentation pure en Html, Css et javascript (compatible Vanilla javascript, JQuery, Angular et React).
• Injection du javascript soutenue « backed-in injection javascript ».
• Expérience utilisateur simplifiée « ex : Panel de propriété plus commode ».

Compatibilité Pages/WebPart vs SharePoint Classique/Moderne

• WebPart moderne fonctionne aussi bien sur une page classique qu’en moderne.
• WebPart classique n’est pas supportée par les pages modernes.

Conception de site et scripts de site (Site design et Site Script)

Lorsque des membres de l’organisation veulent ajouter de nouveaux sites SharePoint à leurs intranet, il est souvent nécessaire d’assurer une cohérence avec l’existant.

L’idée est d’appliquer une même configuration et une même personnalisation (modèle, thèmes, etc.) à chaque création d’un nouveau site. Microsoft a bien pensé à ce point en mettant à disposition une nouvelle fonctionnalité et en exposant des scripts de mise en service de sites détaillés utilisant le moteur de mise en service Plug-and-Play, qu’il faut appliquer à chaque nouveau site créé.

Ci-dessous, un écran montrant la possibilité de déclencher un flux Microsoft (MS Flow) qui est l’une des actions fournies par les scripts de site. On peut ainsi spécifier une action personnalisée dont on a besoin en plus des actions fournies en natif par les scripts de site.

SharePoint Framework (SPfx): pour le développement moderne !

Maintenant que nous avons présenté ci-dessus les principaux éléments de SharePoint moderne, on va s’attaquer tout de suite à SPfx qui est, comme précisé dans l’introduction, un modèle de développement accompagnant la nouvelle UX (User Experience) de SharePoint. SPfx est basé sur une pile de développements web modernes et pour la première fois, Microsoft nous offre un modèle qui peut être utilisé sur n’importe quelle plateforme avec n’importe quel Framework JavaScript (frontal) pour construire des personnalisations SharePoint.

En optant pour SharePoint Framework, on peut créer des solutions faites à 100% de JavaScript. Comme pour les solutions SharePoint classiques construites auparavant en utilisant AngularJs, Knockout, jQuery et JSOM, là aussi les solutions SharePoint Framework seraient entièrement exécutées côté navigateur.

Utiliser TypeScript pour créer ces solutions est un choix judicieux permettant un développement forcément typé en javascript ce qui ajoute une couche supplémentaire de validation. Cela facilite aussi le passage des développeurs peu à l’aise avec Javascript (les développeurs C#) et garantit qu’ils écrivent un code normalisé et conforme aux préconisations de la technologie. Notez bien que TypeScript n’est pas obligatoire. Quoi qu’il en soit, ce qui est finalement interprété et exécuté dans le navigateur est du JavaScript.

Microsoft a annoncé le SharePoint Framework en tant que modèle d’extensibilité pour le nouvel UX SharePoint. Les solutions créées à l’aide d’autres modèles de développement introduits dans le passé, tels que les solutions de batterie de serveurs (Farm servers) locales ou les Add-in SharePoint, ne peuvent pas être utilisées sur des sites modernes. D’un autre côté, les solutions construites à l’aide de SharePoint Framework peuvent être utilisées aussi bien sur des sites modernes que sur des anciens sites utilisant l’expérience SharePoint classique.

Ma solution peut-elle fonctionner correctement sur mobile ?

SharePoint moderne est conçu sur l’esprit du mobile first. Les sites d’équipe modernes sont non seulement réactifs, mais tout le contenu et les personnalisations sont aussi exploitables sur mobile. Si les utilisateurs mobiles constituent une audience importante pour votre solution, vous devriez envisager de la créer à l’aide de SharePoint Framework. De cette façon, les utilisateurs pourront se servir de votre solution, qu’ils soient sur leur ordinateur de bureau ou sur leur téléphone en utilisant l’application SharePoint native.

SharePoint Workbench, c’est quoi ?

SharePoint Workbench est la surface de conception à disposition des développeurs qui permet de prévisualiser et de tester rapidement des solutions SharePoint Framework sans avoir besoin de les déployer dans SharePoint.

Il existe deux formes de WorkBench, une qui est disponible localement sans avoir besoin d’installer SharePoint sur sa machine et une autre que vous pouvez utiliser dans un site SharePoint distant sur votre tenant Office365.

Voici le lien d’un WorkBench distant : https://[sharepoint-site]/_layouts/15/workbench.aspx

La principale différence entre les deux est que le dernier charge la version SPFx à partir d’Office 365 et le premier charge la version SPFx à partir de la chaîne de génération (Toolchain) SPfx locale.

Mise en garde :

• Si vous allez développer sur le WorkBench version local, il faut bien penser à préparer en préalable un mock de données (fake data) afin que vous puissiez simuler ce que vous allez faire (je vais traiter ce sujet prochainement dans la partie 2 de l’article).
• Si vous choisissez le WorkBench version distante, vous devriez compiler et lancer votre composant WebPart en local et  il sera exécuté automatiquement dans l’espace de travail hébergé sur votre site SharePoint. Cette technique s’appuie sur un canal de transmission des données depuis la chaîne de compilation (Toolchain) SPFx locale pour collecter des informations du composant et les envoyer en live au site distant.

Prise en main SharePoint Framework (SPfx) :

En effet, pour créer des solutions SharePoint Framework il est bon de savoir que vous pouvez démarrer sur Windows, Mac ou Linux. Avant de commencer, il est obligatoire d’installer ces outils de développement prérequis (Visual studio code, Node.js, Yeoman, TypeScript, Gulp) :

• je vous partage ci-dessous le lien Microsoft qui présente les étapes à suivre pour installer les outils : https://docs.microsoft.com/fr-fr/sharepoint/dev/spfx/set-up-your-development-environment

• je vous partage aussi un lien Microsoft pour bien commencer à créer un nouveau projet SPfx et développer un HelloWorld : https://docs.microsoft.com/fr-fr/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Conclusion

Via ce poste je vous ai présenté les changements apportés ces derniers temps sur l’ensemble de la solution collaborative SharePoint et comment elle est devenue l’un des fondements de la plateforme Office 365. Après, je vous ai introduit le nouveau Framework de développement SharePoint SPfx qui sera développé dans les parties 2 et 3.

En étant consultant spécialisé dans le développement collaboratif depuis 2009, SPfx m’a fait changer d’avis et m’a facilité la vie sur le développement collaboratif ! Cela m’a permis d’être moins dépendant de la plateforme et de m’offrir plus de commodité et de liberté en développant. L’orientation et la vision de Microsoft me semblent plus que clairs avec l’offre Azure/Office 365 🙂

Restez à l’écoute pour la prochaine partie de l’article qui va porter sur les bonnes pratiques de développement SPfx, sur les test unitaires et présentera également la manière d’éviter les impacts de performances auxquels on peut faire face en intégrant la bibliothèque graphique de Microsoft Office UI Fabric basée sur ReactJs.