La magie derrière la Sharepoint Workbench.aspx

Il y quelques siècles, nous n’avions ni Sharepoint ni la fantastique page Workbench.aspx.

En tant que représentant de la vielle école des « webparts côté serveurs », j’ai décidé de donner un coup d’oeil approfondi au nouveau framework SPFx (SPFx ça a un petit air de projet secret qui donne une touche très cool à Sharepoint)

La génération automatique et les installations sur la machine de développement sont des fonctionnalités très intéressantes, mais je dois admettre que j’étais un peu dérouté lorsque j’ai remarqué que ma webpart est devenue automatiquement disponible sur mon environnement Sharepoint online, sans que je fasse quoi que ce soit, bien entendu.

Comment fonctionne ce coup de baguette magique ? 

La réponse rapide est très simple :

La page Workbench.aspx communique avec le gulp serve et demande à celui-ci de lui envoyer la webpart locale.

Si vous naviguez sur votre page Workbench.aspx et que gulp serve n’est pas executé, vous allez recevoir le message suivant :

warning no gulp serve spfx framework workbench.aspx

Pour une vue plus approfondie, lancez votre navigateur et activez votre toolbar développeur, ensuite passer sur le mode de traçage d’activité réseau.

Naviguez sur la page Workbench.aspx qui est situé sous {votre site}_layouts/15/workbench.aspx et recherchez dans la toolbar par exemple le titre de votre webpart, dans mon cas HelloWorld (à cette phase, gulp serve doit être executé).

Les données de bases de votre webpart sont contenues dans le fichier manifest.js qui est lu par le Workbench.aspx

developer toolbar network tracing manifest.js spfx framework workbench.aspx

La webpart elle-même est chargée comme fichier javascript séparé, le code source complet est contenu dans le fichier hello-world.bundle.js. Ajoutez votre webpart sur votre page et pressez F5. Vous pouvez constater que votre webpart est envoyé comme fichier Javascript comme visualisé ci-dessous.

developer toolbar network tracing bundle.js spfx framework workbench.aspx

La nouvelle approche de programmation Sharepoint améliore différents aspect importants dans le processus de développement Sharepoint

Nous pouvons installer et tester nos webparts dans n’importe quel environnement, ceci sans délai et sans impact sur les serveurs (puisque les modifications ne sont faites que dans le contexte de notre page workbench.aspx), et ceci est un grand avantage, aussi bien pour les développeurs que pour nos clients.

A vos baguettes magiques !

P.S. : L’introduction parfaite se trouve ci-dessous

Setup your development environment

Build your first client-side webpart

Connect to your sharepoint