The world around the Office Developer is changing. And for someone with a heavy SharePoint background, it can be somewhat scary to make the move to the cloud. But don't be scared, SharePoint Developer! Become an added-value Office Developer and contribute to maximize the productivity of your enterprise. The technology space around Productivity has evolved and it has never been that exciting. Your step into the Mobile-First, Cloud-First world will be mindblowing and you will want to stick around for a very long time! In this session, we will cover every aspect of the new Office 365 Developer paradigm and we will ensure that you can make yourself at home in such a new world. The technologies covered will span from being close to your existing stack (SharePoint Framework, JavaScript) to a set of technologies that are new and that will expand your possibilities (Office 365 Apps, Microsoft Graph, Azure, TypeScript) This very session will make sure that at the end you get those 3 key takeaways : - Understand your new role as an Office 365 Developer - Have a complete overview of the technology stack you need to master in the cloud - Change the way you will think for your next SharePoint & Office 365 project

1. From SharePoint to Office 365
Development
The path to your new playground
Sébastien Levert

2. Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Owner & Evangelist at

3. Agenda

4. Mindset

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

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

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

8. Technology

9. 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
• UsingVisual Studio native experience
• Using Open Source alternatives (yo office)

10. Demo

11. Integration opportunities
• SharePoint
• Still on Classic?You’re covered!
• 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-SideWebparts and Client Extensions for the moment but more is
coming !
• Supports On-Premises!WebParts are supported with 1.1 on SP2016 and 1.4.1 on
SP2019!

12. Demo

13. Integration opportunities
• MicrosoftTeams
• Re-using any of your SharePoint pages as an integrated application in your
MicrosoftTeams environment
• Using the SharePoint Framework as your native development platform

14. Demo

15. Surfacing Contextual xFx Panels in
different Microsoft 365 services
• OneimplementationusingxFxFramework
(newnameforSharePointFramework)to
buildcontextualpanels,whichcanbe
surfacedindifferentservices.
• Contextualpanelsareawareofthecontext
andcapabilitiestheycanprovideforthe
hostedservice.
• Actualcodeishostedautomaticallyinthe
SharePointwhichsimplifiesdeploymentand
operations
js
Office
add-in
built with
xFx
SharePoint client-side web
part built with xFx
Microsoft Teams tab built
with xFx
Contextual panel solution,
which can be deployed to be
visible in different services

16. Technology stack
• JavaScript
• Using the latest versions of the standards
• TypeScript
• ECMAScript 5 & 6
• Using UI frameworks to build better applications faster
• React
• 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

17. Demo

18. 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 likeWeb APIs
• Leverage the Content Delivery Network component to distribute your assets
• Leverage AzureAD Applications to control the access to your data sources
• SharePoint & ExchangeOnline
• OneDrive for Business
• Microsoft Graph
• …
• LeverageVisual StudioTeam Services for automated builds and release
management

19. Perfect Office 365 developer toolkit
• Client-Side technologies
• Visual Studio Code
• SharePoint FrameworkYeoman generator
• Office Add-InsYeoman generator
• Office UI Fabric (including the React components)
• webpack
• Server-Side technologies
• Office 365 Patterns & Practices
• PnP-Core
• PnP-PowerShell
• Microsoft Graph
• Microsoft Flow / PowerApps

20. Demo
+

21. Roadmap

22. Same concepts, new patterns
Requirement Classic component Technologies 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

23. Same concepts, new patterns
Requirement Classic component Technologies involved Modern component Technologies involved
Have a complete page
experience that replaces
the regular SharePoint UI
SharePoint “Layouts”
Page
.NET, ASP.NET, WSP
Packages, Visual Studio
Office 365 Apps,
Microsoft Teams
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
Deploy a new feature to
SharePoint
SharePoint PowerShell
Cmdlets
.NET, PowerShell Visual Studio Team
Services
PnP PowerShell, CSOM,
Automated Builds,
Release Management

24. 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 InformationWorker 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

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

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

27. Full roadmap to success
• LearnTypeScript
• 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

28. Next Steps

29. 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
• http://serverlesscalc.com/

30. Samples
• https://github.com/officedev
• https://github.com/microsoftgraph
• https://github.com/sharepoint
• https://github.com/sebastienlevert/spfx-ng-webparts

31. Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• #SPFx
• #AzureFunctions
• Contribute and ask question to the MicrosoftTech Community
• https://slevert.me/tech-community-sp-dev
• Log issues & questions to the GitHub Repositories

32. ThankYou!
@sebastienlevert | http://sebastienlevert.com | Product Owner & Evangelist at