Introduction to SharePoint Framework (SPFx)

Introduction to SharePoint Framework (SPFx)

• 1.
  30th September 2017 Milan
• 2.
  Introduction to SharePointFramework (SPFx) Fabio Franzini - Office Servers & Services MVP @franzinifabio fabiofranzini.com
• 3.
  #SPSMilan
• 4.
  A Huge “ThankYou!” To Our Sponsors … In cooperation with
• 5.
  Agenda • Introducing SharePointFramework (SPFx) • SPFx Toolchain • SPFx Webpart • Deploy SPFx WebPart • Q&A
• 6.
  INTRODUCING SHAREPOINT FRAMEWORK
• 7.
  SharePoint – Evolvingacross versions 2013 APP/ADD-IN MODEL 2010 SANDBOX & CSOM <= 2007 FULL TRUST 2016 CLOUD FRIENDLY SPFx
• 8.
  WHAT IS THESPFx? Is a page and web part model with full support for client-side SharePoint development using modern web technology and tools • Runs in the context of the current user and connection in the browser • The controls are rendered in the normal page DOM, NO iFrames! • The controls are responsive and accessible by nature • It's framework agnostic • The toolchain is based on common open source client development tools • Component types: • Client Web Part • Extensions • Application Customizer • Field Customizer • Command Sets • SPFx web parts can be added to both classic and modern pages • Available in the Cloud and On-Prem (SP 2016 Feature Pack 2)
• 9.
  SPFx principles • New/Moderntoolchain • Client-side rendering • No iFrame needed • No JavaScript Injection needed • No server side-code needed • IDE/Development platform agnostic
• 10.
  SPFX TOOLCHAIN
• 11.
  TOOLCHAIN COMPARISON IIS Express VSProject  New  <Template> C# MS Build
• 12.
  SPFx DEVELOPMENT ENVIRONMENT Useany most OS / workstation 1. Office 365 / SharePoint Online tenant 2. App catalog for deployment 3. Install nodeJS (current Long Term Support (LTS) version) 4. Yeoman and Gulp • C:> npm i –g yo gulp 5. SPFx Yeoman generator • C:> npm i –g @microsoft/generator-sharepoint • C:> npm update –g @microsoft/generator-sharepoint 6. Generate local Trust Cert • C:> gulp trust-dev-cert 7. Use code editor • VS Code / Sublime Text / NotePad++, etc
• 13.
  DEMO
• 14.
  SPFX WEBPART
• 15.
  CREATE YOUR FIRSTSPFx WEBPART 1. C:> md helloworld-webpart 2. C:> cd helloworld-webpart 3. C:> yo @microsoft/sharepoint • Working on it…  • You can execute yo command again to add more webparts to project 4. C:> gulp serve 5. Check out your first WebPart! 1. May also load in SPO workbench: “../_layouts/15/workbench.aspx”
• 16.
  SPFx PROJECT FOLDEROVERVIEW Get to know your Webpart folder structure • src: primary webpart TypeScript source code • config: json configuration files for build process • typings: TypeScript typings for JS libs – legacy • lib: Build files (TS compiled JS) ready for bundle • dist: Final web ready code for distribution • sharepoint: .spapp file for App Catalog • node_modules: NodeJS modules (JS) for toolchain
• 17.
  DEMO
• 18.
  DEPLOY SPFX WEBPART
• 19.
  PACKAGE YOUR WEBPARTFOR DEPLOYMENT 1. Set deployment configuration • config/package-solution.json – general settings and package name • write-manifests.json – CDN / bundle location – for dev, can serve locally: gulp serve --nobrowser 2. C:> gulp clean (cleans sharepoint and temp folders) 3. C:> gulp build (Rebuilds the solution) 4. C:> gulp bundle (Creates the solution bundles) 5. C:> gulp package-solution (Creates /sharepoint/”webpart”.spapp) 6. C:> gulp –ship (minifies bundle and reads in CDN info from config/write- manifests.json) 7. C:> gulp package-solution --ship (Recreates /sharepoint/”webpart”.spapp with CDN info)
• 20.
  PACKAGE YOUR WEBPARTFOR DEPLOYMENT 1. After solution created, can then add to SharePoint 2. Add .spapp to app catalog 3. Add Add-In to SharePoint site 4. Add WebPart in site to content page 5. Configure CDN • Office 365 CDN: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get- started/hosting-webpart-from-office-365-cdn • Azure CDN: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to- cdn 6. Or manually deploy solution bundle and config write-manifests.json
• 21.
  DEMO
• 22.
  QUESTIONS& ANSWERS
• 23.
  Thank You! Please fillthe feedback form!
• 24.
  30th September 2017 Milan