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 get started and best practices


Published on

Sharepoint Framework è il nuovo modo di sviluppare soluzioni assolutamente sicure per il tuo ambiente SharePoint, inoltre ci sono nuovi tool messi a disposizione dello sviluppatore che garantiscono la compatibilità in altri sistemi operativi durante la fase di sviluppo.Adesso è possibile cimentarsi con Typescript e altri client side framework come React, Angular e Knockout. In questa sessione mostrerò come muovere i primi passi per creare una SharePoint Framework solution e le relative best practices.

Published in: Software
  • Login to see the comments

  • Be the first to like this

SharePoint Framework get started and best practices

  1. 1. SharePoint Framework get started and best practices GIUSEPPE MARCHI - @PEPPEDOTNET GIULIANO DE LUCA - @GIULEON WPC2017 2
  2. 2. Agenda • SharePoint Framework (SPFx) intro • Toolchain • WebParts • Extensions • Data access • Office UI Fabric integration • Architecture and deployment process • Roadmap: a look to the future WPC2017 3
  3. 3. Hi! My name is Peppe! Co-founder of Dev4Side S.r.l. 8 years Microsoft SharePoint MVP Speaker in Microsoft communities events in Italy "SharePointer" from 2005 Father of  Office 365 advisor for Author of the book "Pocket C#" from Apogeo One of the top SharePoint and Office 365 influencers (for 2014 and 2015) WPC2017 4
  4. 4. Hi! My name is Giuliano! Software Engineer Blogger: Speaker in various SharePoint Saturday Twitter: @giuleon GitHub: Contributor for SPFx on Microsoft GitHub WPC2017 5
  6. 6. What is it? WPC2017 7 Already available on SharePoint Online and also for SharePoint 2016*!
  7. 7. What’s a modern page? WPC2017 8
  8. 8. Is all SPOnline development in Javascript? WPC2017 9 No In similar ways as with SharePoint Add-in model, server side development is needed for back end services SharePoint Framework concentrates on user interface, not on fundamentals around the API usage
  9. 9. Toolchain TOOLING Typescript Node.js Yeoman Gulp WebPack Visual Studio (Code) FRAMEWORKS (CHOOSE YOURS) React Angular.js Knockout Vue.js WPC2017 10
  10. 10. What I can do with SPFx? WEBPARTS EXTENSIONS WPC2017 11 Application customizers Field customizers Command Sets
  11. 11. DEMO  yo @microsoft/sharepoint How to create your first SPFx web part WPC2017 12
  12. 12. Data access WPC2017 13
  13. 13. You have two options for data access: WPC2017 14 Call external services • You can build API for custom activities • You need to take care about auth flow • You can call Graph APIs* Interact with SharePoint • Read/write from SharePoint lists • The classic behavior of a webpart • Use SharePoint REST APIs • Use PNP Core Js library
  14. 14. DEMO  npm install pnp-js-core --save How to quickly read/update SharePoint list data WPC2017 15
  15. 15. Office UI Fabric integration YOUR WEBPART CAN LOOK GOOD EASLY! WPC2017 16
  16. 16. Your webpart should look modern, responsive and with a beautiful UI! WPC2017 17 "KEEP CALM AND USE OFFICE UI FABRIC“ - SATYA NADELLA OHH NOOO ! I’M NOT A DESIGNERWAIT A MINUTE GIULIANO, I NEVER SAID THIS….
  17. 17. What is Office UI Fabric? Front-End Framework Responsive and mobile-first Office 365 User Experience Support to React, Angular, JS and IOS Many components available Open source WPC2017 18
  18. 18. A lot of components ready-to-use WPC2017 19
  19. 19. ~1500 icons WPC2017 20
  20. 20. And it’s all open source WPC2017 21 Fabric JS Lightweight and simple components in vanilla Javascript Fabric IOS Native iOS styling and components written in Swift AngularJS Community-driven project for Angular apps React Fabric’s robust, up-to-date components are built with React
  21. 21. DEMO  npm install office-ui-fabric --save How to give a style to your web part WPC2017 22
  22. 22. Architecture and deployment process WHERE MY FILES WILL BE EXECUTED? HOW CAN I DISTRIBUTE MY SOLUTION? WPC2017 23
  23. 23. SPFx solution architecture WPC2017 24 Azure CDN SharePoint Online CDN
  24. 24. SharePoint Online is your CDN! WPC2017 25<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>/
  25. 25. Security considerations WPC2017 26 SPFx solutions are running in the context of user
  26. 26. DEMO  gulp bundle --ship How you can automate SPFx solution deployment WPC2017 27
  27. 27. Roadmap TAKE A LOOK TO THE FUTURE WPC2017 28
  28. 28. SPFx roadmap Site Collection App Catalog to allow for scoped deployment Assets included in deployment packages Site Designs More Microsoft Graph support Groupify APIs & Hub site APIs WPC2017 29
  29. 29. Q&A Domande e risposte WPC2017 30
  30. 30. Corsi consigliati • MOCXXXXX • MOCXXXXX • MOCXXXXX • OECXXX WPC2017 31
  31. 31. Contatti OverNet Education Rozzano (MI) +39 02 365738 Bologna +39 051 269911 ROZZANO (MI) – BOLOGNA ROMA – NAPOLI – GENOVA TORINO WPC2017 32