The document discusses modern approaches to SharePoint development. It outlines traditional development models for SharePoint like full trust solutions and sandboxed solutions, as well as more modern client-side approaches using the SharePoint Framework, Add-ins, and Microsoft Graph API. The document recommends transitioning to client-side development using these modern tools and the new SharePoint Framework for building web parts that work across SharePoint platforms. It provides an overview of Microsoft's roadmap for SharePoint development in 2017, focusing on continued evolution of the SharePoint Framework and client-side capabilities.

1. UNCOVERING THE
LATEST IN SHAREPOINT
DEVELOPMENT
http://pxml.ly/EO-SharePoint-Dev
ERIC OVERFIELD | PixelMill
Microsoft MVP & RD

2. ERIC OVERFIELD
President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Microsoft Regional Director
Published SharePoint Author
SharePoint Community Organizer & Contributor @ericoverfield
ericoverfield.com

3. PixelMill is a modern SharePoint Design Agency based in Northern California. On the forefront of
web design trends since 1998, PixelMill provides innovative collaboration portals to enhance the
user adoption of SharePoint intranets, extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com

4. 1. Traditional and Available Development Models
2. Modern Development Methodologies
3. Development Strategies Roadmap
4. Your Best Development Pathways
OVERVIEW

5. Traditional SharePoint Development
Models and How to Use Them

6. @ericoverfieldericoverfield.com
Full Trust farm based solutions for SharePoint On Premise
• An On-premise option when near full control is desired
• Available option since SharePoint 2007 through now
• Completely custom webparts, site templates, timer jobs, anything with custom code
• Requires Visual Studio
• And a development environment with SharePoint Server
• Common development language: C# - Server side development
• Installed via PowerShell or via Central Admin to farm
• Will recycle Service Application upon installation, i.e. will take your SharePoint site down
• Full trust usefulness
• In an on-prem use case, does provide full control and most any access you may need
but is not a cloud ready option
FULL TRUST SOLUTIONS – SHAREPOINT ON-PREM

7. @ericoverfieldericoverfield.com
Sandbox solutions for SharePoint 2010+*
• On-premise and cloud available*
• Introduced with SharePoint 2010 - became the default mode but could be overridden in
VS
• In On-prem, may include custom compiled code, SharePoint Only – declarative only
• Requires Visual Studio
• And a development environment with SharePoint Server
• C# for code development, otherwise XML for declarative only (cloud ready) solutions
• Installed via PowerShell, Central Admin or Site Settings
• Will not recycle Service Application upon installation*
• Sandbox usefulness
• Limited. Reasonable option for asset installation, unknown long term support in cloud.
Better models exist
SANDBOX SOLUTIONS – ON-PREM / CLOUD*

8. @ericoverfieldericoverfield.com
ADD-IN MODEL – CLOUD READY / ON-PREM*
Add-in (App) model for SharePoint 2013+
• On-premise and cloud available*
• First isolated, cloud ready customization option for SharePoint 2013+
• Add-in must be hosted somewhere – SharePoint Hosted or Provider Hosted
• Requires Visual Studio 2013+
• And a development environment, SPO offers a “developer site” site template
• C# common for server side code, or just JavaScript for SharePoint hosted
• Includes marketplace distribution
• Microsoft managed store to “sell” applications
• SharePoint Add-ins usefulness
• Code Isolation
• External distribution model – Office store

9. @ericoverfieldericoverfield.com
SharePoint Hosted Add-ins
• Add-in itself is hosted within SharePoint
• Can contain lists, web parts (OOTB), workflows, custom pages
• Custom code must be contained within JavaScript ran client-side
• Does not require Azure or other external hosting of assets
Provider Hosted Add-ins
• May contain all aspect of SharePoint hosted, but also include server side code
• Used when business logic must be server-side code
• Often used for larger applications when JavaScript is not enough
• Does require a remote service to host logic, i.e. not SharePoint
SHAREPOINT ADD-IN STORAGE TYPES

10. @ericoverfieldericoverfield.com
All of these models are not dead – yet
• They have their purposes, just know why you are using classic models
• Full Trust – you are on prem, are not considering cloud (you sure?) and need
deep, cross-farm integration
• Sandbox – Light touch, cloud friendly when includes “no code”
• Add-ins – Cloud ready with isolation, with a marketplace
TRADITIONAL METHODOLOGIES BEST PRACTICES

11. @ericoverfieldericoverfield.com
DEVELOPMENT MODELS VS SHAREPOINT
Method SharePoint
2007
SharePoint
2010
SharePoint
2013
SharePoint
2016
SharePoint
Online
Full Trust
Sandbox
w/server side code
Sandbox
declarative only / “no code”
Add-in model
SharePoint hosted
Add-in model
Provider hosted
*

12. FUTURE DEVELOPMENT MODEL:
CLIENT SIDE APPLICATIONS -
OPEN SOURCE TOOLCHAIN

13. @ericoverfieldericoverfield.com
Use client-side rendering to create apps
• Based on JavaScript or derivatives to build applications all within the browser
• Interact with external data using remote api’s
• SharePoint Rest API
• Microsoft Graph
• Webhooks…
• Frameworks and Libraries have been built to assist
• React, Angular, Knockout, SharePoint Framework (SPFx)
• Traditional SharePoint methods include Script Editor Webpart, JSLink and more
Transfer HTML rendering responsibility to browser rather than server
CLIENT SIDE APPLICATIONS

14. CLIENT-SIDE RENDERING BUILDING BLOCKS

15. @ericoverfieldericoverfield.com
SharePoint Rest API provides access to data – SharePoint 2013+
• A “rest-ful” service to work with SharePoint data via http requests
• Similar to client side object model
• Useful in JavaScript to manipulate SharePoint Data
• To return JSON, add header: "content-type": "application/json;odata=verbose"
Example: Get a SharePoint List
• GET: https://”tenant”.sharepoint.com/sites/demogroup/_api/lists/getbytitle('site pages')
Example: Specific returned data
• GET: https://”tenant”.sharepoint.com/sites/demogroup/_api/lists/getbytitle('site pages')?select=Title
SHAREPOINT REST API

16. @ericoverfieldericoverfield.com
Microsoft Graph API – a unified Office 365 API
• Access the Microsoft Graph in your custom applications
• For Office 365 only
• Requires a registered App ID and secret
• Microsoft Application Registration portal - https://apps.dev.microsoft.com/
MICROSOFT GRAPH API
Endpoints include:
• General endpoint format:
• {verb}: https://graph.microsoft.com/{version}/{resource}?query-parameters
• Example: Get information on “me”:
• GET: https://graph.microsoft.com/v1.0/me/
• Example: Get a specific SharePoint site:
• GET: https://graph.microsoft.com/v1.0/sites/demogroup/

17. @ericoverfieldericoverfield.com
MICROSOFT GRAPH API ACCESS AND DATA
Source: https://graph.microsoft.io/en-us/docs

18. @ericoverfieldericoverfield.com
Office UI Fabric
• A framework for building custom Office 365 / SharePoint front-end experiences
• Open source: https://github.com/OfficeDev/office-ui-fabric-core
• https://dev.office.com/fabric
• Primary pillars
• Core: Styles / CSS
• JavaScript: Interactions
• React: UI integration
• AngularJS: open source project
OFFICE UI FABRIC

19. @ericoverfieldericoverfield.com
Office UI Fabric
• Styles
• Typography - Segoe UI Font
• Color palette
• Responsive grid
• Animations
• Icons
• Office’s official product icons
• Product and document symbols
OFFICE UI FABRIC – WHAT WE GET
• Components
• Navigation
• Input containers
• Content blocks
• People picker, persona card and more

20. @ericoverfieldericoverfield.com
SharePoint Webhooks
• Subscribe to SharePoint events
• Secure mechanism to be notified via http request when SharePoint event occurs
Azure Functions
• Event based, serverless architecture
• Custom server side code hosted in Azure that is run on demand
• Register an endpoint, then call on demand, only billed when processed used
Azure Apps
• Create a custom external application in Azure using architecture of choice
• Provide endpoints to SharePoint
• App may do anything you want, similar to Provider hosted Add-in, yet full control
EVEN MORE TOOLS

21. @ericoverfieldericoverfield.com
Open source toolchain
• Method to create web interfaces using open source, command line driven toolchain
A NEW BUILD METHODOLOGY

22. THE SHAREPOINT WAY:
SHAREPOINT FRAMEWORK

23. @ericoverfieldericoverfield.com
A page and web part model with full support for client-side SharePoint development
• Uses client-side rendering and previously discussed models
• Open source tooling / toolchain
• nodeJS, npm, Yeoman, gulp, TypeScript, webpack and more
• Easy integration with SharePoint data
• Rest API wrapper classes
• Native Microsoft Graph API in works
• Currently includes webparts
• Webparts work in Classic and modern pages
• Extension coming soon
• Available in the cloud and On-prem*
• Generally available on SharePoint Online
• On-prem availability scheduled for second half 2017
WHAT IS THE SHAREPOINT FRAMEWORK?

24. @ericoverfieldericoverfield.com
Visual Studio Extension for SharePoint Framework
• Open source project providing a VS Extension that wraps SPFx command line
• Big thanks to Eric Shupps and Paul Schaeflein for making this happen
• https://dev.office.com/blogs/introduction-to-visual-studio-extension-for-sharepoint-framework
• https://marketplace.visualstudio.com/items?itemName=SharePointPnP.SPFxProjectTemplate
• https://github.com/SharePoint/sp-dev-fx-vs-extension
SHAREPOINT FRAMEWORK FOR VISUAL STUDIO
USERS

25. Demo
SHAREPOINT FRAMEWORK
AND CLIENT SIDE APPLICATIONS

26. ROADMAP

27. @ericoverfieldericoverfield.com
SHAREPOINT DEVELOPMENT ROADMAP – CY 2017
Spring / Summer 2017
• SharePoint WebHooks GA
• SharePoint Framework GA
• SharePoint Sites on Microsoft Graph GA
• Web part connection Preview
• SharePoint Framework Extensions Preview
Fall / Winter 2017
• SharePoint Extensions GA
• Web part connection GA
• Native Graph access from SharePoint Framework
• Application lifecycle management (ALM) APIs
• SharePoint Framework Web Parts on-premises as part of FP2

28. @ericoverfieldericoverfield.com
Stay Current
• If you haven’t already, transition to client-side rendering
• Offload custom server side processes to external service: Not on SharePoint
Learn Open source toolchain
• Command line is your friend, provides more open solutions
• VS option is available as crutch for SPFx
SharePoint Online and SharePoint 2016 environments
• All interface customizations should be SPFx webparts
• Remember SPFx works on classic and modern pages
ERICS RECOMMENDATIONS

29. REVIEW
1. Traditional and Available Development Models
2. Modern Development Methodologies
3. Development Strategies Roadmap
4. Your Best Development Pathways

30. RESOURCES

31. RESOURCES
• SharePoint Add-ins overview
https://dev.office.com/sharepoint/docs/sp-add-ins/sharepoint-add-ins
• Add-ins for SharePoint – Office Store
https://store.office.com/en-us/appshome.aspx?productgroup=sharepoint
• Get to Know the SharePoint REST Service
https://dev.office.com/sharepoint/docs/sp-add-ins/get-to-know-the-sharepoint-rest-service
• Microsoft Graph API for Developers
https://developer.microsoft.com/en-us/graph/
• Using the Microsoft Graph API
https://developer.microsoft.com/en-us/graph/docs/concepts/use_the_api
• Working with SharePoint sites in Microsoft Graph
https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/resources/sharepoint
• Office UI Fabric
https://dev.office.com/fabric
• Azure Functions
https://azure.microsoft.com/en-us/services/functions/
• SharePoint Webhooks
https://dev.office.com/sharepoint/docs/apis/webhooks/overview-sharepoint-webhooks
• SharePoint Framework Overview
https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
• Visual Studio Extension for SharePoint Framework
https://dev.office.com/blogs/introduction-to-visual-studio-extension-for-sharepoint-framework

32. THANK YOU
UNCOVERING THE
LATEST IN SHAREPOINT
DEVELOPMENT