Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint Framework : le développement SharePoint nouvelle génération

1,208 views

Published on

Venez découvrir le SharePoint Framework et toutes les nouveautés autour du développement SharePoint. Dans cette session, vous découvrirez comment développer des modules d’extensibilité de la plateforme, comme notamment les principes de personnalisation et de déploiement de contenu via les CDN, les nouvelles méthodes pour des développer des Client Sides Web Parts ou encore les webhooks. Orienté autour d’outils et de technologies open source et de JavaScript, le SharePoint Framework est une nouvelle façon rapide, légère et robuste de développer des extensions à SharePoint Online ou SharePoint Server.

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ▲▲▲ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

SharePoint Framework : le développement SharePoint nouvelle génération

  1. 1. Gaetan Bouveret @gbouveret Olivier Carpentier @olivierc Le nouveau SharePoint Framework (SPFx)
  2. 2. Agenda Découvrir SPFx Client Side Web Parts ALM (Application Lifecycle Management) Questions / Réponses
  3. 3. Découvrir SPFx
  4. 4. SharePoint Development Model Evolution Sources: 1. Gartner, Inc. 2013. Press Release: http://www.gartner.com/newsroom/id/2599315 2. 451 Research, Hosting and Cloud Study, 2014
  5. 5. 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
  6. 6. The new SharePoint based on SPFx 7
  7. 7. SharePoint Framework Team Site Pages & Parts App & Custom Portal ISVs SPFx: ProDev UX Layer Extensions
  8. 8. • 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
  9. 9.  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 / Environnement Préparer votre environnement de développement N° 10
  10. 10. Accelerating Web Development
  11. 11. Client Side Web Parts
  12. 12. Processus de construction d’une nouvelle WebPart
  13. 13. 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
  14. 14. N° 15 Démo : Web Part Build Flow
  15. 15. 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
  16. 16. 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
  17. 17.  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
  18. 18. 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 à SharePoint Interagir avec les listes, les éléments, les fichiers, etc. N° 19
  19. 19. N° 20 Démo : Advanced Web Parts
  20. 20. ALM
  21. 21. Upload CDN Publication des développements $ gulp –ship $ gulp deploy-azure-storage deploy-azure-storage.json { "workingDir": "./temp/deploy/", "account": "<!-- STORAGE ACCOUNT NAME -->", "container": "helloworld-webpart", "accessKey": "<!-- ACCESS KEY -->" } write-manifests.json { "cdnBasePath": "<!-- PATH TO CDN -->" } CDN BLOB Azure App (JS / CSS / images, …) Catalog App & WebPart Deploy Package
  22. 22. Office 365 Public CDN Preview N° 23
  23. 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 App Mise à disposition des WebParts $ gulp package-solution
  24. 24. • 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 loin Les ressources indispensables N° 25
  25. 25. N° 26
  26. 26. @microsoftfrance @Technet_France @msdev_fr N° 27
  27. 27. N° 28

×