sharepoint framework, react and office ui sps paris 2016 - d01
TRANSCRIPT
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
Thank you!
Online evaluation formEvaluations en ligne
http://bit.ly/SPSParis2016Eval
Merci !