Introduction to SharePoint Framework (SPFx)

Transcript

1. Introduction to the SharePoint Framework John Bristowe Manager, Developer Relations
6. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 6
7. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 7
8. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 8
9. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 9
10. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 10 SharePoint Framework (SPFx) § Front-end based development model for Pages and Parts § Supports front-end libraries and tools § Tooling • Node.js, Yeoman, Gulp, TypeScript, Visual Studio (Code) § Frameworks • React, Angular 1.*, Knockout
11. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 11 Demo “Hello, SPFx!”
12. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 12 Setup 1. Install Node.js LTS 2. Requirement: npm v3+ 3. Requirement: code editor (i.e. Visual Studio Code) 4. Windows: install windows-build-tools 5. Ubuntu/Fedora: install compiler tools 6. Install Yeoman and gulp $ npm -g install npm@next $ npm install --global --production windows-build-tools $ npm i -g yo gulp
13. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 13 Setup (Continued) 7. Install Yeoman SharePoint generator Optional tools: Fiddler, Postman, Cmder for Windows, Oh My Zsh for Mac, and Git source control tooling $ npm i -g @microsoft/generator-sharepoint
14. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 14
15. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 15 New! SharePoint Workbench § New developer design surface § Enables you to quickly preview and test web parts without deploying them in SharePoint § Includes the client-side page and the client-side canvas in which you can add, delete and test your web parts in development
16. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 16 New! SharePoint Workbench (Continued) § Test your changes immediately (even in offline mode) § Uses gulp-connect to serve with LiveReload § Built-in mobile preview capabilities
17. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 17 Demo Create a simple web part on SPFx
18. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 18 Client-side Web Part Build Flow
19. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 19 Demo SPFx web part with Angular 1.x and ngOfficeUIFabric
20. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 20
21. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 21 JavaScript Core Component import pnp from "sp-pnp-js" ... pnp.sp.web.select("Title").get().then(() => ...); $ npm install sp-pnp-js --save-dev Add the npm package to your project Import the root object and start interacting with the SharePoint REST API $ bower install sp-pnp-js Add the package from bower
22. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 22 Roadmap § Developer releases on a 7-10 day cadence • August 17, 2016: Drop 1 • September 1, 2016: Drop 2 • September 14, 2016: Drop 3
23. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 23
24. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 24
25. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 25