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.