1. UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley - @mrackley

2. © SPintersection. All rights reserved. http://www.SPintersection.com Agenda  What is Client Side Development  Options for Client Side Development  SharePoint UI  SharePoint Designer  No Code Sandbox Solutions  SharePoint Hosted Add-ins  Office 365 API’s

3. About Mark Rackley 20+ years software architecture and development experience Office 365 MVP, SharePoint Junkie since 2007 Event Organizer (SharePointalooza.org) Blogger, Writer, Speaker Bacon aficionado @mrackley www.SharePointHillbilly.com www.PaitGroup.com www.SharePointaLooza.org www.StratusForms.com

4. © SPintersection. All rights reserved. http://www.SPintersection.com What is Client Side Development  Code that executes in the client context and not on a server  Nothing is deployed to the server  Direct server access is not possible  Almost always involves JavaScript  Learn jQuery  Also need to know HTML, CSS  Becoming a more critical skill with the push to the cloud  Lots of third party libraries and frameworks to choose from

5. © SPintersection. All rights reserved. http://www.SPintersection.com Benefits of Client Side Development  Keeps you off the server  Less chance of causing server issues  Generally less of a learning curve  Perfect for improved UX and visuals  Deployment, maintenance, and upgrades can be less painful  Scripts run with same permissions as current user  Standards-based development with OData-compliant REST and CSOM  Cross-Platform development

6. © SPintersection. All rights reserved. http://www.SPintersection.com Disadvantages of Client Side Development  No server access  Can’t elevate permissions  Can’t interact with the file system  Cross domain calls can be cumbersome  Debugging can be painful  Performance can be an issue

7. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Designer  Can be used to edit and create Master Pages (avoid making changes to pages) Development / Deployment Process  Install SharePoint Designer (it’s free)  Open site in SharePoint Designer  Navigate to HTML file for master page  Make changes

8. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Designer  Benefits  Quick and easy  Create / Edit Master Pages without the Design Manager  Create / Edit Display Templates  Edit/Save scripts to document libraries

9. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Designer  Disadvantages  SharePoint Designer may be disabled for your tenant/farm  Maintenance is more difficult  Debugging is complicated  Harder to retract changes  Page is “customized” (don’t do it)  Over-branding can prevent you from getting new features  Not recommended as best practice to inject script

10. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint UI  Development directly in the SharePoint interface Development / Deployment Process  Write script in any text/code editor  Upload script to a document library  Add a content editor web part to a page  Link content editor web part to script

11. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint UI  Benefits  Easy way to get started with SharePoint Development  Easily retract functionality  Can easily interact with other web parts and elements on the page  Scripts are reusable on other pages  Deployment and maintenance for small projects is simple  Simple upgrade path  Perfect for simple pages changes  No special tools needed

12. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint UI  Disadvantages  Difficult to manage with a large team  Source code control  Deployment is a manual process

13. © SPintersection. All rights reserved. http://www.SPintersection.com No Managed Code Sandbox Solutions  Created in Visual Studio that creates a feature you can enable/disable Development / Deployment Process  Create Project in Visual Studio  Upload solution / Activate feature  Can deploy script across entire Site Collection (Custom Action)  Can link to script in content editor web part for a page

14. © SPintersection. All rights reserved. http://www.SPintersection.com No Managed Code Sandbox Solutions  Benefits  Works well with a team environment / source code control  Works well to deploy a script or css file across an entire Site Collection  jQuery  Can be used for light branding  Easy to retract functionality by disabling feature

15. © SPintersection. All rights reserved. http://www.SPintersection.com No Managed Code Sandbox Solutions  Disadvantages  Must develop on a SharePoint Server  Must use Visual Studio  Technically deprecated and not openly recommended by Microsoft

16. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Hosted App  Web application that exists in a separate context (App Web) from your SharePoint Site (Host Web) Development / Deployment Process  Create Project in Visual Studio  Deploy Solution to a Dev Site Collection for testing  Upload to App Catalog to use in other sites Get started creating SharePoint-hosted SharePoint Add-ins https://msdn.microsoft.com/en-us/library/office/fp142379.aspx

17. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Hosted App  Benefits  Works well with a team environment / source code control  Perfect for Single Page Applications (SPAs) and larger development efforts

18. © SPintersection. All rights reserved. http://www.SPintersection.com SharePoint Hosted App  Disadvantages  Development and deployment can more complicated  Cannot submit apps to the Microsoft Store that require full control  Overkill for many scenarios  App Parts are iFrames  Limited access to Host Web can be frustrating

19. © SPintersection. All rights reserved. http://www.SPintersection.com Office 365 API’s  REST interface to Office data (mail, calendars, files) using oAuth for authentication Development / Deployment Process  Create application (any web app or in SharePoint)  Configure application in Azure AD  Pass Client ID from AAD to Authorization Server for Access Token  Pass Access token to Office 365 REST API Display Events from an Outlook Calendar in SharePoint using Office 365 API’s http://www.markrackley.net/2015/10/23/display-events-from-an-outlook-calendar-in- sharepoint-using-office-365-apis/

20. © SPintersection. All rights reserved. http://www.SPintersection.com Office 365 API’s  Benefits  Integrate Office with your other applications  Create custom experiences within Office 365  Add an app to the waffle  Display  Works extremely well cross domain

21. © SPintersection. All rights reserved. http://www.SPintersection.com Office 365 API’s  Disadvantages  Must configure the application in Azure AD for authentication to work  Authentication can be frustrating  API is fairly limited (but being improved)