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. In this session, we will cover every aspect of the new Office Developer paradigm and we will ensure that you can make yourself at home in such a new world. The topics covered will be : - SharePoint Add-In - Office 365 Apps - Office Add-In - Microsoft Graph

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

2. SPS Ottawa is made possible by our Sponsors!

3. My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at
SÉBASTIEN LEVERT
SPEAKER | OFFICE DEV MVP | SUPER FUNNY

4. AGENDA

5. AGENDA

6. Mindset

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

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

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

10. AGENDA

11. Technology

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

13. Demo

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

15. Demo
_=+#####!
###########|
###/ (##|(@)
### ######|
###/ /###| (@)
####### ##| /
### /##|(@)
###########|
**=+####!

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

17. Demo

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

19. Demo

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

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

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

23. Demo
+

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

25. AGENDA

26. Roadmap

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

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

29. 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 PATTERNS
Requirement Classic component Technologies involved Modern component Technologies involved
Deploy a new feature to
SharePoint
SharePoint PowerShell
Cmdlets
.NET, PowerShell Visual Studio Team
Services
PnP PowerShell, CSOM,
Automated Builds,
Release Management

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

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

32. The roadmap to success is the learning path to Office 365 Development autonomy
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

33. The roadmap to success is the learning path to Office 365 Development autonomy
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

34. AGENDA

35. Next Steps

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

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

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

39. Please drink responsibly . We will be happy to call a cab for you !
SHAREPINT !
Summerhays Grill
5h30 PM
1971 Baseline Road (corner of
Woodroffe)

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