SHAREPOINT FRAMEWORKIn-Depth analysis of developer previewSean McLellan

SharePoint Components

• ClientSideWebPart• "Modern" Page

Experience• SharePoint

WebHooks

Tooling

• Cross-Platform• Yeoman Template• NPM Modules• Webpack• Typescript• Generates .spapp

Client-Side Frameworks

• SystemJS• React/Redux/Flux• Office UI Fabric• SPFx Components• Complement with

any client-side framework out there

Pillars of SPFx

SHAREPOINT COMPONENTS• New Additions to SPO• Provides another, possibly more guided approach to using Client-Side

Techniques in SharePoint• Does not replace existing webparts, remote event receivers, pages or

other behavior.• Will be made available to SP2016 on-prem in 2017 via an update.

SHAREPOINT COMPONENTS:CLIENTSIDEWEBPART

• New web part currently available in SPO• Not to be confused with ClientWebPart, ScriptEditorWebPart, or AppScriptPart

• Codification of the “App Script Part Pattern” introduced in 2014 by Vesa Juvonen

• Available on “Classic” SharePoint pages.

SHAREPOINT COMPONENTS:CLIENTSIDEWEBPART BENEFITS

• Script tag embedded with web part – No cross-domain library madness.• Configuration of the baseURL of script referencesis done via a new

ClientSideComponent section of Elements.xml – Inline Script tag embed can’t be changed by end users

• Web Part Mode is exposed and can be used to provide different modes for client side rendering

• Embeds SystemJS and uses it to ensure that required modules are loaded prior to executing client-side webpart code.

• React, Redux, and Office UI Fabric and SPFx components are included in the default manifest.

• New Client-Rendering-driven web part properties.

SHAREPOINT COMPONENTSINSIDE THE CLIENTSIDEWEBPART

SHAREPOINT COMPONENTSCSWP MANIFEST AND BOOTSTRAPPING

• CSWP renders the Manifest as a JSON object on the page – this is the configuration of the web part defined in elements.xml

• Inline code calls SPFx library which calls render() entry point of your CSWP instance

SHAREPOINT COMPONENTSCSWP IN ACTION

DEMO

SHAREPOINT COMPONENTS:“MODERN” PAGE EXPERIENCE

• Not fully part of the SPFx Developer Preview• Workbench.aspx is a sample of the fully-client side experience to come.• Will be similar to the MS Delve experience

• React/Reduct/Flux based ClientSideWebPart Manager• Retooling of Page Layouts and WebPart Zones to utilize client-side rendering

techniques• SharePoint Pages will be a 100% client side approach to “classic” web

part pages.

SHAREPOINT COMPONENTS:SHAREPOINT WEBHOOKS

• Not currently part of the SPFx Developer preview• Uses same event-driven pattern that modern sites such as GitHub are

using to provide eventing• MS Graph WebHooks - Outlook and OneDrive

• Allows external apps to consume events in SharePoint• Microsoft Flow• 3rd party tools like IFTTT/Zapier• Any WebAPI or service should be able to receive events

• Think of a generic RemoteEventReceiver that makes a HTTP call when triggered.

TOOLING• Tools to build Client Side Web Parts

• Possibly other components (libraries, pages, etc) in the future• Tools are to modern web developers – NPM packages, Yeoman templates and so forth

• Cross Platform Tools• SPFx modules in NPM• Yeoman Templates• Gulp Tasks• Webpack bundling

• IDE Agnostic• VS Code• Webstorm• Sublime• Your favorite editor here.

TOOLINGPRE-CONFIGURED MODULES

• Yeoman template initializes with a set of pre-configured modules• Webpack• Karma• Grunt• TypeScript/Typings

TOOLINGGULP TASKS REFERENCE

Gulp Task Purposegulp test Run karma-based unit testsgulp build Performs build tasks such as transpiling TS to JS, SCSS to

CSS and so forth via Webpackgulp bundle Builds, localizes and bundles the project

gulp deploy-azure-storage Uploads project’s bundled assets to a development CDNgulp package-solution Packages the project into a .spapp for use with the SP add-

in modelgulp serve Builds and bundles the project and serves it in an express-

based local development server.

TOOLINGSTARTING A SPFX PROJECT

DEMO

CLIENT-SIDE FRAMEWORKS• SPFx uses a number of existing open source frameworks for client-side

behavior• SystemJS• React/Redux/Flux• Lodash• whatwg-fetch

• Additional client-side behavior provided by custom SPFx-centric libraries• Custom HttpConext (using fetch behavior)• Digest caching (for X-Request Digest)• GUID Generation• SP-Prefixed object wrappers

• Most likely to expand and be enriched over time.

CLIENT-SIDE FRAMEWORKSWHAT TO USE TO BUILD YOUR

APP

Intentionally left blank(Use the client-side framework best suited for your team)

CLIENT-SIDE FRAMEWORKSHOW TO BUILD YOUR APP – GUIDANCE

• Building your app does not hinge on SPFx availability, but is just another way of providing a way of hosting your HTML+JS native web app within SharePoint• SPFx complements the already existing approaches to client-side web part

development

ROUNDUP• SharePoint Framework can be conceptually seen as three key areas

• SharePoint Components• Tooling to build those components (or not!)• Client-Side “Native Web Apps”

• New SharePoint Components provide a new way of bootstrapping Client Side code• Modern web development already using similar tooling as SPFx now uses• Choice of client-side frameworks to use not limited by SPFx

• Continue with current approaches to modern web development• Build HTML+JS apps that interact with SP data, and figure out how to host them in

SharePoint with the experience your users expect - not the other way around.• Over time SPFx is sure to evolve as it progresses through preview. Stay tuned.