Understanding SharePoint Framework and Modern Development Paolo Pialorsi PiaSys.com

Paolo Pialorsi PiaSys.com Project Manager, Consultant, Trainer About 50 Microsoft certification exams passed MCSM – Charter SharePoint MVP Office Servers and Services SharePoint PnP Core Team Member Focused on SharePoint since 2002 Author of many books about XML, SOAP, .NET, LINQ, SharePoint, and Office 365 Speaker at main IT conferences Email : paolo@pialorsi.com Twitter : @PaoloPia

SharePoint Extensibility Principles 9/21/2018 7:41 AM SharePoint Extensibility Principles To provide an Application Development Framework that aligns 1st and 3rd parties To build industry leading client side solutions On-Premises and in the Cloud Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint Framework (SPFx) New framework to build Modern UI customizations Built on the well-known web stack Open model, not only for .NET/Microsoft-oriented developers Works well on the cloud It is available on-premises, too (SP2016 + FP2 or later) Enterprise-ready when used with back-end services REST API and micro-services, Azure Functions, etc. Not a new model, but an additional model to build UI elements for the Modern UI We can build client-side Web Parts or client-side Extensions

Building out the User Experience TechReady 23 9/21/2018 7:41 AM Building out the User Experience SharePoint Framework Provider Hosted Web Parts Extensions Add-ins Experiences MS Graph Package Deployment CSOM Client side Tools SP APIs Development © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Typical tooling for SharePoint Framework Node.js Yeoman Gulp TypeScript Visual Studio (Code) Frameworks – Choose yours React Angular.js Knockout Etc.

Technology Mapping C# MS Build IIS Express VS Project  New  <Template> C#

Development Machine Setup Node.js (LTS – Long Term Support) - www.nodejs.org NPM v. 3 npm install –g npm@3 Yeoman and Gulp npm install -g yo gulp Yeoman SharePoint Generator npm install -g @microsoft/generator-sharepoint Configure SSL for localhost testing environment gulp trust-dev-cert

Console and Code Editor Source control system and Project management GitHub VSTS Etc. Additional tooling Fiddler - http://www.telerik.com/fiddler Postman - https://www.getpostman.com/ Console for Node.js PowerShell CMDER for Windows - http://cmder.net/ Etc. Code Editor Visual Studio Code Visual Studio 2015/2017 Atom Storm Sublime

What can we build with SPFx? Client-side Web Parts Client-side Extensions Application Customizer Command Set Field Customizer

DEMO Hello World Client-Side Web Part Paolo Pialorsi PiaSys.com

Property Pane Controls Label TextField Checkbox DropDown Toggle Button Horizontal Rule Slider Link Custom community controls: https://oliviercc.github.io/sp-client-custom-fields/ https://github.com/SharePoint/sp-dev-fx-controls-react

DEMO Property Pane Controls Paolo Pialorsi PiaSys.com

Provisioning of Artifacts You can deploy custom artifacts through your custom SPFx solutions Can be provisioned only Fields/Site Columns Content Types List Instances List instances with custom schema It leverages the “old school” feature framework Life could be better  … You need to create a sharepoint/assets folder in the root folder of your project Create elements.xml files and schema.xml files based on CAML syntax Declare the assets in the package-solution.json configuration file

Versioning of provisioned artifacts You can use the Upgrade Actions of the feature framework Supported upgrade actions are ApplyElementManifest AddContentTypeField Provide one or more upgradeActions items in the package-solution.json configuration file It’s feature framework, the old and well know one And you will struggle with all the challenges of feature framework versioning 

Deployment through a CDN You can deploy your SPFx solutions to whatever CDN you like The out of the box tooling natively supports Azure CDN And you can easily use the Office 365 CDN, too The overall goal is to make your solution better served and more achievable

Deploying on Azure CDN Create an Azure Blob Storage account Create a blob container Configure the Azure CDN Profile to target that specific container Configure the deploy-azure-storage.json config file to target your Azure CDN workingDir account container accessKey Configure the write-manifests.json config file with the CDN Profile base URL cdnBasePath Execute “gulp --ship” and “gulp deploy-azure-storage“ Package and publish the solution on SharePoint

Deploying on Office 365 CDN Enable and configure Office 365 CDN Configure the write-manifests.json config file with the CDN base URL cdnBasePath Execute “gulp bundle --ship" Upload the output (./temp/deploy) into the target library Package and publish the solution on SharePoint

Security Model of client-side Web Parts Client-side web parts run with the same permissions as the current user They can do whatever the current user can do They can be installed by tenant administrators only It is responsibility of tenant admins to trust (or to not trust) a SPFx component In the future it will change at site collection scope … They share the same DOM and the same code with the whole page Another client-side web part can do malicious things Don’t store sensitive data in the client-side web part Rely on server-side infrastructural services

DEMO Client-Side Extensions with SPFx Paolo Pialorsi PiaSys.com

What should I learn to be ready? TypeScript Node.js, npm, gulp, and web stack in general Any JavaScript framework of your choice Angular.js, React, Knockout, etc. Office UI Fabric SharePoint Framework Web Parts development SharePoint PnP

Useful Links about SPFx http://dev.office.com/sharepoint https://github.com/SharePoint/sp-dev-docs https://github.com/SharePoint/sp-dev-fx-webparts https://github.com/SharePoint/PnP-JS-Core https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part https://www.youtube.com/playlist?list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq

Thanks for watching!