Grow your SharePoint development platform with SharePoint Framework

Supported By:Sponsored By: @SPS_Events
@SPSBangalore
#MicrosoftForSocialGood
Welcome to SharePoint Saturday Bangalore 2019!
Grow your SharePoint development platform with SPFx
Dipti Chhatrapati - Manoj Mittal

@SPSBangalore
SharePoint Development Evolution
SP 2003 SP 2007 SP 2010
SP 2013 &
Online
SP 2016 &
Online
• Build on .NET
Framework 2.0
• Server Side API
• Full Trust Code
• Manual
Deployment
• Based on WSS 3.0
• Server Side API
• Full Trust Code
• Features (New)
• Deployment
Solution and
Packages
• SharePoint
Foundation
• Sandbox Solution
• Full Trust Code
• Client Side API
(CSOM)
• SharePoint
Foundation
• Client Side API
(CSOM)
• Add-In
• Provided Hosted
• SharePoint
Hosted
• Injection
SPFX with Service
Pack2.
Classic Sites
SP 2019 &
Online
Modern Sites &
Classic Sites
Column Formatting
Extension
Tenant Scope
Deployment
SPFX 1.7SPFX 1.7
Dynamic Data
Full Page App
Teams Based App
SPFX 1.8
SPFX 1.8.2
SPFX 1.9.1

@SPSBangalore
An application framework used to build and extend modern experiences in SharePoint.
SharePoint Framework – What's it?

@SPSBangalore
The Demand

@SPSBangalore
>500 samples
for helping to learn to
extend Microsoft 365
awardedInternally at Microsoft as the reference
model for community engagement
>1000Contributors in GitHub
organizations
>2.4 million
Watch time minutes in
the YouTube channel
within last 365 days
>28000Tenants using open-
source components each
month
>60000Visitors in GitHub
organizations in past 2 weeks
aka.ms/sppnp

@SPSBangalore
For 3rd party
components
Support ALM
capabilities
REST APIs and UX
Hosted in SharePoint
Provides context
pre-fetch data
TypeScript libraries
Handles load
Handles execution
Makes calls to
SharePoint, Graph,
AAD protected APIs
and general Http
requests
Integrated in Yeoman
IDE agnostic
Uses Node and NPM
Gives access to Web
APIs
Serves AAD access
tokens
Wraps to ADAL.js
Information on things
like the current user,
site, page, web, teams
channel, etc.
The Architecture

@SPSBangalore
Web Parts LibrariesExtensions
SPFx Components Types

@SPSBangalore
Extend the user experience of SharePoint, leveraging the familiar tools and
libraries for client-side development coming from the SharePoint Framework.
Application customizer
Add script to modern pages
Adjust top and bottom sections of
page with custom renderings
Command set
Extend the modern list command
surface with new actions that run
custom code
Field customizer
Visualize data inside columns in
the list view
SPFx Extensions

@SPSBangalore
Runtime Features
Dynamic Data
web APIs (AAD) and Graph integration
runtime isolation (web parts)
Service Features
ALM APIs
Site Collection App Catalog
Tenant Wide Deployment
Asset Hosting
SPFx Capabilities

@SPSBangalore
Teams TabsApp pagesClassic Pages Lists and
Libraries
Modern Pages
SPFx Hosted Scenario

@SPSBangalore
SharePoint Framework Evolves Constantly

@SPSBangalore
SharePoint Provisioning Service
• Provisioning service is integrated directly to
the SharePoint Look Book site.
• Provisioning example content and
structures to your dev tenants to simulate
production usage.
• >10 different designs with sample content
http://aka.ms/sharepointlookbook

@SPSBangalore
Microsoft Graph / SharePoint REST API / CSOM
PnP Core Extension – Actual Tenant Provisioning Engine
Tenant administratorsIT Pro admins ISVs and SIs
Custom
Provisioning
Service
Office 365 tenant templates—complex solution configurations

@SPSBangalore
Demo : SharePoint Provisioning Service

@SPSBangalore

@SPSBangalore
Demo : SPFx v1.9.1

@SPSBangalore
What’s Coming in 1.10

@SPSBangalore
ETA CY 2019
(subject to change)
SharePoint Framework 1.10
Pre-allocated placeholders
• Supported for both top and bottom placeholders
• Doesn’t add additional delay in loading
• Supported in existing extensions: manifest update is the only required change
SPFx for Teams –personal apps support
• Supports all the SPFx capabilities: context information, access to Graph and
other Web APIs, etc.
• No configuration support
• Same “sync to Teams” experience via SharePoint App Catalog
• Supports admin management via app policies
SPFx for Teams – support for mobile app
• SPFx based tabs supported in the native mobile app
• Both for personal apps and channel tabs
• Available with the November release of Teams Mobile app

@SPSBangalore
SPFx 1.10 Release - Support for Personal App in Teams

@SPSBangalore
SPFx 1.10 Release - Support for Teams Mobile App

@SPSBangalore
ETA CY 2019
(subject to change)
SharePoint Framework 1.10
Search results extensibility: query modification
Translation or additional intelligence
User roles/location
Set up using PowerShell
Supported on the Search Results page
SPFx for Office – support for Office add-ins (starts with OWA)
Supports all the SPFx capabilities: context information, access to
Graph and other Web APIs, etc.
Lifecycle controlled through the SharePoint App Catalog: full ALM
support
Initial support for Outlook Web Access only for Developer Preview
Support for additional platforms in future interactions

@SPSBangalore
SPFx 1.10 Release - Support for Query Modification

@SPSBangalore
SPFx 1.10 Release - Support for Office add-ins (OWA)

@SPSBangalore
ETA CY 2020
(subject to change)
The Road Ahead – SPFx 1.10 Release
• Native support for Fluid Framework
• SPFx support in store (AppSource)
• Unified toolchain for Microsoft365
workloads
• Faster inner dev loop
• More extensions!

@SPSBangalore
Support for Fluid Framework

@SPSBangalore
1
Extend SharePoint
1LOB Systems & Cloud Services
Web Parts
1SP SDK
Enterprise Development Model - yo@MS/SharePoint | Hosting & Auth | Governance | Context
Web Parts
Developer Tooling
Fluid Framework

@SPSBangalore
1
Extend SharePoint + Graph
Web Parts
1SP SDK
Enterprise Development Model - yo@MS/SharePoint | Hosting & Auth | Governance | Context
Web Parts
Developer Tooling
1Microsoft Graph
Fluid Framework

@SPSBangalore
1
Extend SharePoint + Graph + Teams
Web Parts
1SP | Teams SDKs
Enterprise Development Model - yo@MSSharePoint | Hosting & Auth | Governance | Context
Web Parts
Developer Tooling
1Microsoft Graph
Tabs
Fluid Framework

@SPSBangalore
1
Extend SharePoint + Graph + Teams + Office
Web Parts
1SP | Teams | Office SDKs
Enterprise Development Model - yo@MSSharePoint | Hosting & Auth | Governance | Context
Web Parts
Developer Tooling
1Microsoft Graph
Tabs
*Word / X / POutlook
Addins Addins
Fluid Framework

@SPSBangalore
1
Extend Microsoft 365 experiences
*Word / X / POutlook *Fluid Preview Canvas
1*Fluid SDK 1Microsoft Graph 1LOB Systems & Cloud Services
Web Parts Tabs Addins Addins *Fluid objects
1SP | Teams | Office SDKs
Enterprise Development Model - yo@Microsoft365 | Hosting & Auth | Governance | Context
Web Parts
Developer Tooling
Fluid Framework

@SPSBangalore
Fluid Functionalities

@SPSBangalore
SPFx capabilities evolve to seamlessly target more Microsoft
365 workloads
Unified toolchain experience to build SPFx web parts, Teams tabs, Office Add-ins,
and *Fluid Preview Components
Supports all Microsoft 365 “canvases”
Provides canvas context at runtime
Hosting platform for enterprise extensibility
Access to Microsoft capabilities: Graph, Authentication, DDS, etc.
For Developers:
Common toolchain, codebase, manifest, package, & target multiple components
(Web Part, Tab, Office Add-in, FPC)
Long Story Short!

@SPSBangalore
SharePoint Framework
• Pre-allocated headers
• Support for Teams personal
apps
• Support for Teams mobile app
• Query Extensions (dev
preview)
• Support for Office add-ins in
OWA (dev preview)
• Fluid Components support
(Private Preview)
• SharePoint Framework
• SPFx solutions in AppSource
• GA of Query Extensions
• Nav and header extensions
(dev preview)
Graph
• Site DiscoverEnumeration API
• File Requests Sharing API
• Taxonomy API (dev preview)
• Hub Analytics API (Dev
Preview)
• SharePoint Framework
• Unified toolchain for Microsoft
365 workloads
• Support for Fluid Components
• Graph
• CSOM on .NET Code
Available soon Early Next Year Top of Mind
Graph
• Webhook support for Lists
• Permission change support for Delta API
• Followed Sites API (Dev Preview)
• Check in Check out (Dev Preview)
Roadmap: Developer platform

@SPSBangalore
aka.ms/spdev-docs aka.ms/spdev-videos aka.ms/spdev-issues github.com/sharepoint
github.com/pnp
SPFx Resources

@SPSBangalore
For Microsoft 365 developers
SharePoint Framework – What's it?
You can find Microsoft 365 developer training modules on Microsoft Learn!
https://aka.ms/M365DevTraining
https://aka.ms/IgniteO365DevProgram
Exam MS-600

@SPSBangalore
Learn more!
https://bit.ly/32Bbr5A

@SPSBangalore
Thanks :)
Next up…
Leverage SharePoint Framework (SPFx)
development using Microsoft Graph API
Jayakumar Balasubramaniam

Grow your SharePoint development platform with SharePoint Framework

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Grow your SharePoint development platform with SharePoint Framework

Similar to Grow your SharePoint development platform with SharePoint Framework (20)

More from Dipti Chhatrapati

More from Dipti Chhatrapati (16)

Recently uploaded

Recently uploaded (20)

Grow your SharePoint development platform with SharePoint Framework

Editor's Notes