Real World Add-in Development for Office365

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.com
Twitter : @spbrianculver
LinkedIn : 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

 Full Trust Server Side development is practically gone … don’t do it

 Client Side development is in

 Client Side development is in
 It’s a different kind of world … its a hybrid world

 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.

 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

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

aka.ms/SharePointPnP
https://github.com/SharePoint/sp-dev-docs
https://github.com/SharePoint/sp-dev-fx-webparts
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
https://aka.ms/sppnp-community
“Sharing is caring!”
Slide from Vesa Juvonen and Waldek Mastykarz

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.

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

 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)
m Chakkaradeep (Chaks) Chandran Program Manager, Microsoft

Open source tooling

IIS Express
Project Templates
Server side tool comparison

Office UI Fabric
Fonts, icons Colors

Fabric and its sub-projects
Fabric
ReactRobust, up-to-date
components built
with the React
framework.
Fabric JS
Simple, visuals-
focused components
that you can extend,
rework, and build on.
ngFabric
Community-driven
project to build
components for
Angular-based apps.
Fabric iOS
Native Swift colors,
type ramp, and
components for
building iOS apps.

Client-side Web Part Build Flow
Slide from Vesa Juvonen and Waldek Mastykarz

SharePoint-Hosted Solution
Office365 and SharePoint 2016
Demo

Provider-Hosted Solution
Azure Web Site with Office 365
Demo

SharePoint / Office 365 Dev Patterns
& Practices
Demo

SharePoint 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

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, MCM
Twitter:
@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

Real World Add-in Development for Office365

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Real World Add-in Development for Office365 (20)

More from Brian Culver (20)

Recently uploaded (20)

Real World Add-in Development for Office365

Editor's Notes