• New Additions to SPO
• Provides another, possibly more guided approach to using Client-Side Techniques
• Does not replace existing webparts, remote event receivers, pages or other
• Will be made available to SP2016 on-prem in 2017 via an update.
• 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.
• 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
• 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
• New Client-Rendering-driven web part properties.
INSIDE THE CLIENTSIDEWEBPART
CSWP 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
“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.
• Not currently part of the SPFx Developer preview
• Uses same event-driven pattern that modern sites such as GitHub are using to
• 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.
• 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
• Your favorite editor here.
• Yeoman template initializes with a set of pre-configured modules
GULP TASKS REFERENCE
Gulp Task Purpose
gulp test Run karma-based unit tests
gulp build Performs build tasks such as transpiling TS to JS, SCSS to CSS and
so forth via Webpack
gulp bundle Builds, localizes and bundles the project
gulp deploy-azure-storage Uploads project’s bundled assets to a development CDN
gulp package-solution Packages the project into a .spapp for use with the SP add-in model
gulp serve Builds and bundles the project and serves it in an express-based
local development server.
• SPFx uses a number of existing open source frameworks for client-side behavior
• 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.
WHAT TO USE TO BUILD YOUR APP
(Use the client-side framework best suited for your team)
HOW 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
• 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.