aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
-
Upload
sebastien-levert -
Category
Technology
-
view
61 -
download
0
Transcript of aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
![Page 1: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/1.jpg)
aOS 2017Canadian Tour
Fueled by
QuebecMontrealOttawaToronto
February 6February 7 February 8February 10
![Page 2: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/2.jpg)
From SharePoint to Office 365 Development
The path to your new playground
Sébastien Levert
![Page 3: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/3.jpg)
Thank you!
![Page 4: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/4.jpg)
Who’s that guy ?
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at
![Page 5: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/5.jpg)
Agenda
![Page 6: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/6.jpg)
Mindset
![Page 7: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/7.jpg)
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
![Page 8: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/8.jpg)
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
![Page 9: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/9.jpg)
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
![Page 10: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/10.jpg)
Technology
![Page 11: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/11.jpg)
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)
![Page 12: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/12.jpg)
Demo
![Page 13: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/13.jpg)
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 !
![Page 14: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/14.jpg)
Demo
![Page 15: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/15.jpg)
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
![Page 16: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/16.jpg)
Demo
![Page 17: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/17.jpg)
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
![Page 18: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/18.jpg)
Demo
![Page 19: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/19.jpg)
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
![Page 20: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/20.jpg)
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
![Page 21: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/21.jpg)
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
![Page 22: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/22.jpg)
Demo
+
![Page 23: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/23.jpg)
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
![Page 24: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/24.jpg)
Roadmap
![Page 25: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/25.jpg)
Same concepts, new patternsRequirement 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
![Page 26: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/26.jpg)
Same concepts, new patternsRequirement 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
Deploy a new feature to SharePoint
SharePoint PowerShell Cmdlets
.NET, PowerShell Visual Studio Team Services
PnP PowerShell, CSOM, Automated Builds, Release Management
![Page 27: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/27.jpg)
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
![Page 28: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/28.jpg)
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
![Page 29: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/29.jpg)
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
![Page 30: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/30.jpg)
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
![Page 31: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/31.jpg)
Next Steps
![Page 32: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/32.jpg)
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
![Page 33: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/33.jpg)
Samples
• https://github.com/officedev• https://github.com/microsoftgraph• https://github.com/sharepoint• https://github.com/sebastienlevert
![Page 34: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/34.jpg)
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
![Page 35: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/35.jpg)
Thank you!
![Page 36: aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development](https://reader035.fdocuments.in/reader035/viewer/2022081514/58a5ce8a1a28ab6c2a8b5d1b/html5/thumbnails/36.jpg)
Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at