www.expertpointsolutions.com

Real World Add-in Development for Office365 & SharePoint 2016

Brian Culver ● #SPSUtah ● February 25, 2017

About Brian Culver

SharePoint Solutions Architect for Expert Point Solutions in Houston, Texas.

Microsoft Certified Master (MCM) in SharePoint Brian has worked in the Information Technology industry for

since 1998 and he has been working with SharePoint since 2005. His deep expertise includes Azure, Office365, SharePoint, ASP.Net, SQL Server and Project Server. He has been involved in many large SharePoint implementations including Internet and Intranet sites, Partner Portals, Enterprise Content Management and Governance, and much custom application integration and development.

Author, Speaker and Blogger

Email : brian.culver(at)expertpointsolutions.comTwitter : @spbrianculverLinkedIn : https://www.linkedin.com/in/bculver Blog : http://blog.expertpointsolutions.com

Session Agenda

Reviewing the Landscape Full Trust vs Add-ins/Apps SharePoint Development Today Create a Hello World SharePoint-Hosted Add-in Adding AngularJS Create a Hello World Provider-Hosted Add-in Azure Web Sites Deployment Lifecycle Other considerations

Reviewing the Landscape

Things are changing quickly … very quickly

Reviewing the Landscape

Things are changing quickly … very quickly

Reviewing the Landscape

Things are changing quickly … very quickly Full Trust Server Side development is practically gone … don’t do it

Reviewing the Landscape

Things are changing quickly … very quickly Full Trust Server Side development is practically gone … don’t do it

Reviewing the Landscape

Things are changing quickly … very quickly Full Trust Server Side development is practically gone … don’t do it Client Side development is in

Reviewing the Landscape

Things are changing quickly … very quickly Full Trust Server Side development is practically gone … don’t do it Client Side development is in It’s a different kind of world … its a hybrid world

Reviewing the Landscape

Things are changing quickly … very quickly Full Trust Server Side development is practically gone … don’t do it Client Side development is in It’s a different kind of world … its a hybrid world

Reviewing the Landscape

Full Trust Solutions Only available on premise ~80% of third party products ~80% of Enterprise custom solutions

Image Source: https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/ Used with permission from Microsoft.

Reviewing the Landscape

Full Trust Solutions Only available on premise ~80% of third party products ~80% of Enterprise custom solutions

Sandbox Solutions Code-based sandbox solutions were deprecated back in 2014 Code-based sandbox solutions not supported in Office365 as of August 31st, 2016 Code-based sandbox solutions are also deprecated in SharePoint 2013 and in SharePoint 2016 Read this: https://msdn.microsoft.com/en-us/pnp_articles/sandbox-solution-transformation-guidance

Reviewing the Landscape

Full Trust Solutions Only available on premise ~80% of third party products ~80% of Enterprise custom solutions Sandbox Solutions Code-based sandbox solutions were deprecated back in 2014 Code-based sandbox solutions not supported in Office365 as of August 31st, 2016 Code-based sandbox solutions are also deprecated in SharePoint 2013 and in SharePoint 2016 Read this: https://msdn.microsoft.com/en-us/pnp_articles/sandbox-solution-transformation-guidance Apps and Add-ins SharePoint-Hosted Provider-Hosted SharePoint / Office 365 Dev Patterns & Practices (PnP) http://aka.ms/OfficeDevPnP SharePoint Framework (SPFx)

GA: Feb 23, 2017 SharePoint Framework has been released!!!!!

Image Source: https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/ Used with permission from Microsoft.

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!”

Slide from Vesa Juvonen and Waldek Mastykarz

SharePoint Development Today

Image Source: https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/ Used with permission from Microsoft.

SharePoint Development Today

SharePoint Development Today

Why? Isolated and Safer Using a different domain name for apps helps prevent cross-site scripting between apps and SharePoint sites. Each apps has its own unique subdomain which isolates it from SharePoint and other apps. Multi-tenant Works with subscription service which allows it to run on separate tenants. Multiple development possibilities (even non-MS stack) Open Source, jQuery, TypeScrypt, AngularJS, BootStrap, etc. Easier to deploy Easier to maintain and upgrade (Best lifecycle and versioning to date) Manageable (Office Store and Corporate Catalog) Cloud ready! Works in Office 365, SharePoint 2013 and SharePoint 2016. Integrates with just about any Cloud service and technology.

SharePoint Development Today

Develop an add-in whenever you can always The most important guidance we can give you is to develop a SharePoint Add-in instead of a farm solution or no-code

(declarative) sandboxed solutions whenever you can. SharePoint Add-ins have the following advantages over classic solutions:

Provide users with the easiest discovery, purchase, and installation process. Give administrators the safest SharePoint extensions. Provide you with the simplest marketing and sales system based on a Microsoft online add-in store. Maximize your flexibility in developing future upgrades. Maximize your ability to take advantage of your existing non-SharePoint programming skills. Integrate cloud-based resources in smoother and more flexible ways. Enable your extension to have permissions that are distinct from the permissions of the user who is running the add-in. Enable you to use cross-platform standards, including HTML, REST, OData, JavaScript, and OAuth. Enable you to take advantage of the SharePoint cross-domain JavaScript library to access SharePoint data.

Alternatively, you can use a Microsoft-provided secure token service that is OAuth-compatible or use digital certificates to get authorization to SharePoint data.

Source: https://msdn.microsoft.com/en-us/library/office/jj163114.aspx

SharePoint Development Today

Apps and Add-ins SharePoint-Hosted Provider-Hosted SharePoint / Office 365 Dev Patterns & Practices (PnP) http://aka.ms/OfficeDevPnP SharePoint Framework (SPFx)

GA: Feb 23, 2017 SharePoint Framework has been released!!!!!

SharePoint Framework (SPFx)

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Modern client-side development

Lightweight web and mobile

Powers our own experiences

Backward compatible

Supports open source tools and JavaScript web frameworks

Slides from Chakkaradeep (Chaks) Chandran Program Manager, Microsoft

SharePoint Framework Tooling

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Visual Studio Code

Atom

Sublime

and more … your choice!

Code Editors

React

Angular

Knockout

and more … your choice!

JavaScript Frameworks

Yeoman TemplatesGulp-based Build ProcessNodeJS/NPMSystemJSWebpackSASSTypeScript

Build Process & Tooling

Open source tooling

Slides from Chakkaradeep (Chaks) Chandran Program Manager, Microsoft

IIS Express

Project TemplatesC#

Server side tool comparison

MSBuild

Slides from Chakkaradeep (Chaks) Chandran Program Manager, Microsoft

Office UI Fabric

Front end experiences for SharePoint

Powers our own experiences

Available out of the box

Design web part seamlessly

Office UI Fabric React for rich set of reusable controls

Fonts, icons Colors

Components

Slides from Chakkaradeep (Chaks) Chandran Program Manager, Microsoft

Fabric and its sub-projects

All depending on the Core, all open source

Fabric CoreCore elements of the design language including icons, colors, type, and the grid

Fabric ReactRobust, up-to-date components built with the React framework.

Fabric JSSimple, visuals-focused components that you can extend, rework, and build on.

ngFabricCommunity-driven project to build components for Angular-based apps.

Fabric iOSNative Swift colors, type ramp, and components for building iOS apps.

Community built

Client-side Web Part Build Flow

Install 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

Slide from Vesa Juvonen and Waldek Mastykarz

SharePoint-Hosted SolutionOffice365 and SharePoint 2016

Demo

Provider-Hosted SolutionAzure Web Site with Office 365

Demo

SharePoint-Hosted SolutionSharePoint / Office 365 Dev Patterns

& Practices

Demo

SharePoint-Hosted SolutionSharePoint Framework (SPFx)

Demo

Closing Comments

**** Develop add-ins from here on out ****. Always strive to leverage the latest frameworks (#SPFx). Maximize your ability to take advantage of your existing non-

SharePoint programming skills. Be flexible and integrate cloud-based resources in smoother and more

flexible ways. Use cross-platform standards, including HTML, REST, OData,

JavaScript, and OAuth. Embrace Change … its already happened, and change will continue. Pay close attention to the Office Dev Patterns and Practices group. Oh yeah … don’t forget PowerShell. You won’t get far without it.

Other Sessions to See

Dev Kitchen Peek: SharePoint Framework Client-side extension Divya Darshan Jannu, IT Manager, ITC Infotech

Who Needs a Developer for Automated SharePoint Provisioning Eric Overfield (MVP), PixelMill

Everything you need to know about the Microsoft Graph as a SharePoint Developer

Sebastien Levert (MVP), Valo Intranet

Questions

??

?

?

Constructive Feedback Is Appreciated

Great information, but would like to have learned more about [Insert Topic]Brian – Your

presentation was …

Good Demos!

Thanks!

Thank you!

Brian Culver, MCMTwitter: @spbrianculver

E-mail:brian.culver(at)expertpointsolutions.com

Blog:http://blog.expertpointsolutions.com/

Slides:http://www.slideshare.net/bculver

Resources

Office 365 Roadmap http://fasttrack.microsoft.com/roadmap SharePoint / Office 365 Dev Patterns & Practices (PnP) http://dev.office.com/patterns-and-practices The SharePoint Framework—an open and connected platform https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/ Overview of the SharePoint Framework http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview SharePoint Framework Developer Preview Release https://dev.office.com/blogs/sharepoint-framework-developer-preview-release 5 differences between SharePoint Framework debug and release builds https://www.spcaf.com/blog/5-differences-sharepoint-framework-debug-release-builds/ Sandbox solution transformation guidance https://msdn.microsoft.com/en-us/pnp_articles/sandbox-solution-transformation-guidance