a deep dive into development using sharepoint framework

A deep dive into development using SharePoint FrameworkVesa Juvonen,Microsoft

Waldek MastykarzRencore

Code samplesGuidance documentationMonthly community callsCase Studies

ThemesSharePoint FrameworkSharePoint add-insOffice 365 APIs, Microsoft GraphRemote API models with SharePoint development

Sharing is caring…

http://aka.ms/SharePointPnP

aka.ms/OfficeDevPnPaka.ms/

SharePointPnPhttps://github.com/OfficeDev/PnPhttps://github.com/OfficeDev/PnP-Sites-Corehttps://github.com/OfficeDev/PnP-PowerShellhttps://github.com/OfficeDev/PnP-Toolshttps://github.com/OfficeDev/PnP-JS-Corehttps://github.com/OfficeDev/PnP-Guidancehttps://github.com/OfficeDev/PnP-Transformationhttps://github.com/OfficeDev/PnP-OfficeAddInshttps://github.com/OfficeDev/PnP-Provisioning-Schema

https://aka.ms/sppnp-videos

https://aka.ms/sppnp-msdn

https://aka.ms/sppnp-community

https://aka.ms/sppnp-partner-pack

@OfficeDevPnP

http://aka.ms/sppnp-callhttp://aka.ms/sppnp-jssig

https://docs.com/OfficeDevPnP

Microsoft TechCommunity

SharePoint Extensibility PrinciplesBuild long-term, value-added services for enterprise mobility

To provide an Application Development Framework that aligns 1st and 3rd parties

To build industry leading client side solutions On-Premises and in the Cloud

Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device

Principles

• Tooling• Node.js• Yeoman• Gulp• TypeScript• Visual Studio (Code)

• Frameworks – Choose yours• React• Angular.js• Knockout • Etc.

Typical tooling for SharePoint Framework

Web stack tooling compared to classic MS tools

IIS Express

VS Project New <Template>

C#

MS Build

Client-side Web Part Build FlowInstall SharePoint

Generator

Scaffold SharePoint Web Part Project

Build Web Part Code

Test

Local

UAT / Pre-production

Package/Deploy

Available on Classic and Client-Side Pages

Package/Deploy

npm install generator-sharepoint -g

yo sharepoint

Code

gulp serve

workbench

gulp package-solution

gulp upload-cdn

Ship?

Release using app catalog*

manual upload of the app

“I want to use Visual Studio as my development platform, what now?”

DEMO

How to use Visual Studio with Node.js projects

DEMO

Using SharePoint Framework with React or Angular (1.x)

aka.ms/SharePointPnP

https://github.com/SharePoint/sp-dev-docshttps://github.com/SharePoint/sp-dev-fx-webpartsMore to come…

https://aka.ms/sppnp-videos

• SharePoint Framework tutorials• Preparing for SharePoint Framework

what should I learn• Converting existing JS apps to SP Fx• Integrating Angular 1.x to SP Fx• Building simple SP Fx Web Part• Building Angular SP FX web parts

@OfficeDevPnP

http://aka.ms/sppnp-callhttp://aka.ms/sppnp-jssig

https://aka.ms/sppnp-communityMicrosoft TechCommunity

• PnP is developer community for SharePoint

• Target is to embrace sharing and help community to adapt new technologies

• Community driven with community contributions

“Sharing is caring!”

Q&A

© 2016 Microsoft Corporation. All rights reserved.