DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
1 like331 views
Eric Shupps presented on developing SharePoint Framework solutions for the enterprise. He discussed how enterprises are increasingly using SPFx to build modern solutions. The presentation covered enabling developers through skills acquisition and configuring development environments. It also provided guidance on designing SPFx solutions for enterprises, addressing challenges like legacy dependencies and cloud integration. The latter part of the presentation focused on deploying SPFx solutions through packaging, feature frameworks, and using the Office 365 CDN for asset delivery.
![Vision
• Whydowehavetolearnyetanother developmentmodel?
• Howlongisthisonegoingtolast?
• We’reMicrosoftdevelopers,whydowehavetolearnall thisNodestuff?
• Whycan’tI useVisual Studio?
• WhattheheckisthisGitstuff?
• TypeScript?Whatwhatthe[bleep] isthat?
• Mycodegoeswhere?
• Commandline?Seriously?Whatyear isthis?](https://image.slidesharecdn.com/ecs19ericshuppsdevelopingsharepointframeworksolutionsfortheenterprise-190604164638/85/DEVELOPING-SHAREPOINT-FRAMEWORK-SOLUTIONS-FOR-THE-ENTERPRISE-19-320.jpg)
![Updates
• Local vs.Global
• npm outdated
• npm install package@version –save
• o365 spfx project upgrade –toVersion [version]](https://image.slidesharecdn.com/ecs19ericshuppsdevelopingsharepointframeworksolutionsfortheenterprise-190604164638/85/DEVELOPING-SHAREPOINT-FRAMEWORK-SOLUTIONS-FOR-THE-ENTERPRISE-30-320.jpg)
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
- 1. DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE Eric Shupps
- 3. ♡ DIAMOND AND PLATINUM SPONSORS ♡
- 4. @eshupps sharepointcowboywww.sharepointcowboy.com slideshare.net/eshupps linkedin.com/in/eshupps Eric Shupps Office Servers & Services MVP
- 6. INTRODUCTION
- 7. Enterprises are fueling the SPFx rocket PowerApps for full-time devs & Microsoft Graph enabling them Discussing enterprise development in Microsoft 365 with Eric Shupps The state of SPFx with Andrew Connell Highlights of Build 2018 and SharePoint Conference NA 2018 Microsoft Teams provisioning with Bob German Dev tools that make IT Pros smarter with Matthew McDermott Developing for Office and Microsoft Graph with Bill Ayers Microsoft Teams on Microsoft Graph with Nick Kramer SharePoint view formatting and PnP with Chris Kent PowerBI with John White M365 Dev Podcast – Top 10 Episode Downloads (Apr 2018 – Apr 2019) http://www.m365devpodcast.com
- 9. Purpose • Providea“pagesandparts”customizationmechanismthataddressesgapsintheadd-in model • Regainthecontextual functionalityofwebparts • Givecustomerstheabilitytocreateintegratedmodernpageexperiencesinthecloud • Transitiontoacompletelyclient-sideexecutionmodel withinthecorepageflow • Extendout-of-the-boxelements,includingmenus,listitemsandbranding
- 11. Enterprise Challenges • Vision • Teamskills • Toolsacquisition • Solutiondesign,re-designandmigration • Legacydependencies • Cloudintegration • Collaborativedevelopment • Vendor support • Platformandversiondisparities • Automatedlifecyclemanagement(DevOps)
- 12. ENABLEMENT
- 13. Legacy Windows Server IIS ASP.NET SharePoint Server Framework .NET (C#/VB) SharePoint Server OM CAML/XOML Languages and API’s • Visual Studio Tools
- 14. Modern Browser Server Mobile Framework HTML, JavaScript (JQuery, Knockout, Angular, React, etc.) CSOM, JSOM, REST, Office JS, Graph, OAuth C#, VB, Java, PHP, Python, Ruby, Others Languages and API’s Visual Studio VS Code IDE of choice Tools
- 15. Toolchain TypeScript - JavaScript superset w/ typed objects, classes &extension methods Node.js - Web server and component packaging extensions NPM – Packaging and module management utility Gulp – Task runner and build automation Yeoman – Project scaffolding generator CDN – Content delivery network (or location) for hosting source files React – JavaScript library of UI components Office Fabric – Office-centric set of React UI components
- 17. Machine Configuration • Windows • Node.js • NPM • Gulp • GitHub • YeomanGenerator • VSCode(or other) • NVM(optional) • Visual StudioExtension • Mac • Node.js • NPM • Gulp • GitHub • YeomanGenerator • Homebrew(optional) • NVM(optional) • VSCode(or other)
- 18. Platform Configuration • Developer Sites • Workbench • CorporateCatalog • Site collection app catalog • ContentDeliveryNetwork(or accessiblefilelocation) • Apps(On-Premises)
- 19. Vision • Whydowehavetolearnyetanother developmentmodel? • Howlongisthisonegoingtolast? • We’reMicrosoftdevelopers,whydowehavetolearnall thisNodestuff? • Whycan’tI useVisual Studio? • WhattheheckisthisGitstuff? • TypeScript?Whatwhatthe[bleep] isthat? • Mycodegoeswhere? • Commandline?Seriously?Whatyear isthis?
- 21. Models SPFx Cloud or OnPrem Contextual Integrated Parts & Extensions Add-In Cloud or OnPrem Contextual Unintegrated Apps, SPA's, Self- Contained Azure AD Cloud SSO Full Stack LOB Full Trust OnPrem Full Trust SSOM Legacy Solution
- 22. Legacy Redesign Web Parts SPFx Web Part Application Pages SPFx Web Part / Add-In Page Timer Jobs Azure Functions / Web Jobs Provisioning Add-In Branding SPFx Application Customizer Event Receivers Webhooks
- 23. Solution Components Web Part • In-context page component • Customizable property pane • Connectable • Scope: Page Application Customizer • Script injection onto pages • Defined DOM element identifiers • Scope: Site Command Set • Modify list and item menus • Custom dialogs • Scope: List Field Customizer • Change display options for field elements • Scope: List Add-Ins Azure
- 24. Legacy Dependencies ERP SaaS LOB Third-Party VPN Constrained Networks Bandwidth Gateways Directory Permissions Groups MFA Databases Web Services Applications Data Auth SystemsAccess
- 25. Vendor Support • Visual Studio • .NET • VB/C# • TFS/VSTS/Azure DevOps • Azure • VS Code • TypeScript • Yeoman Generator • SharePoint/O365 • Node • NPM • Gulp • NVM • JavaScript • React • Knockout • Yeoman • PnP
- 28. Interoperability SP 2016 (FP2) SPO SP 2019 Web Parts Application Customizers Field Customizers Command Sets Web Parts
- 29. Version Management • Definefeaturesupportbaseline • Branchsolutionsaccordingtobaselineor targetenvironment • Leveragecommonutilityclassesand librarieswherever possible • Applylocal updatesonlytomaster,resolve dependencies,branchfrommaster SPFx On- Premises 2016 🚫 🚫 🚫 🚫 v1.1 2019 🚫 🚫 v1.4 Cloud Current v1.7 v1.5 v1.4 v1.2 v1.1
- 30. Updates • Local vs.Global • npm outdated • npm install package@version –save • o365 spfx project upgrade –toVersion [version]
- 31. Automated Lifecycle Management • IDEintegrationwithDevOpstoolingandservices • Optimizationofbuilddependencies(npminstall) • Controlledbuildpipeline • Packageconfiguration(dev,test,staging,production) • Environmenttargeting • Versioneddeployment Commit Build Package Deploy
- 32. DEPLOYMENT
- 33. Packaging • Output of build tasks is a package file (similar to classic WSP) • Controlled by package-solution.json file in project • All assets packaged into .sppkg file if “includeClientSideAssets” = true. • Use “skipFeatureDeployment” for tenant-wide deployment • If CDN enabled, hosting of assets is automatic (otherwise served from App Catalog site collection) • Change behavior by setting “includeClientSideAssets” = false
- 34. Packaging Commands • gulp bundle --ship • gulp package-solution --ship
- 35. Feature Framework • DeclarativeassetscanbedeployedtositesaspartofanSPFxproject • Fields • Site Columns • Content Types • List Instances • Usesthesame“Elements”structureaslegacysolutionpackages • Assetsareprovisionedwhensolution(“app”) isinstalled …andretractedwhenit’sremoved!
- 36. Office 365 CDN • EnablesdeliveryofSPFxassetsfromanO365library • SupportsCSS,EOT,GIF,ICO,JPEG,JS,MAP,PNG,SVG,TTFandWOFFextensions • Requires*/CLIENTSIDEASSETSorigin* • Automaticallyplacesassetsintocorrectlocationsfor tenant-wideaccessibility • * Introduced in SPFx v1.4; If enabled previously, disable and re-enable. Not compatible with on-premises SP 2016 FP2.
- 37. CDN Commands • Set-SPOTenantCdnEnabled –CdnType Public • Get-SPOTenantCdnEnabled • Get-SPOTenantCdnOrigins • Get-SPOTenantCdnPolicies • NOTE: Provisioning can take 15+ minutes to complete
- 38. Visual Studio Extension • Custom Visual Studio VSIX project and item templates • Parameters and settings configured in Windows Forms • Overlays but does not replace the native Yeoman Generator for SharePoint Framework • Ability to customize command line for advanced usage scenarios • Automated project scaffolding with standard VS and MS Build file structures • One-click F5 debug experience plus integration with the Task Runner Explorer
- 40. DEMO
- 41. Resources • Slides: http://www.slideshare.net/eshupps • Code:https://www.github.com/eshupps • Samples:https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples • Docs:https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework- overview • WebPart Examples:https://github.com/SharePoint/sp-dev-fx-webparts • Extension Examples:https://github.com/SharePoint/sp-dev-fx-extensions • Visual Studio Extension:http://bit.ly/2Uoz2q7