Modern sites and the SharePoint Framework (SPFx)Chris O’Brien - MVP

About me

Independent ConsultantHead of Development, Content and Code (UK)

www.sharepointnutsandbolts.com@ChrisO_Brien http://cob-sp.com/COBLinkedIn

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

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

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

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!

Modern sites – Site Contents page

Modern sites – new doc librariesKey items can be pinned

Easier metadata entry

Easier copy/move (including from a user’s OneDrive)

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”

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

New “modern” pagesNew page “canvas” – no classic web part zones

Apps, but no IFrames!

Similar to recent Delve blog pages

A new set of web partsTake note of:

Highlighted Content web partPowerBI web partYammer Embed web part

Others to come!

Highlighted Content web partThe modern equivalent of Content Search web part…

…(or the nearest thing to it)

Less functional (at least to begin with)

Client web partsPure JavaScript implementation

“Baked-in JS injection”

Simplified end-user experience (e.g. web part properties)

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…

Why are Microsoft making these changes?

The Mum test:Could one of your parents edit a SharePoint page and add web parts?

Demo

Modern page editing

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

Client web parts in classic pages

New web part properties “wrapped” in old:

The SharePoint Framework (for developers)

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!

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

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

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

Client web parts – diving deeperBaseClientSideWebPart provides:

DisplayModeContextDOMElementProperties/Render() etc.

Demo

Building a client web part

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

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

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

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

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

Further reading (2)Stefan Bauerhttp://www.n8d.at/blog/tag/spfx/

Olivier Carpentier:https://twitter.com/OlivierC

..and lots of others too

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