1. Tips for SharePoint Framework development
Simon Doy

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

3. 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.

4. Simon Doy iThink SharePoint
Office 365, Microsoft Azure & SaaS Solution Architect
Blog:
Introduction
Who is Simon?
Contact details
What do you do?
How did you get into SharePoint and Office 365?
Simon Doy iThink SharePoint

5. The Tips

6. 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

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

8. 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.

9. 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:
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:
registry=
always-auth=true
Add the following text to .npmrc
registry=
npm install -g vsts-npm-auth --registry --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
Use npm publish
Notice how the code gets run to compile and bundle the library.
We then see +
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 --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
–save
Lets try and compile:
npm run build
Up issue package version and publish
npm version prerelease
Version now
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
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
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.

10. 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.

11. Demo: Use out of the box for inspiration
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!

12. 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
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!

13. Tip: Get to know your libraries
Understand React‘s principles
Run through the tutorial.
Lodash -
Read the documentation
clonedeep
get
update
SPFX libraries
Property Pane -
Reusable controls -
React principles
State is pushed down
Events pushed back
Lodash
Some great functions
SPFX libraries
Learn from others
Read code

14. 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.
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 was created.
Storage account

15. 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.

16. 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/v /
Write-manifest.json has a cdnBasePath of /i365-spfx-sitehubcentral-webpart/v /
 Gulp bundle --ship
Runs and creates files in /temp/deploy/v successfully
Successfully runs and uploads folder with files into sub folder v
Gulp package-solution --ship
Repeat with changes for v
Actually we can make these easier with the help of gulp.
Remove the comments from build.rig.addPreBuildTask

17. 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.

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

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

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

21. 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
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.

22. Tip: Keep up to date SharePoint Development Blog
SharePoint Dev PnP Community call
Meeting Invite:
SharePoint Framework special interest group
Meeting Invite:
Microsoft Graph call
Meeting Invite:
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

23. Tip: Keep up to date Blogs Andrew Connell Chris O’Brien Elio Struyf
Chris O’Brien
Elio Struyf
Stefan Bauer
Vardhaman Deshpande
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

24. Questions? Integrate Gulp Tasks into SharePoint Framework toolchain
Extend Webpack into SPFx toolchain
Optimising Builds for Production:
Provision SharePoint Assets

25. Thanks Twitter: @simondoy
Blog: