Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
4th of March 2017
@MS HQ Munich
Deep-dive building solutions on the
SharePoint Framework
Waldek Mastykarz, Rencore, Micros...
Deep-dive building
solutions on the
SharePoint Framework
rencore.com
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/…/a...
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<IToDoWebPartWebP...
Use SharePoint Framework libraries to share code
react-recentdocuments-service.manifest.json
{
"$schema": "../../../node_m...
Use SharePoint Framework services
DocumentsService.ts
import { ServiceScope, ServiceKey } from '@microsoft/sp-core-library...
Next steps
• Get started at aka.ms/spfx
• Build better solutions with SPCAF: rencore.com/spfx
• Share your feedback at aka...
Thank you!
rencore.com
Waldek Mastykarz
Office Development MVP
https://blog.mastykarz.nl
@waldekm
https://www.rencore.com
Deep-dive building solutions on the SharePoint Framework
Upcoming SlideShare
Loading in …5
×

Deep-dive building solutions on the SharePoint Framework

1,362 views

Published on

Learn how to get the most out of the SharePoint Framework.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Deep-dive building solutions on the SharePoint Framework

  1. 1. 4th of March 2017 @MS HQ Munich Deep-dive building solutions on the SharePoint Framework Waldek Mastykarz, Rencore, Microsoft MVP #SPSMUC15
  2. 2. Deep-dive building solutions on the SharePoint Framework rencore.com
  3. 3. Store project dependencies $ npm install angular --save package.json { dependencies: { "angular": "^1.5.8" } }
  4. 4. Don’t bundle frameworks. Load from URL instead config/config.json { externals: { "angular": { "path": "https://cdn.com/…/angular.min.js", "globalName": "angular" } } }
  5. 5. Don’t guess the JavaScript framework format http://rencore.com/spfx/script- check/
  6. 6. Use one-time bootstrap MyWebPart.ts export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> { public render(): void { if (this.renderedOnce === false) { // one-time bootstrap } } }
  7. 7. 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 }
  8. 8. 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[] > { } }
  9. 9. 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
  10. 10. Thank you!
  11. 11. rencore.com Waldek Mastykarz Office Development MVP https://blog.mastykarz.nl @waldekm https://www.rencore.com

×