SlideShare a Scribd company logo
1 of 32
From SharePoint to Office 365
Development
The path to your new playground
Sébastien Levert
Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Owner & Evangelist at
Agenda
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
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
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
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
• UsingVisual Studio native experience
• Using Open Source alternatives (yo office)
Demo
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!
Demo
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
Demo
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
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
Demo
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
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
Demo
+
Roadmap
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
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
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
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
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
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
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
• http://serverlesscalc.com/
Samples
• https://github.com/officedev
• https://github.com/microsoftgraph
• https://github.com/sharepoint
• https://github.com/sebastienlevert/spfx-ng-webparts
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
ThankYou!
@sebastienlevert | http://sebastienlevert.com | Product Owner & Evangelist at

More Related Content

What's hot

What's hot (20)

aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
aOS Canadian Tour - Montreal - From SharePoint to Office 365 DevelopmentaOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
 
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 DevelopmentaOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
 
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
aOS Canadian Tour - Toronto - From SharePoint to Office 365 DevelopmentaOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
 
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
 
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
 
Who Needs A Developer For Automated SharePoint Provisioning
Who Needs A Developer For Automated SharePoint ProvisioningWho Needs A Developer For Automated SharePoint Provisioning
Who Needs A Developer For Automated SharePoint Provisioning
 
O365: Attack of the Clones
O365: Attack of the ClonesO365: Attack of the Clones
O365: Attack of the Clones
 
All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...
All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...
All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...
 
Use office ui fabric react to build beauty with SharePoint
Use office ui fabric react to build beauty with SharePointUse office ui fabric react to build beauty with SharePoint
Use office ui fabric react to build beauty with SharePoint
 
ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...
ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...
ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...
 
Move past bootstrap and build our lightweight responsive framework w.v1.2
Move past bootstrap and build our lightweight responsive framework w.v1.2Move past bootstrap and build our lightweight responsive framework w.v1.2
Move past bootstrap and build our lightweight responsive framework w.v1.2
 
Supercharge Your SharePoint Framework Webpart with React
Supercharge Your SharePoint Framework Webpart with ReactSupercharge Your SharePoint Framework Webpart with React
Supercharge Your SharePoint Framework Webpart with React
 
Build Your First SharePoint Framework Webpart
Build Your First SharePoint Framework WebpartBuild Your First SharePoint Framework Webpart
Build Your First SharePoint Framework Webpart
 
Uncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint DevelopmentUncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint Development
 
The Adventures of Azure Functions and Microsoft Graph
The Adventures of Azure Functions and Microsoft GraphThe Adventures of Azure Functions and Microsoft Graph
The Adventures of Azure Functions and Microsoft Graph
 
Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)
 
Spsnyc transforming share point farm solutions to the add-in model and shar...
Spsnyc   transforming share point farm solutions to the add-in model and shar...Spsnyc   transforming share point farm solutions to the add-in model and shar...
Spsnyc transforming share point farm solutions to the add-in model and shar...
 
SPSNL16 - Building Office 365 and SharePoint solutions using modern developer...
SPSNL16 - Building Office 365 and SharePoint solutions using modern developer...SPSNL16 - Building Office 365 and SharePoint solutions using modern developer...
SPSNL16 - Building Office 365 and SharePoint solutions using modern developer...
 
Broaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsBroaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding options
 
Use Office UI Fabric React to Build Beauty with SharePoint
Use Office UI Fabric React to Build Beauty with SharePointUse Office UI Fabric React to Build Beauty with SharePoint
Use Office UI Fabric React to Build Beauty with SharePoint
 

Similar to SPTechCon Austin 2019 - From SharePoint to Office 365 development

Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
BIWUG
 
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
Bill Ayers
 

Similar to SPTechCon Austin 2019 - From SharePoint to Office 365 development (20)

aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour  - Quebec - From SharePoint to Office 365 DevelopmentaOS Canadian Tour  - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
 
SharePoint Fest Chicago - From SharePoint to Office 365 Development
SharePoint Fest Chicago - From SharePoint to Office 365 DevelopmentSharePoint Fest Chicago - From SharePoint to Office 365 Development
SharePoint Fest Chicago - From SharePoint to Office 365 Development
 
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
 
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
 
Building share point framework solutions
Building share point framework solutionsBuilding share point framework solutions
Building share point framework solutions
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
 
VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)
 
Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?
 
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
 
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
 
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
 
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
OSH01 - Developing SharePoint Framework Solutions for the Enterprise
OSH01 - Developing SharePoint Framework Solutions for the EnterpriseOSH01 - Developing SharePoint Framework Solutions for the Enterprise
OSH01 - Developing SharePoint Framework Solutions for the Enterprise
 
SharePoint Framework - Developer Preview
SharePoint Framework - Developer PreviewSharePoint Framework - Developer Preview
SharePoint Framework - Developer Preview
 
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
 

More from Sébastien Levert

More from Sébastien Levert (20)

SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutesSharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
 
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
 
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development TechniquesESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
 
ESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFxESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFx
 
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
 
SPC19 - Building tailored search experiences in Modern SharePoint
SPC19 - Building tailored search experiences in Modern SharePointSPC19 - Building tailored search experiences in Modern SharePoint
SPC19 - Building tailored search experiences in Modern SharePoint
 
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
 
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
 
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFxWebinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
 
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
 
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
 
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutesSharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
 
European SharePoint Conference 2018 - Build an intelligent application by con...
European SharePoint Conference 2018 - Build an intelligent application by con...European SharePoint Conference 2018 - Build an intelligent application by con...
European SharePoint Conference 2018 - Build an intelligent application by con...
 
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
 
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutesNashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
 
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
 
SPTechCon Boston 2018 - Top 10 feature trends to make you fall in love with y...
SPTechCon Boston 2018 - Top 10 feature trends to make you fall in love with y...SPTechCon Boston 2018 - Top 10 feature trends to make you fall in love with y...
SPTechCon Boston 2018 - Top 10 feature trends to make you fall in love with y...
 
ESPC Webinar 2018 - Show me something cool and useful in 5 minutes built on SPFx
ESPC Webinar 2018 - Show me something cool and useful in 5 minutes built on SPFxESPC Webinar 2018 - Show me something cool and useful in 5 minutes built on SPFx
ESPC Webinar 2018 - Show me something cool and useful in 5 minutes built on SPFx
 
SharePoint Conference 2018 - Build an intelligent application by connecting i...
SharePoint Conference 2018 - Build an intelligent application by connecting i...SharePoint Conference 2018 - Build an intelligent application by connecting i...
SharePoint Conference 2018 - Build an intelligent application by connecting i...
 
SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 

Recently uploaded (20)

Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

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