sharepoint framework, react and office ui sps paris 2016 - d01

Sonja MadsenD01: SharePoint Framework, React and Office UI FabricMay 28th 2016#SPSParis @sonjamadsen

Diamond

Platinum

Gold

Silver

Organizers& Community

www.spsevents.org/city/Paris/Paris2016

Keynote Speaker: Jeff Teper Microsoft Corporate

Vice-PresidentSharePoint + OneDrive

Donation

Dont’ miss / Ne ratez pasKeynote 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.

Tombala / Raffle

After Jeff Teper’s KeynoteAprès la Keynote de Jeff Teper

2

4

21

4

4

3

SharePoint Framework,

React,

Office UI Fabric

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

Microsoft MVP, SONJAsAPPSBest International Developer

Sonja Madsen

SharePoint Framework, React, Office UI Fabric

Office UI Fabric

dev.office.com/fabric/stylesFonts, colorsGridIconsControls

The Grid

Demo Office UI Fabric

SharePoint Framework • Client-side web parts• List-based and page-based

applications• Webhooks• The future of SharePoint

development

No isolated app webNo app domain

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

Development

&

Visual Studio CodeVisual Studio

&

SharePoint 2016

WORKBENCH

Demo Web Part and Workbench

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

context = new SP.ClientContext.get_current();

var context var context

var context var context

Why TypeScript

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

.spapp package

No .wsp, no .js, no .css, no images

Microsoft Azure CDN point of presence (POP) locations

.js file on CDN

.js file in Style Library

.js file in the Scripts folder

.js file in Style Library

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

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

Demo React

List-based applications

A list with custom list form pages

Main page

Any other page

New item, Edit item, Display item

Demo List-based application

Page-based applicationsSite Pages Library

Pages

Demo page-based application

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

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

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

SharePoint Framework @sonjamadsen

sp2013.blogspot.com dev@sonjasapps.com

Thank you!

Online evaluation formEvaluations en ligne

http://bit.ly/SPSParis2016Eval

Merci !