SHAREPOINT FRAMEWORK In-Depth analysis of developer preview Sean McLellan
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.