chris o'brien - modern sharepoint sites and the sharepoint framework - reference
TRANSCRIPT
![Page 1: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/1.jpg)
Modern sites and the SharePoint Framework (SPFx)Chris O’Brien - MVP
![Page 2: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/2.jpg)
About me
Independent ConsultantHead of Development, Content and Code (UK)
www.sharepointnutsandbolts.com@ChrisO_Brien http://cob-sp.com/COBLinkedIn
![Page 3: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/3.jpg)
SharePoint – the last 3 yearsIncreased focus on Office 365 – “cloud first”Hybrid on-premises/online environments becoming more common – but complex!Shift to ‘cloud-friendly’ development approaches e.g. apps/add-ins
Core workloads much improvedDocument management and co-authoring are solidA great intranet platformEven OneDrive for Business now works well!
But then…not much else?Fewer end-user functionality updates
![Page 4: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/4.jpg)
SharePoint’s rejuvenation!Core SharePoint/OneDrive enhancementsNew “modern sites” look and feelIntegration with Office 365 GroupsNew access controlsFlows
Focus on mobilitySharePoint mobile app (plus OneDrive and Groups apps)Responsive sites/pagesPowerApps
![Page 5: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/5.jpg)
..and the rest Android app Classification of
sitesConditional access controls
Copy/move to SharePoint sites
Compliance features
Data loss prevention
Fast site creation Flows Graph enhancements (e.g. SharePoint data)
Groups harmonisation
Hybrid taxonomy Insights Logging – now unified
Mobile views My analytics
OneDrive sync for SP sites
OneDrive mobile app
Page canvas People cards Planner
PowerBI SharePoint home page
SharePoint mobile app
Sharing improvements
Sites page pinning
Touch-friendly UI User profile enhancements
Web parts (new) Yammer enhancements
Zero downtime patching
![Page 6: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/6.jpg)
Modern sitesTeam site highlights• Integration with Office 365
Groups• New home page• Modern pages - simpler
authoring• Team News feature• Self-service creation• New document library/list
experience• New Site Contents page
• 25TB per site collection!
![Page 7: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/7.jpg)
Modern sites – Site Contents page
![Page 8: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/8.jpg)
Modern sites – new doc librariesKey items can be pinned
Easier metadata entry
Easier copy/move (including from a user’s OneDrive)
![Page 9: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/9.jpg)
Quirks of modern pages (late 2016) No master page on these
pages! Limited extensibility – no
web Custom Actions!This means:No real global navigationBranding differences (if custom master page used)
..but, this should be short-term:Microsoft are “looking at this”
![Page 10: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/10.jpg)
Quirks of modern pages (late 2016)Currently working:Item-scoped custom actions (declarative)Currently NOT working:Web-scoped custom actionsJSLink customisations
Likely future state:Web custom actions will workJSLink will work, or a new equivalent provided
![Page 11: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/11.jpg)
New “modern” pagesNew page “canvas” – no classic web part zones
Apps, but no IFrames!
Similar to recent Delve blog pages
![Page 12: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/12.jpg)
A new set of web partsTake note of:
Highlighted Content web partPowerBI web partYammer Embed web part
Others to come!
![Page 13: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/13.jpg)
Highlighted Content web partThe modern equivalent of Content Search web part…
…(or the nearest thing to it)
Less functional (at least to begin with)
![Page 14: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/14.jpg)
Client web partsPure JavaScript implementation
“Baked-in JS injection”
Simplified end-user experience (e.g. web part properties)
![Page 15: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/15.jpg)
NOTE – master pages are likely to go away in the future. Modern pages do not use them!
But there will be an equivalent way to have full page control…
![Page 16: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/16.jpg)
Why are Microsoft making these changes?
![Page 17: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/17.jpg)
The Mum test:Could one of your parents edit a SharePoint page and add web parts?
![Page 18: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/18.jpg)
Demo
Modern page editing
![Page 19: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/19.jpg)
Page types/web part types crossover
Modern web parts can work in:- modern pages (of course)- classic pages
But classic web parts can NOT work in modern pages
Classic pages Modern pagesClassic web parts
Y N
Modern web parts
Y Y
![Page 20: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/20.jpg)
Client web parts in classic pages
New web part properties “wrapped” in old:
![Page 21: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/21.jpg)
The SharePoint Framework (for developers)
![Page 22: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/22.jpg)
A new era for SharePoint developersNot just JavaScript, but TypeScript!
Use your preferred JS framework – React, Angular, Knockout, jQuery, or none
Gulp for buildYeoman for startupNo need for Visual Studio!
![Page 23: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/23.jpg)
Starting a new solutionPre-requisites:
Node.js, Yeoman, TypeScript, GulpYeoman Generator for SPFx – “yo @microsoft/sharepoint”
Process:Create a folderUse Yo to get starter files
![Page 24: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/24.jpg)
Writing code in SPFxFundamentalsCode is written in the “src” directory
TypeScript is expected (at least, for now) Compile-time checking – find bugs faster!A superset of JavaScript - not just ‘var’, but strings and numbers
Client web partsThe “render” method is top of the chain
![Page 25: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/25.jpg)
TypeScript – top 3 things to know1. Variables and typesVariable types must be declared e.g. var foo: string or var foo: UserProfile var foo: any is the escape route – “I don’t need type-checking”
2. Typings for libraries (e.g. jQuery, CSOM)Typings provide code auto-completion - usually in a d.ts fileMost common libs have typings – add with TypeScript Definition Manager
3. Import a module to use itLike a “using” statement – but also ensures the module is loaded
![Page 26: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/26.jpg)
Client web parts – diving deeperBaseClientSideWebPart provides:
DisplayModeContextDOMElementProperties/Render() etc.
![Page 27: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/27.jpg)
Demo
Building a client web part
![Page 28: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/28.jpg)
Improving the sample
• Avoid passing web part context aroundUse of ServiceScope
• New “document card” component
Consider Office UI Fabric for presentation
• Move to a more formal framework if functionality expands
Consider React or similar for rendering
![Page 29: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/29.jpg)
Understanding the folder structureFolder Purpose
config Settings for bundling/deployment
dist Run-time files for your applib Intermediate folder in build
systemnode_modules JS dependencies
src Where you write codetypings TypeScript typings
See cob-sp.com/SPX-Files for more info
![Page 30: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/30.jpg)
![Page 31: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/31.jpg)
Deploying to productionYour files can be hosted anywhereJavaScript and CSS -> CDN, Azure web app, IIS server, SharePoint library
App packages are the deployment vehicle Upload to App Catalog to make available
Ensure dependencies are bundled OR referencedUpdate config.json if (e.g.) jQuery should be referenced from CDN
![Page 32: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/32.jpg)
What about on-premises SharePoint?Good news!
The SharePoint Framework *is* coming to SP2016 – not just SharePoint Online
Likely to be released in a Feature Pack update, some time in 2017
![Page 33: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/33.jpg)
Further readingWaldek’s blog: All his SPFx posts - https://blog.mastykarz.nl/tag/sharepoint-framework/
COB blog:Intro to SPFx for devs – http://cob-sp.com/SharePointFrameworkIntroPresentation SPFx web part properties (series) - http://cob-sp.com/SPFx-WP-Props1 Using HttpClient vs. jQuery AJAX – http://cob-sp.com/SPFX-Promises
DEV.OFFICE.COMSet up your developer tenant - http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant
![Page 34: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/34.jpg)
Further reading (2)Stefan Bauerhttp://www.n8d.at/blog/tag/spfx/
Olivier Carpentier:https://twitter.com/OlivierC
..and lots of others too
![Page 35: Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference](https://reader035.vdocuments.mx/reader035/viewer/2022062905/586f95e01a28abcc238b459b/html5/thumbnails/35.jpg)
Key take-awaysSharePoint is entering a new eraBig changes to SharePoint sitesTeam sites now, publishing sites next yearSome user communications/guidance needed (for authors/editors)
SharePoint dev is changingTypeScript, JS libraries and some aspects of Node are importantLots of framework elements to learn – bundling, APIs, manifest files etc.SPFx does not replace anything – but required to extend new page types