Waldek Mastykarz gave a presentation on building solutions using the SharePoint Framework. Some key points included storing project dependencies using npm, loading frameworks from URLs instead of bundling them, using a services library to share code between parts, and leveraging SharePoint Framework services. The presentation provided an overview of best practices for building solutions on the SharePoint Framework.

1. 4th of March 2017
@MS HQ Munich
Deep-dive building solutions on the
SharePoint Framework
Waldek Mastykarz, Rencore, Microsoft MVP #SPSMUC15

3. Deep-dive building
solutions on the
SharePoint Framework
rencore.com

4. Store project dependencies
$ npm install angular --save
package.json
{
dependencies: {
"angular": "^1.5.8"
}
}

5. Don’t bundle frameworks. Load from URL instead
config/config.json
{
externals: {
"angular": {
"path": "https://cdn.com/…/angular.min.js",
"globalName": "angular"
}
}
}

6. Don’t guess the JavaScript framework format
http://rencore.com/spfx/script-
check/

7. Use one-time bootstrap
MyWebPart.ts
export default class ToDoWebPartWebPart extends
BaseClientSideWebPart<IToDoWebPartWebPartProps> {
public render(): void {
if (this.renderedOnce === false) {
// one-time bootstrap
}
}
}

8. Use SharePoint Framework libraries to share code
react-recentdocuments-service.manifest.json
{
"$schema": "../../../node_modules/@microsoft/sp-module-
interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponent
ManifestSchema.json",
"id": "69b1aacd-68f2-4147-8433-8efb08eae331",
"alias": "DocumentsService",
"componentType": "Library",
"version": "0.0.1",
"manifestVersion": 2
}

9. Use SharePoint Framework services
DocumentsService.ts
import { ServiceScope, ServiceKey } from '@microsoft/sp-core-library';
import { Promise } from 'es6-promise';
export class DocumentsService implements IDocumentsService {
public static readonly serviceKey: ServiceKey<IDocumentsService> = Se
rviceKey.create<IDocumentsService>('contoso:DocumentsService', DocumentsS
ervice);
constructor(serviceScope: ServiceScope) {
}
public getRecentDocument(): Promise<IDocument> {
}
public getRecentDocuments(startFrom: number = 0): Promise<IDocument[]
> {
}
}

10. Next steps
• Get started at aka.ms/spfx
• Build better solutions with SPCAF: rencore.com/spfx
• Share your feedback at aka.ms/spfx-issues
rencore.com

11. Thank you!

12. rencore.com
Waldek Mastykarz
Office Development MVP
https://blog.mastykarz.nl
@waldekm
https://www.rencore.com