#5ffce46a-3059-40e6-8640-7b58abbca974

SharePoint Framework do's and don'tsWaldek MastykarzOffice Development MVP - Rencore

Store project dependencies$ npm i angular -S

package.json

{dependencies: {

"angular": "^1.5.8"}

}

Distribute release version of your web part$ gulp build --ship

Don’t bundle frameworks. Load from URL insteadconfig/config.json

{externals: {

"angular": {"path":

"https://cdn.com/…/angular.min.js","globalName": "angular"

}}

}

Don’t guess the JavaScript framework formathttp://rc-scripttype.azurewebsites.net/

Use one-time bootstrapMyWebPart.ts

export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {

public render(): void {if (this.renderedOnce === false) {

// one-time bootstrap}

}}

Use non-reactive pane with external dataMyWebPart.ts

export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {

protected get disableReactivePropertyChanges(): boolean {

return true;}

}

Provide preconfigured versions of your web partMyWebPart.manifest.json

{"preconfiguredEntries": [{

"title": { "default": "Events in Amsterdam" }"properties": { "location": "Amsterdam" }

},{

"title": { "default": "Events in The Hague" }"properties": { "location": "The Hague" }

}]}

Avoid using non-AMD scripts whenever possible

Benefit ofOffice 365 public CDN

Validate web part properties valuesMyWebPart.ts

PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel,onGetErrorMessage: this.validateDescription

})

private validateDescription(description: string): string {if (description && description.length > 20) {

return 'Description shouldn\'t be longer than 20 characters';}else {

return '';}

}

Log to console using the standard web part loggingMyWebPart.ts

import { Log } from '@microsoft/sp-client-base';

Log.verbose('HelloWorldWebPart', 'Rendering web part...', this.context.serviceScope);

Next steps:1. get SPFx

http://wldk.nl/spfx-setup2. check out docs

http://wldk.nl/spfx-docs3. check out samples

http://wldk.nl/spfx-samples4. latest SPFx content

http://wldk.nl/waldek-blog

Waldek MastykarzOffice Development MVPRencorehttp://www.rencore.comhttps://blog.mastykarz.nl@waldekm