The document discusses the SharePoint Framework and its integration with React and Office UI Fabric in developing web parts and applications for SharePoint, both on-premise and Office 365. It highlights the advantages of using SharePoint Framework, such as responsiveness, lack of iframe usage, and easier access to SharePoint resources, while also providing an overview of development tools and techniques including TypeScript, JavaScript, and CDN hosting. The piece also compares Office UI Fabric with Bootstrap and emphasizes the shift towards component-based architecture in React for better application management and data flow.

1. SharePoint Framework,
React, and Office UI Fabric
Sonja Madsen

2. Office Blog
blogs.office.com

3. SharePoint
Dev Kitchen

4. SharePoint Future
Web parts,
list-based,
page-based applications
• SharePoint on-
premise
• Office 365

5. Sonja Madsen
@sonjamadsen dev@sonjasapps.com
Sonja Madsen
Microsoft MVP, SONJAsAPPS
Best International Developer

6. SharePoint Farm
Solutions
Sandbox
Solutions
SharePoint
apps/add-ins
SharePoint
Framework

7. No isolated app web
No app domain

8. Development
• Visual Studio Code, Visual Studio
• TypeScript
• React is a suggested framework
• Office UI Fabric

9. Development
&
Visual Studio Code
Visual Studio
& WORKBENCH

10. DEMO

11. Web part
Page-based
application
SharePoint Framework
List-based
application

12. Office UI Fabric

13. • dev.office.com/fabric/styles
• Fonts, colors
• Grid
• Icons
• Controls
Office UI Fabric

14. The Grid

15. Office UI Fabric vs. Bootstrap
• Bootstrap version 4
• Bootstrap theme
• Bootstrap css and js
• Office UI look and feel
• Office controls
• Out-of-box

16. What’s new
• TypeScript –> JavaScript
• LESS -> CSS
• .spapp package
• Hosting of js and other files
• No cross-domain
• No .aspx page with HTML

17. Why TypeScript
context = new
SP.ClientContext.get_current();
var contextvar context
var
context
var context

18. JavaScript Patterns
function getImages() {
context = new
SP.ClientContext.get_current();
var request = new
SP.WebRequestInfo();
var url = rssurl;
var account =
getProperty("Account");
}
var myApp = (function () {
var getImages = function ()
{
context = new
SP.ClientContext.get_current();
var request = new
SP.WebRequestInfo();
var url = rssurl;
var account =
getProperty("Account");
};

19. .spapp package
No .wsp, no .js, no .css, no images

20. .spapp  SharePoint App Catalog

21. Microsoft Azure CDN point of presence
(POP) locations

22. .js file on
CDN
.js file in
Style Library
.js file in the
Scripts folder
.js file in
Style Library

23. Hosting on a CDN or remote server
• Updates and versioning
• Price
• IP: Anonymous access to .js and .css files that are no longer
within the app
• CDN hosting and security: files that have access to your data
• Reference my .js files - highjack functionality and design

24. DEMO

25. Reactjs
• React is front end library developed by Facebook
• Used for handling view layer for web and mobile apps
• JSX − JSX is JavaScript syntax extension
• Components − everything is a component
• Unidirectional data flow and Flux − React implements one way
data flow
• Virtual DOM which is JavaScript object
• Inline templating and JSX

26. Render with React
public render(mode: DisplayMode,
data?: IWebPartData) {
this.domElement.innerHTML = `
<div class="Demowp">
<div
class="Container">
<div class="ms-
Grid-row ms-bgColor-themeDark ms-
fontColor-white intro">
<div
class="ms-Grid-col ms-u-lg10 ms-u-
xl8 ms-u-xlPush2 ms-u-lgPush1">
<h1>Hello</h1>
public render(mode: DisplayMode,
data?: IWebPartData) {
let e: any = React.createElement(
demoreactwpComponent,
{
store: this._store,
listTitle:
this.properties.listTitle
});
ReactDOM.render(e,
this.domElement);

27. DEMO

28. List-based applications
A list with custom list form pages
Main page
Any other page
New item, Edit item, Display item

29. DEMO

30. Page-based applications
Client side pages library
Pages

31. DEMO

32. SharePoint Add-ins - Advantages
• You can hide the lists from end-user
• Both pages and an app part
• .aspx page – HTML
• Images, scripts, stylesheets hosted on SharePoint
• Isolated is not always a bad thing

33. SharePoint Framework - Advantages
• Responsive mobile friendly
• No iframe
• Dynamic properties
• Webhooks
• List-based and Page-based
• No need for cross-domain library to access SharePoint resources

34. Summary

35. @sonjamadsen
sp2013.blogspot.com
dev@sonjasapps.com