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