Uncovering the Latest in SharePoint Development
Download as PPTX, PDF1 like522 views
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.
Uncovering the Latest in SharePoint Development
- 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
Editor's Notes
- #2: The one point: Move to CSR!!! Slides will be available from blog and twitter Look at current dev models for SharePoint, around 200 level, not getting deep, that is for other sessions, much more of an overview https://unsplash.com/photos/D46mXLsQRJw Intro: in early 80's my mom brought home a compaq portable, anyone remember those small 9" green screens? Dos, Basic, vars to hello "var", BBS in 90's. Thick books. Always new things to discover and as soon as you know something, it changes.
- #20: https://dev.office.com/fabric#/get-started
- #24: http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview Key features of the SharePoint Framework include: Runs in the context of the current user and connection in the browser. There are no iFrames. The controls are rendered in the normal page DOM. The controls are responsive and accessible by nature. Enables the developer to access the lifecycle - including, in addition to render - load, serialize and deserialize, configuration changes, and more. It's framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more. The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp. Performance is reliable. End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites. Solutions can be deployed in both classic web part and publishing pages and modern pages.
- #28: From: https://channel9.msdn.com/Events/Build/2017/B8032