From SharePoint to Office 365 Development Imagine a future where silo'd departments and legacy processes don’t stand in our way. Today’s collaboration needs go from complex collaboration portals to simple innovation hubs and most importantly need to work for our devices. Designing portals to enable a new kind of collaboration and communication is an absolute necessity today. For the past couple years, I’ve had the opportunity to study how successful teams collaborate and have helped to transform the way teams work and collaborate together. In this session, I'll share what I’ve learned about making effective cross-discipline collaboration possible, and leave you with actionable approaches you can use to unite your team's communication and collaboration needs. IN THIS SESSION YOU’LL HEAR:     • Why cross-discipline collaboration is essential to future-ready digital design, and how you can play a key role in creating the cross-departmental teams to enable innovation     • Real-life industry examples of what it takes to make effective collaboration possible     • Practical techniques you can use to bridge silos, increase productivity, and deliver better outcomes for your teams From SharePoint to Office 365 Development The path to your new playground #SPSOttawa By: Sébastien Levert

SPS Ottawa is made possible by our Sponsors!

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

AGENDA Mindset Technology Roadmap Next Steps

AGENDA Mindset Technology Roadmap Next Steps

Mindset

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 Stop being a SharePoint developer and think more broadly with Web Development

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 Living in the cloud will bring more innovation to the table

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 The new Office 365 Development space will transform your habits

AGENDA Mindset Technology Roadmap Next Steps

Technology

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) Office Add-Ins give you a great integration in a tool used daily by Information Workers

Demo

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 ! Modern SharePoint development will help you moving away from FTC solutions

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

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 Office 365 Apps gives you full control while keeping the user in its productivity context

Demo

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 JavaScript is the preferred language for cloud integrations within the ecosystem

Demo

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 NodeJS is now the de-facto language for web developers and their tooling

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 .NET (and .NET Core) are very convenient ways to extend SharePoint and Office 365

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 Azure is the best companion to perform “server-side” actions and be fully compliant with the Office 365 development Best Practices

Demo +

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 Foundation to an easier learning path towards Office 365 Development

AGENDA Mindset Technology Roadmap Next Steps

Roadmap

SAME CONCEPTS, NEW PATTERNS Requirement Classic component Technologies involved Modern component 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 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 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 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 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 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 Deploy a new feature to SharePoint SharePoint PowerShell Cmdlets .NET, PowerShell Visual Studio Team Services PnP PowerShell, CSOM, Automated Builds, Release Management Everything that was done in the past is available in this modern development experience if you are willing to change the patterns

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 minimal path to awesome is to kickstart your journey into Office 365 development

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

AGENDA Mindset Technology Roadmap Next Steps

Next Steps

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 resources will help you learning modern Office 365 Development

SAMPLES https://github.com/officedev https://github.com/microsoftgraph https://github.com/sharepoint https://github.com/sebastienlevert Those GitHub samples will help you to have a quick overview of your gaps

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 Sharing is Caring

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

THANK YOU Organizers, Sponsors and You for making this possible. QUESTIONS | COMMENTS | ENGAGE My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at