This document summarizes a presentation about building client-side web parts for SharePoint using the SharePoint Framework (SPFx), ReactJS, Office UI Fabric, and the PnP-JS-Core library. The presentation covers the SharePoint Framework model, using ReactJS for views, Office UI Fabric for styling, the PnP-JS-Core library for interacting with SharePoint, and building a sample SPFx web part. It concludes that the modern SharePoint development tools provide choice and allow building reusable components with ReactJS while leveraging Office UI Fabric for beautiful designs and PnP-JS-Core for easy SharePoint REST calls.

1. Building Great
Client-side Web
Parts with SPFx, PnP-
JS-Core, ReactJS
and Office UI Fabric
Bill Ayers
14 octobre 2017
#SPSParis

2. Merci pour votre soutien

4. Eur Ing Dr Bill Ayers
MCM/MCSM Charter SharePoint
MVP, MCT, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, Professional
Scrum Master, etc. etc.
Flow Simulation Ltd.
www.SPDoctor.net
BillA@flosim.com
@SPDoctor
Consultant specialising in SharePoint and
Office 365 Development and Architecture
for Collaboration and Mobile Development

5. • SharePoint Development Backstory
• The SharePoint Framework
• ReactJS
• Office UI Fabric
• OfficeDev PnP and PnP-JS-Core library
• Building an SPFx WebPart
• Conclusions
Agenda

6. Cloud Hosted Add-ins
Remote Web
S2S Trust
OAuth (O365)
SharePoint Web Server
Managed CSOM
or REST
Cross-domain Request
Host Web
X D

7. • Branding
• Add behaviour
• Script Editor Web Part
• Effective, but many problems
SharePoint/Office 365
SharePoint Page
SPWeb
JavaScript Injection
JavaScript
Managed CSOM
or REST API
or MS Graph API

8. Limitations
• No deployment or packaging model – DIY
• No central control
• Master page may change!
• Scripting disabled by default for personal sites and self-service sites in
SharePoint Online and root site collection
• When scripting is disabled…
• Links removed from Site Settings page
• SharePoint Designer capabilities reduced
• Can’t edit master pages or page layouts
• Can’t edit theme for current site
• Missing Web Parts (e.g. Script Editor, Content Editor)
• Can’t upload .aspx files to document libraries
• Enable scripting with UI, CSOM or PowerShell

9. Introducing the SharePoint
Framework (SPFx)
Model for building client-side pages, web
parts and more
Announced May 4th 2016, now GA!
Authoring canvas, no iFrames
Command-line-driven open-source
toolchain (or community VS extension)
Used by SharePoint product team
Works in “modern” and “classic” pages
Your choice of client-side framework;
Angular, React, Knockout, Vanilla.JS ;-)
Office 365/SharePoint Online
On-premises: SP2016 FP2 (now GA)

10. Modern Site Pages
Easily create powerful, beautiful looking
pages
Modern building blocks
Mobile support is built in from the start
Pages get better with the Microsoft Graph

11. New SPFx Extension Types
Announced at //build/ 2017
• ApplicationCustomizers allow developers to add script to the page, as
well as access well-known HTML element placeholders and extend
them with custom renderings
• FieldCustomizers can be used to provide modified views to data for
fields within a list
• CommandSets let developers extend the command surfaces of
SharePoint to add new actions, along with client-side code that can be
used to implement behaviours
• Web Part Connections enable more connected web parts that can work
together to share information
• Communication Sites (announced at #SPSummit)

12. Wait, did you say
“Command-line-driven
open-source toolchain” ?

13. Things You Need…
• Node.js (LTS version)
• Gulp
• Yeoman
• Git
• Editor (e.g. VS Code)
• Yeoman generator for SharePoint Framework
• Technologies like WebPack, SASS and other libraries will
be installed by Node’s package manager - NPM
…or use Visual Studio extension:
https://github.com/SharePoint/sp-dev-fx-vs-extension

14. • Features of next version(s) of
JavaScript/ECMAScript standard
• Compiles to JavaScript (ES5)
• Strong typing, classes
• Original design goal was to make JavaScript
easier for C# developers
• Makes it easier to write production quality
JavaScript
• Good support in VS Code
• Development language for the base templates in
SharePoint Framework
https://www.typescriptlang.org/

15. ReactJS
• Backed by Facebook and Instagram
• Component design (composition)
• Very fast Virtual DOM page rendering model
• Provides the view engine only
• JSX format takes some getting used to 
• TypeScript Compiler has support for JSX (TSX)
• Used by Microsoft
• ReactJS tutorial: https://zapier.com/engineering/react-js-tutorial-guide-
gotchas/ or https://facebook.github.io/react/
var button = <Button>Hello, world!</Button>;

16. Office UI Fabric
• Responsive framework (kind-of)
• Office Design Language for web
• Designed for Office Add-ins by
OneDrive and SharePoint Design Studio
• Consistent look-and-feel with Office
• “Modern”, not “classic” SharePoint CSS
• About 100k, 200k with components
• Available as raw CSS or versions for Angular and React
• Dev.office.com/fabric

17. Office UI Fabric
• Design elements to give add-ins the same look
and feel as the rest of the Office suite
• Consistent typography, icons and behaviour
Link to UI Fabric Stylesheets:
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.components.min.css">
Decorate elements with UI Fabric classes:
<button class="ms-Button" id="get-data-from-selection">
<span class="ms-Button-icon"><em class="ms-Icon ms-Icon--plus"></em></span>
<span class="ms-Button-label">Get Data from selection</span>
<span class="ms-Button-description">Get Data from the document selection</span>
</button>
http://dev.office.com/fabric
Link to UI Fabric JS:
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

18. Office UI Fabric ReactJS
Components
• 30 re-useable React components, ready to use
• Used by Microsoft to build Office and SharePoint
• Angular? See ngOfficeUIFabric
import Button from 'office-ui-fabric-react';
Var b = <Button onClick={() => this.getData() }
className="ms-Button--primary">
Refresh List</Button>
Breadcrumb
Button
Callout
Checkbox
ChoiceGroup
ColorPicker
CommandBar
ContextualMenu
DatePicker
DetailsList
Dialog
DocumentCard
Dropdown
Facepile
GroupedList
Image
Label
Layer
Link
List
MessageBar
Nav
Overlay
Panel
Persona
Pickers
PeoplePicker
Pivot
ProgressIndicator
SearchBox
Slider
Spinner
TextField
Toggle

19. OfficeDev PnP Initiative
• PnP-JS-Core
• Still under development
• JavaScript wrapper for SharePoint REST APIs
• Good fit for SPFx development
• Github.com/SharePoint/PnP-JS-Core
• “Home” of SPFx guidance, documentation, samples, etc.
• Dev.Office.com/SharePoint is starting point
• Code hosted on GitHub

20. Looking at ReactJS
Looking at Office UI Fabric
Looking at OfficeDev PnP-JS-Core
Building an SPFx WebPart

21. Conclusions
• “Modern” SharePoint development
tools are your choice
• The “old” stuff still works
• Build re-usable components with
ReactJS
• PnP-JS-Core makes SharePoint
REST easy
• Office-UI-Fabric makes web parts
beautiful
• We are on a journey – join us!

22. Resources:
• http://dev.office.com/SharePoint
• http://dev.office.com/fabric
• https://facebook.github.io/react/
• https://github.com/SharePoint/PnP-JS-Core
• https://github.com/OfficeDev/TrainingContent/SharePoint
• http://github.com/SPDoctor/SPFXShoppingList
Bingle

24. Thank you, for your for #SPSParis