SPTechCon Austin 2019 - From SharePoint to Office 365 development
Download as PPTX, PDF0 likes129 views
The document outlines the transition from SharePoint to Office 365 development, emphasizing modern web development principles such as leveraging APIs, utilizing client-side technologies, and embracing cloud-based tools. It discusses integration opportunities with various Microsoft products and technologies, highlighting the importance of being agile and employing JavaScript, TypeScript, and modern frameworks like React. Additionally, it provides a roadmap for developers to enhance their SharePoint environments and utilize Office 365 as a primary data source.
SPTechCon Austin 2019 - From SharePoint to Office 365 development
- 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