Tips for SharePoint Framework development Simon Doy simon@ithinksharepoint.com

Agenda What is this presentation about? Developing SPFx tips + demos Questions Introduction – what I am going to talk about?

Introduction What is this presentation about? Describe and demonstrate some tips for building solutions with SPFx which Make them easier to manage and maintain. Help you to build better SPFx solutions. What is this presentation not about? An introduction to SPFx development.

Simon Doy iThink SharePoint Office 365, Microsoft Azure & SaaS Solution Architect Twitter: @simondoy Email: simon@ithinksharepoint.com Blog: https://blog.simondoy.com Introduction Who is Simon? Contact details What do you do? How did you get into SharePoint and Office 365? Simon Doy iThink SharePoint

The Tips

Tip: Setup your projects in a consistent way If every SharePoint Framework project is setup differently it is harder to pick up and understand. Document your process for setting up a SPFx framework project Use a consistent folder structure. Detail your naming conventions for projects and SPFx extensions/webparts. Setup configuration. Setup tslint.config

Tip: Setup your projects in a consistent way Example folder structure src common components images interfaces services styles extensions webparts

Tip: Create a core SPFx library Used to store Utility functions. Logging framework Property pane controls Services Promote code reuse. Increase development velocity. Reduce the number of bugs in your code. Consume via a NPM private repo or Github repository. Github = standalone repository Create a core SPFX library using the same process as creating a web part library. Use the yeoman generator.

Demo: How to build a Core SPFx library In this demo we are going to use Azure Dev Ops (used to be Visual Studio Team Services) and its Packaging feature. This allows us to host NPM / NuGet packages which can be reused across projects. I have already set this up and can see it here: https://ithinksharepoint.visualstudio.com/iThink%20SharePoint/_packaging?feed=i365&_a=feed We would use the yeoman generator to scaffold our reusable component library. Setup src/scripts folder Add npm-postinstall.js script to folder Update package.json to have prepublish and postinstall scripts "prepublish": "npm run build", "postinstall": "node ./src/scripts/npm-postinstall.js", Publish your repo to Visual Studio Team Services or GitHub Setup .npmrc file in root of project. Get your registry url from Visual Studio: https://ithinksharepoint.visualstudio.com/iThink%20SharePoint/_packaging?feed=i365&_a=feed registry=https://ithinksharepoint.pkgs.visualstudio.com/_packaging/i365/npm/registry/ always-auth=true Add the following text to .npmrc registry=https://[tenantname].pkgs.visualstudio.com/_packaging/[npm-registry-name]/npm/registry/ npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false vsts-npm-auth -config .npmrc This will get new credentials to connect to the npm feed within VSTS. Before we publish lets put something into our repo which we can use. A Logging Framework. Publish by changing package.json private = false Check version number and then publish. Generally I use –1 for the first published alpha / beta version e.g. 0.0.1-1 Use npm publish Notice how the code gets run to compile and bundle the library. We then see + i-365-spfx-core@0.0.1-alpha Refresh the screen and we can see the reusable library. To use the reusable library. Switch to your SPFx project. Need to setup access to the Azure DevOps npm repository. To save time we are going to copy and paste from reusable library We then install like we would for any other npm package. npm install i365-spfx-core@0.0.1-1 --save Notice how the script is run and creates a set of folders, giving a consistent project directory structure. However, we do not having anything in the reusable library. So lets add a component that might be useful to us. A component to Log stuff to the browser console. Add common folder Add underneath the following folders: - components folder - images folder - interfaces folder - services folder styles folder Copy logging into services Copy utiltities folder into common directory Need to install some dependencies. @pnp/sp Npm install @pnp/common @pnp/sp @pnp/odata @pnp/logging –save Lets try and compile: npm run build Up issue package version and publish npm version prerelease Version now 0.0.2-1 Publish with npm publish Consume updated reusable library: Npm install i365-spfx-core –save Now we can use for example the logging component. For example: SiteHubCentralWebParts.ts import {Logger} from 'i365-spfx-core/src/common/services/logging’; But wait other libraries have a much nicer way to and use things like @Microsoft/sp-core-library. How do we do that? So we need to create an index of components and tell the consuming code about where that index is. This is done within the /src/index.ts file from here we can expose the components that we want to. We are using export keyword and referring to another index file for each area. Add the following to index.ts // Export the logging framework into the spfx core. export * from "./common/services/logging"; export * from "./common/services/sharePointDataService"; export * from "./common/utilities/UrlUtility"; Also we need to tell the consumers of the package about this index file and typings plus which folders to include in the package. This is done within package.json "main": "./lib/index.js", "types": "./lib/index.d.ts", "files": [ "lib/", "src/", "README.md" ], Up issue version number and publish Version now 0.0.1-2 Now we can reference things a bit more easily. import { Logger } from 'i365-spfx-core’; Within in public render(): void { Logger.verbose("rendering web part"); The node-module folder is a bit cleaner now.

Tip: Use out of the box for inspiration Take inspiration from how Microsoft build and design SPFx web parts. Get to know them. See how they function. Copy their approach to make your web part easier to use.

Demo: Use out of the box for inspiration https://ithinksharepointltd.sharepoint.com/sites/dev/SitePages/SharePoint-Framework-Talk.aspx For example: The image gallery web part Create a new web part and show the layout options. Show how the images are all displayed to the user so they see what they are getting. Add link is on there. When you add something you can move the image to change the order, edit the item and delete. Use these ideas and copy them in your webparts to provide a consistent experience for your users that mimics the same approach as SharePoint. This makes them easier to use!

Tip: Guide your user When a user adds your web part to the page, what happens? Guide them, give them pointers, make it easy for them to configure your webpart. Use the Placeholder control https://sharepoint.github.io/sp- dev-fx-controls- react/controls/Placeholder/ For example: The image gallery web part Create a new web part and show the layout options. Show how the images are all displayed to the user so they see what they are getting. Add link is on there. When you add something you can move the image to change the order, edit the item and delete. Use these ideas and copy them in your webparts to provide a consistent experience for your users that mimics the same approach as SharePoint. This makes them easier to use!

Tip: Get to know your libraries Understand React‘s principles Run through the tutorial. https://reactjs.org/tutorial/tutorial.html Lodash - https://lodash.com/ Read the documentation clonedeep get update SPFX libraries Property Pane - https://github.com/SharePoint/sp-dev-fx-property-controls Reusable controls - https://github.com/SharePoint/sp-dev-fx-controls-react React principles State is pushed down Events pushed back Lodash Some great functions SPFX libraries Learn from others Read code

Tip: Use a Content Delivery Network Why? Two options Azure CDN Office 365 CDN How to choose? The SharePoint Framework JavaScript needs to be stored somewhere. You could store the code in the SharePoint site where the app is being deployed. However, this causes problems as now you have to update the code via SharePoint and that is not as straight forward. Additionally as your app is used in other sites then there are duplicates of the same code being deployed and this all needs to be managed when making updates. To simplify things use a content delivery network (CDN). We are going to discuss two options for CDN: Azure CDN Office 365 CDN The Azure CDN is made of a storage container and an endpoint. It is setup within Azure and it separate from Office 365. The Office 365 CDN uses a SharePoint document library and turns that into the storage mechanism for serving up your SPFx files. It is configured at the tenant level using PowerShell. https://docs.microsoft.com/en-us/office365/enterprise/use-office-365-cdn-with-spo If you are building SharePoint Framework for consumption by multiple Office 365 tenants then use an Azure CDN. Then you only have to manage one set of assets. If you are building SharePoint Framework for consumption within one Office 365 tenant then use either. However, I have a preference for the Azure CDN. The reasons are: It is easier to manage Has greater functionality There is just one place which needs to be updated rather than multiple places if using Office 365 CDN or just SharePoint. Here we created a CDN called I365-spfx-talk which uses a blob storage account called i365spfxtalkcdnstore An endpoint of https://i365-spfx-talk-cdn.azureedge.net was created. Storage account

Tip: Version your webparts When things go wrong with code, how do you know if the customer is running the latest code? Versioning your web parts helps you understand Default SPFx project configuration deployment get messy quickly particularly when deploying to CDNs.

Demo: Version your webparts Switch repos to master (discard changes) Publish i365-spfx-core to npm Install i365-spfx-core to webpart. Explain the problem. We have a SharePoint Framework web part. We are using an Azure CDN. Lets build and deploy the latest version. So what happens when we build and deploy? Each file has its own guid appended. Things get messy… lets show you what happens without version control. We are going to: Deploy Web Part Change and deploy again Show the Storage Account Container To deploy do this Delete temp folder contents Delete dist folder contents Use gulp bundle –ship Show the contents of the temp/deploy folder Gulp deploy-azure-storage Show the files in Azure CDN Now make a change. Change the icon in SiteHubCentralWebPart.manifest.json to Globe Delete temp/deploy folder Show the files in Azure CDN. So now we have overwritten 2 of the 3 previous files, we have created a new strings file. Which one is for the old version of the web part and which is for the new? So to handle this lets setup some versioning. Delete existing files in temp/deploy. Update the configuration: Setup with a configuration of: config/copy-assets.json has a deployCdnPath of temp/deploy/v1-0-0-0/ Write-manifest.json has a cdnBasePath of /i365-spfx-sitehubcentral-webpart/v1-0-0-0/  Gulp bundle --ship Runs and creates files in /temp/deploy/v1-0-0-0 successfully   Successfully runs and uploads folder with files into sub folder v1-0-0-0. Gulp package-solution --ship Repeat with changes for v1-0-0-0 Actually we can make these easier with the help of gulp. Remove the comments from build.rig.addPreBuildTask

Tip: Do not use hardcoded strings The SharePoint Framework project starts you down the right path. Do not hard code string values into your code, use the provided framework.

Tip: Default configuration via properties Use the webpart manifest json file to set property defaults. Configure the webpart properties within the render() function.

Tip: simplify getPropertyPaneConfiguration() This is called when a user clicks on the edit webpart button. Out of the box it is hard to read.

Tip: simplify getPropertyPaneConfiguration() Break it down to simplify Now you can change what the property pane displays based on its state.

Tip: Optimise your production builds Key takeaways Use release builds (append –-ship to build tasks). Understand what is in the bundle. Webpack-bundle-analyzer Microsoft Guidance https://docs.microsoft.com/en- us/sharepoint/dev/spfx/toolchain/optimize-builds-for-production Use release builds by appending –-ship to the tasks. gulp bundle --ship Webpack-bundle-analyzer can be integrated into your gulp build tasks.

Tip: Keep up to date SharePoint Development Blog https://developer.microsoft.com/en-us/sharepoint/blogs/ SharePoint Dev PnP Community call Meeting Invite: http://aka.ms/sppnp-call. SharePoint Framework special interest group Meeting Invite: http://aka.ms/spdev-spfx-call. Microsoft Graph call Meeting Invite: https://aka.ms/microsoftgraphcall. Keep yourself up to date with what is going on. The SharePoint Development blog is a great resource. There are a number of Skype conference calls which give you the latest information. There are three which I will highlight: There are some great demos which you can use to improve your ideas/knowledge, additionally you get a lot of information in terms of the roadmap for the SharePoint Framework

Tip: Keep up to date Blogs Andrew Connell Chris O’Brien Elio Struyf http://www.andrewconnell.com/blog Chris O’Brien https://www.sharepointnutsandbolts.com/ Elio Struyf https://www.eliostruyf.com/ Stefan Bauer https://n8d.at/blog/ Vardhaman Deshpande https://www.vrdmn.com/ Keep yourself up to date with what is going on. The SharePoint Development blog is a great resource. There are a number of Skype conference calls which give you the latest information. There are three which I will highlight: There are some great demos which you can use to improve your ideas/knowledge, additionally you get a lot of information in terms of the roadmap for the SharePoint Framework

Questions? Integrate Gulp Tasks into SharePoint Framework toolchain https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/integrate-gulp-tasks-in-build-pipeline Extend Webpack into SPFx toolchain https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline Optimising Builds for Production: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/optimize-builds-for-production Provision SharePoint Assets https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/provision-sharepoint-assets

Thanks Twitter: @simondoy Email: simon@ithinksharepoint.com Blog: https://blog.simondoy.com