This session is about building client-side web parts, list-based and page-based applications on SharePoint. I'll show the workbench, the web part and a list based application, React and how to apply simple CSS styles for typography, color, icons, animations, and responsive grid layouts with Office UI Fabric.

1. Sonja Madsen
D01: SharePoint
Framework, React and
Office UI Fabric
May 28th 2016
#SPSParis @sonjamadsen

2. Diamond
Platinum
Gold
Silver
Organizers
& Community
www.spsevents.org/city/Paris/
Paris2016
Keynote Speaker: Jeff Teper
Microsoft Corporate
Vice-President
SharePoint + OneDrive
Donation

4. Dont’ miss / Ne ratez
pas
Keynote Jeff Teper Corporate
Vice President - OneDrive +
SharePoint
Who is Jeff Teper: A true leader;
leading product strategy and
engineering for consumer and
enterprise business with >300M
users and >$3 billion in revenues.
Managing 800+ person
engineering team spanning cloud
services to mobile applications.

5. Tombala / Raffle
After Jeff Teper’s Keynote Après la Keynote de Jeff Teper
2
4
2
1
4
4
3

6. SharePoint Framework,
React,
Office UI Fabric
SPS Paris 2015, Branding Office 365
SPS Paris 2016, SharePoint Framework, Office UI Fabric, React

7. SONJAsAPPS
Madsen

8. SharePoint Framework, React, Office UI Fabric

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

10. The Grid

11. Demo Office UI Fabric

12. SharePoint Framework
• Client-side web parts
• List-based and page-based applications
• Webhooks
• The future of SharePoint development

13. No isolated app web
No app domain

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

15. Development
&
Visual Studio Code
Visual Studio
&
SharePoint 2016
WORKBENCH

17. Demo Web Part and
Workbench

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

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

20. 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");
};

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

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

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

24. Concerns / Issues
• Updates and versioning
• 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

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. Demo React

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

29. Demo List-based application

30. Page-based applications
Site Pages Library
Pages

31. Demo page-based application

32. Webhooks
• List item receivers
• Add item, delete item, check-out, check-in

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

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

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

36. Thank you!
Online evaluation form
Evaluations en ligne
http://bit.ly/SPSParis2016Eval
Merci !