The document provides an in-depth analysis of the SharePoint Framework developer preview. It describes the new SharePoint components, including ClientSideWebPart, modern page experiences, and webhooks. It also outlines the tooling used to build components, such as Yeoman templates, NPM modules, and Webpack. Finally, it discusses the client-side frameworks that can be used like React and Redux, and how existing approaches to client-side development can be complemented but not replaced by the SharePoint Framework.

1. SHAREPOINT FRAMEWORK
In-Depth analysis of developer preview
Sean McLellan

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

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

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

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

6. SHAREPOINT COMPONENTS
INSIDE THE CLIENTSIDEWEBPART

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

8. SHAREPOINT COMPONENTS
CSWP IN ACTION

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

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

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

12. TOOLING
PRE-CONFIGURED MODULES
• Yeoman template initializes with a set of pre-configured modules
• Webpack
• Karma
• Grunt
• TypeScript/Typings

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

14. TOOLING
STARTING A SPFX PROJECT

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

16. CLIENT-SIDE FRAMEWORKS
WHAT TO USE TO BUILD YOUR APP
(Use the client-side framework best suited for your team)

17. CLIENT-SIDE FRAMEWORKS
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

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