4th of March 2017
@MS HQ Munich
Deep-dive building solutions on theSharePoint FrameworkWaldek Mastykarz, Rencore, Microsoft MVP #SPSMUC15
rencore.com
Deep-dive building solutions on the
SharePoint Framework
Store project dependencies
$ npm install angular --save
package.json
{dependencies: {
"angular": "^1.5.8"}
}
Don’t bundle frameworks. Load from URL instead
config/config.json
{externals: {
"angular": {"path": "https://cdn.com/…/angular.min.js","globalName": "angular"
}}
}
Don’t guess the JavaScript framework format
http://rencore.com/spfx/script-check/
Use one-time bootstrap
MyWebPart.ts
export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {
public render(): void {if (this.renderedOnce === false) {
// one-time bootstrap}
}}
Use SharePoint Framework libraries to share code
react-recentdocuments-service.manifest.json
{ "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "69b1aacd-68f2-4147-8433-8efb08eae331", "alias": "DocumentsService", "componentType": "Library", "version": "0.0.1", "manifestVersion": 2}
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> = ServiceKey.create<IDocumentsService>('contoso:DocumentsService', DocumentsService);
constructor(serviceScope: ServiceScope) { }
public getRecentDocument(): Promise<IDocument> { }
public getRecentDocuments(startFrom: number = 0): Promise<IDocument[]> { }}
rencore.com
Next steps• Get started at aka.ms/spfx• Build better solutions with SPCAF: rencore.com/spfx
• Share your feedback at aka.ms/spfx-issues
Please visit our sponsors who made this day possible!
Thank you!Rate this session with the event app
http://app.spsmuc.com
rencore.com
Waldek MastykarzOffice Development MVPhttps://blog.mastykarz.nl@waldekmhttps://www.rencore.com