Le 4 mai dernier, a eu lieu la conférence “Future of SharePoint” à San Francisco durant laquelle Jeff Tepper et son équipe nous ont présenté la vision de Microsoft concernant l’évolution de notre produit préféré : SharePoint.

Parmi toutes ces nouveautés, je vais vous parler dans cet article, du SharePoint Framework. Ce nouveau modèle de développement côté client facilite l’intégration avec Microsoft Graph et s’ouvre encore plus aux outils open source.

Depuis les premières versions de SharePoint, le modèle de développement est très propriétaire. Mais on constate depuis la version Online, que les contraintes techniques ont orienté les développeurs vers du code client permettant les améliorations de l’expérience utilisateur plus faciles : ce qui a déclenché l’arrivée du SharePoint Framework. L’expérience utilisateur a si bien évolué qu’il fallait aussi faire évoluer les développements pour la plateforme SharePoint vers le modern web dev.

Pour mieux comprendre ce nouveau modèle, nous allons voir comment les end-users ont été gâtés. Ils pourront profiter de la nouvelle expérience utilisateur qui apporte beaucoup plus de liberté lors de la création de pages dans un site, tout cela étant mobile-ready.

Page Modern Experience

A la création de la page, l’utilisateur se retrouve sur un design sobre et simple avec une invitation à choisir les différentes actions possibles pour remplir sa page. Une fois les modifications terminées, comme avant, il faut publier la page mais l’utilisateur n’a plus par défaut le fastidieux workflow d’approbation de publication de page avec les rechargements de pages qui nous ont bien fait râler ! Désormais il suffit juste de cliquer sur “publier” pour rendre la page publique.

new publishing page

Nouveau style de la page de publication

toolbox

Boite à outils des composants à ajouter

publish Page

Publication de la page en un clique

La structure de la page de publication a changé, elle se modernise on a une expérience moderne avec 2 parties essentielles : le CHROME et le PAGE BODY. Pour l’instant nous n’avons vu que très peu d’informations et avons hâte d’en savoir plus sur cette structure qui devrait standardiser la structure de page pour du mobile-ready.

PageExperience

Nouvelle structure de la page

Le panneau d’édition des propriétés de webpart a aussi évolué. Il est épuré et ne contient que quelques propriétés de bases. Bien entendu, vous pourrez l’enrichir dans le fichier client de votre webpart ou app.

webparProperties

panneau d’édition de webpart

 

Voilà très globalement les évolutions apportées à la page, voyons maintenant ce qu’est le SharePoint Framework.

Modèle SharePoint Framework + SharePoint Workbench

Le but de ce nouveau modèle est d’enrichir la boîte à outils du développeur SharePoint. Pour cela, Microsoft a mis le paquet pour intégrer le code-client comme Javascript et les Frameworks comme les célèbres React, AngularJS et autres. C’est la première fois que Microsoft permet la personnalisation de l’interface native SharePoint en s’affranchissant à 100% de .Net. La possibilité de mettre en place un “modern dev toolchain” est plutôt intuitive pour améliorer le développement d’app ou webpart.

Voici un exemple pris par Dan Kogan pour présenter les possibilités de ce nouveau modèle. Afin de développer une nouvelle app, le développeur peut utiliser Yeoman avec un template SharePoint, modifier le code client avec Visual Studio Code et pousser les modifications avec Gulp. C’était déjà possible me direz-vous : oui, mais la grande innovation arrive au moment de tester en live ses modifications. Dans notre exemple, Gulp et nodejs permettent de mettre un environnement local en place avec les fichiers nécessaires pour tester notre app dans un contexte ressemblant à SharePoint mais sans avoir à être connecté à notre site SharePoint. En effet, une nouvelle page workbench.aspx se lance avec votre webpart qui peut être testée en live. Une fois que vous êtes prêts à passer dans environnement réel SharePoint, il vous faudra déployer votre app via Gulp sur un website (Azure App Service par exemple) ou tout autre CDN pour peu que SharePoint puisse y avoir accès.

modern Toolchain

Modern Dev Toolchain

Il s’agit ici d’un exemple, libre à vous d’utiliser un autre framework Javascript ainsi qu’un autre automatiseur de tâche qui vous convient davantage voire même un autre éditeur de code si vous voulez : “it’s a revolution” !

Quelques points à savoir :

  • le modèle SharePoint FrameWork ne remplace pas les autres modes de développement SharePoint (SharePoint .Net SDK, CSOM, JSOM, provider hosted-app, etc.) mais il rend plus facile l’implémentation de solutions pour personnaliser les nouvelles pages et webparts, dans les modern team sites de SharePoint.
  • il faudra monter en compétence sur TypeScript car cette nouvelle manière de développer est clairement orientée autour de TypeScript. Les choses sont beaucoup plus simples si vous tapez du code TS qui sera “transformé” en Javascript. Les MVPs, qui ont fait partie des premiers ayant testé ce nouveau modèle, conseillent vraiment l’apprentissage de TypeScript même si dans l’absolu il sera certainement possible de faire autrement.
  • il n’est pas impossible que des éléments changent d’ici la sortie officielle de ces nouvelles fonctionnalités sur nos plateformes SharePoint.
En conclusion:

Microsoft s’est rendu compte qu’il devenait urgent de mettre à niveau sa plateforme SharePoint qui prenait des rides tant au niveau de l’expérience utilisateur qu’au niveau des outils à disposition des développeurs. SharePoint Framework vient s’ajouter à la boite à outils déjà fournie des développeurs SharePoint sans pour autant les faire partir de zéro car on sentait déjà venir le code client depuis la version SharePoint 2013, le modèle d’Apps, l’enrichissement de l’API REST et l’intégration des JSLink.

Il sera utile désormais de se poser encore plus les bonnes questions quand on voudra personnaliser notre plateforme SharePoint.

Je vous laisse ici quelques articles très bien rédigés qui donnent beaucoup plus de détails sur la mise en place de ce nouveau SharePoint Framework.