sharepoint framework : le développement sharepoint nouvelle génération

Gaetan Bouveret@gbouveret

Olivier Carpentier@olivierc

Le nouveau SharePointFramework (SPFx)

AgendaDécouvrir SPFxClient Side Web PartsALM (Application Lifecycle Management)Questions / Réponses

Découvrir SPFx

SharePoint Development ModelEvolution

2003

ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…

2007


2010


2013ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…

2001

ASP Digital Dashboards, File System Storage, etc.

Server Side Development

of customers are leveraging cloud for their applications—from pilots to production apps2

72%“Nearly of large enterprises will likely have hybrid cloud deployments by the end of 2017”1

50%

Sources:1. Gartner, Inc. 2013. Press Release: http://www.gartner.com/newsroom/id/25993152. 451 Research, Hosting and Cloud Study, 2014

http://www.gartner.com/newsroom/id/2599315

SharePoint is the place where your Teams will go to work. A refreshing change which places our beloved platform back as the leader in its space, especially when you consider the integrations with the rest of the Office 365 Suite. – Benjamin Niaulin, Sharegate

The new SharePoint based on SPFx

7

SharePoint Framework

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Team Site

Pages & Parts

App & Custom Portal

ISVs

SPFx:ProDev

UX Layer Extensio

ns

• Modern Tool Chain• Outillage Dev Web/Front • Amélioration de la qualité de

code• Déploiement / Test / Debug

simplifiés et rapides• Office UI Fabric

• UI controls, Styles, CSS• Ce sont ces outils qu'utilisent les

équipes Microsoft

Open Source Tooling Support

Poste local Visual Studio / Code NodeJS $ npm -g install npm@next Yeoman and gulp $ npm i -g yo gulp Yeoman SharePoint generator $ npm i -g @microsoft/generator-sharepoint

Tenant Office 365 Developer Collection de site "Dev" Bibliothèque avec page Workbench (upload) App Catalog

Prérequis / EnvironnementPréparer votre environnement de développement

N° 10

Enterprise-Grade

Modern Toolchain

User Focused

Customer

PatternsMicrosoftConsistentPlatform

UX Extensions Data Access Eventing Solutions HostCustom Presentation

2016 Client Side and Open Source

Client Side and Remotely Hosted

REST and Cleaner Contracts

Web Hooks and Web Sockets

Cloud SaaS and Client Side Logic

Accelerating Web Development

Client Side Web Parts

Processus de construction d’une nouvelle WebPart

Install SharePoint Generator

Scaffold SharePoint Web Part Project

Build Web Part Code

Test

Local

SharePoint

Package/Deploy

Available on Classic and Client-Side Pages



Ship

Package/Deploy

npm install generator SharePoint

yo sharepoint webpart

Code

gulp serve

workbench

gulp package-solution

gulp upload-cdn

workbench

Texte• Texte courant

Local & SharePoint workbench

N° 14

Workbench local Test/debug rapide des

WebParts (mock) Workbench dans SharePoint

(dev): Interaction avec SharePoint Attention, l'exécution

reste locale Prévisualisation en mode

mobile et tablettes

N° 15

Démo : Web Part Build Flow

Le nouveau Properties Panel

N° 16

Réactif ou non réactif Basé sur les contrôles d’Office UI Fabric Possibilité de créer ses propres types de

propriétés Types disponibles OOB

• PropertyPaneTextField• PropertyPaneDropdown• PropertyPaneSlider• PropertyPaneToggle• PropertyPaneCheckbox• PropertyPaneChoiceGroup• PropertyPaneLink• PropertyPaneLabel• PropertyPaneHorizontalRule

Le nouveau Properties Panel

N° 17

Plusieurs modes de navigation disponibles : • Simple, Accordéon ou par Pages Utiliser une

image ou une « font image » Office UI Fabric

Modèles standards: React, Knockout, no framework Possible d’ajouter un Fx JS externe (jQuery, Angular v2,

…) ou autres Présence en standard de React Office UI Fabric est basé sur React (

https://github.com/OfficeDev/office-ui-fabric-react/) DocumentCard, Persona DatePicker, Dialog, Panel Etc.

Intégrer un Framework JavaScript

N° 18

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/ROADMAP.md

Méthodes• REST API (https://consoto.sharepoint.com/_api/lists/$select=id)• Search Rest API / Office Graph (

https://consoto.sharepoint.com/_api/search/query)• JSOM • Microsoft Graph (https://graph.microsoft.com)

• Microsoft Graph SDK JavaScript• https://github.com/microsoftgraph/msgraph-sdk-javascript

Accèder à SharePointInteragir avec les listes, les éléments, les fichiers, etc.

N° 19

https://consoto.sharepoint.com/_api/lists/$select=id

https://consoto.sharepoint.com/_api/search/query

https://graph.microsoft.com/

https://github.com/microsoftgraph/msgraph-sdk-javascript

N° 20

Démo : Advanced Web Parts

Upload CDNPublication des développements

$ gulp –ship$ gulp deploy-azure-storagedeploy-azure-storage.json { "workingDir": "./temp/deploy/", "account": "", "container": "helloworld-webpart", "accessKey": "" } write-manifests.json { "cdnBasePath": ""}

CDN

BLOB Azure

App (JS / CSS / images, …)

CatalogApp &

WebPart

Deploy

Package

Office 365 Public CDN Preview

N° 23

package-solution.json{ "solution": { "name": "helloworld-webpart-client-side-solution", "id": "ed83e452-2286-4ea0-8f98-c79d257acea5", "version": "1.0.0.0" }, "paths": { "zippedPackage": "helloworld-webpart.spapp" }}

Packaging SharePoint AppMise à disposition des WebParts

$ gulp package-solution

• http://dev.office.com/sharepoint • https://github.com/SharePoint• https://channel9.msdn.com/blogs/OfficeDevPnP• http://dev.office.com/sharepoint/docs/spfx/web-parts/get-

started/build-a-hello-world-web-part • https://github.com/SharePoint/sp-dev-fx-webparts • https://sharepoint.github.io/modules/_sp_client_preview_.html• https://github.com/oliviercc/sp-client-custom-fields• https://github.com/oliviercc/spfx-40-fantastics

Pour aller plus loinLes ressources indispensables

N° 25

N° 26

@microsoftfrance @Technet_France @msdev_fr

N° 27

N° 28

sharepoint framework : le développement sharepoint nouvelle génération

Technology