sharepoint fest chicago - from sharepoint to office 365 development

From SharePoint to Office 365 DevelopmentThe path to your new playground

#SPFest Chicago

By: Sébastien Levert

My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at

SÉBASTIEN LEVERT

SPEAKER | OFFICE DEV MVP | SUPER FUNNY

AGENDA

Mindset

Stop being a SharePoint developer and think more broadly with Web Development

BECOME A WEB DEVELOPER• SharePoint is a web platform, consider it like any other

• Think Cross-Platform and multiple devices

• Client-Side technologies is the future of web development, so it is with SharePoint and Office 365 Development

• Leverage APIs instead of direct connection to data

Living in the cloud will bring more innovation to the table

PRETEND TO LIVE IN THE CLOUD• Microsoft learns from the cloud to enhance their On-Premises

solutions, that is a great option for you too

• Think differently with cloud approaches and techniques

• Be up for the challenge by developing cloud-first for any solution

• Use Office 365 as your main development environment

The new Office 365 Development space will transform your habits

MOVE FAST• Stay up to date with newest and greatest web technologies

• Don’t hesitate to change and evolve with technology

• Be curious, try things, fail fast

• Embrace agile methodologies

AGENDA

Technology

Office Add-Ins give you a great integration in a tool used daily by Information Workers

INTEGRATION OPPORTUNITIES• Office Add-Ins• Cross-platform development

• PC or Mac / Web / Mobile (iOS, Android, Windows Phone)• Multiple core software where to integrate

• Word / Excel / PowerPoint / Outlook / Project / Visio• Connected experiences with HTML / JavaScript

• Using Visual Studio native experience• Using Open Source alternatives (yo office)

Modern SharePoint development will help you moving away from FTC solutions

INTEGRATION OPPORTUNITIES• SharePoint• Using modern integration UI hooks

• JavaScript / CSS injection based on Custom Actions• Using modern server hooks

• Webhooks with SharePoint to perform actions on list-based events• Using the SharePoint Framework

• Client-Side Framework to build on top of native SharePoint Experiences• Limited to Client-Side Webparts for the moment but more is coming !

Demo

_=+#####! ###########| ###/ (##|(@) ### ######| \ ###/ /###| (@) ####### ##| / ### /##|(@) ###########| **=+####!

Office 365 Apps gives you full control while keeping the user in its productivity context

INTEGRATION OPPORTUNITIES• Office 365 Apps• Leverage your Office 365 data by creating an external application• Technology-agnostic as you can develop in your preferred platform• Manage the lifecycle by communicating with Office 365 using its APIs• Integrate to the rest of the Office 365 ecosystem thanks to the App

Launcher

JavaScript is the preferred language for cloud integrations within the ecosystem

TECHNOLOGY STACK• JavaScript

• Using the latest versions of the standards• TypeScript• ECMAScript 5 & 6

• Using UI frameworks to build better applications faster• React• Knockout• AngularJS• Office UI Fabric

• Gaining access to all open source frameworks that will make you more productive• As a universal language to allow you to create code for the client & for the

server

NodeJS is now the de-facto language for web developers and their tooling

TECHNOLOGY STACK• NodeJS• As a web server to replace IIS• As a package manager to replace NuGet packaged• As a scaffolder to easily create files and folder structures to replace

Visual Studio• As a task runner to automate tasks of your development workflow• As a bundler to package your files to replace MSBuild• As a server-side language to perform data access or complex logics

.NET (and .NET Core) are very convenient ways to extend SharePoint and Office 365

TECHNOLOGY STACK• .NET (Core)• As a web server to host static files and DLLs• As a server-side language to perform data access or complex logics• As a server-side language to perform event-based actions• As the only valid way to communicate with a SharePoint environment

no matter where he is located with CSOM

Azure is the best companion to perform “server-side” actions and be fully compliant with the Office 365 development Best Practices

TECHNOLOGY STACK• Microsoft Azure

• Leverage the App Service components• Azure Functions to perform on-demand access to Office 365 data and to complete the

SharePoint webhooks story• Web Apps to host HTML / JavaScript files or server side components like Web APIs

• Leverage the Content Delivery Network component to distribute your assets• Leverage Azure AD Applications to control the access to your data sources

• SharePoint & Exchange Online• OneDrive for Business• Microsoft Graph• …

• Leverage Visual Studio Team Services for automated builds and release management

Foundation to an easier learning path towards Office 365 Development

PERFECT OFFICE 365 DEVELOPER TOOLKIT• Client-Side technologies

• Visual Studio Code• SharePoint Framework Yeoman generator• Office Add-Ins Yeoman generator• Office UI Fabric (including the React components)• webpack

• Server-Side technologies• Office 365 Patterns & Practices

• PnP-Core• PnP-PowerShell

• Azure• NodeJS

AGENDA

Roadmap

Everything that was done in the past is available in this modern development experience if you are willing to change the patterns

SAME CONCEPTS, NEW PATTERNSRequirement Classic

componentTechnologies involved

Modern component

Technologies involved

Integrate custom component in the Office Suite

Office Add-On (Desktop only)

COM, VSTO & Visual Studio

Office Add-Ins (Any platform)

HTML, JavaScript, NodeJS & Yeoman

Add a reusable component in a SharePoint page

SharePoint web parts

.NET, WSP Packages, Visual Studio

SharePoint Framework Client-Side web parts

NodeJS, TypeScript, webpack

Act on a list event in SharePoint

SharePoint event receivers

.NET, WSP Packages, Visual Studio

SharePoint webhooks

Any server technology

Deploy artifacts (columns, content types) to SharePoint

SharePoint Feature Framework

.NET, XML, WSP Packages, Visual Studio, PowerShell

Remote Provisioning PnP Provisioning Engine, XML, PowerShell

Expose SharePoint data to another application

SharePoint WebService / WCF / Handler

.NET, XML, WSP Packages, Visual Studio

Web API / Azure Function

NodeJS, .NET (PnP-Core), Office 365 API / Microsoft Graph




Modern component


Have a complete page experience that replaces the regular SharePoint UI

SharePoint “Layouts” Page

.NET, ASP.NET, WSP Packages, Visual Studio

Office 365 Apps Any server-side technology, Office 365 APIs / Microsoft Graph, Azure AD Application

Give users templated sites that can be easily created

SharePoint Site Templates

.NET, ASP.NET, WSP Packages, Visual Studio

PnP Provisioning Engine

Azure Web App, Office 365 API, CSOM

Run scheduled actions on SharePoint

SharePoint Timer Job .NET, WSP Packages, Visual Studio

Azure Web Job / Azure Function

Azure Web App (Web Job) / Azure Function, Office 365 API, .NET, CSOM

Manage your SharePoint environment remotely

SharePoint PowerShell Cmdlets

.NET, PowerShell Remote SharePoint CSOM calls

PnP PowerShell, CSOM




Modern component


Deploy a new feature to SharePoint

SharePoint PowerShell Cmdlets

.NET, PowerShell Visual Studio Team Services

PnP PowerShell, CSOM, Automated Builds, Release Management

The minimal path to awesome is to kickstart your journey into Office 365 development

MINIMAL PATH TO AWESOME• Learn JavaScript• Stop developing anything server-side directly into SharePoint• Leverage the integration opportunities that suit your

requirement• Come closer to the Information Worker with Office Add-Ins• Leverage modern experiences in SharePoint• Powerful applications should use Office 365 as a data source with

Office 365 Apps• Have a look to Azure opportunities to complement your

applications

The roadmap to success is the learning path to Office 365 Development autonomy

FULL ROADMAP TO SUCCESS• Learn JavaScript• Understand the tooling ecosystem that exists around modern web

development• Yeoman to create your projects and initialize your task runners and bundlers• Get to know the modern development workflow using local resources thanks

to NodeJS local development server• Use npm to manage your packages

• Leverage the Microsoft Graph and the Office 365 APIs instead of querying directly SharePoint data• At this point, you will be fully functional to create Office Add-Ins and

Office 365 Apps


FULL ROADMAP TO SUCCESS• Learn and use the PnP Provisioning Engine to do any deployment• Learn and use the PnP PowerShell Cmdlets to do any operation on

SharePoint• Learn and use the JavaScript Injection approach for your web parts• Learn CSOM and use the PnP-Core extensions• Develop your SharePoint code outside SharePoint• At this point, you will be fully functional to enhance your

SharePoint environment (On-Premises or in the Cloud) and have a modern supported approach


FULL ROADMAP TO SUCCESS• Learn TypeScript• Learn the SharePoint Framework• React• Webpack• Office UI Fabric

• Play and use the Microsoft Graph and the Office 365 APIs instead of querying directly SharePoint data• At this point, you will be fully functional to create new

experiences using the SharePoint Framework in SharePoint Online

AGENDA

Next Steps

Those resources will help you learning modern Office 365 Development

RESOURCES• https://dev.office.com• https://graph.microsoft.io• https://slevert.me/tech-community-sp-dev• https://github.com/SharePoint/sp-dev-docs• https://mva.microsoft.com/product-training/office-

development

Those GitHub samples will help you to have a quick overview of your gaps

SAMPLES• https://github.com/officedev• https://github.com/microsoftgraph• https://github.com/sharepoint• https://github.com/sebastienlevert

Sharing is Caring

SHARE YOUR EXPERIENCE• Use hashtags to share your experience• #Office365Dev• #MicrosoftGraph

• Contribute and ask question to the Microsoft Tech Community• https://slevert.me/tech-community-sp-dev

• Log issues & questions to the GitHub Repositories

My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at

THANK YOU Organizers, Sponsors and You for making this possible.

QUESTIONS | COMMENTS | ENGAGE