SharePoint Framework get started and best practices

SharePoint Framework get
started and best practices
GIUSEPPE MARCHI - @PEPPEDOTNET
GIULIANO DE LUCA - @GIULEON
WPC2017 2

Agenda
• SharePoint Framework (SPFx) intro
• Toolchain
• WebParts
• Extensions
• Data access
• Office UI Fabric integration
• Architecture and deployment process
• Roadmap: a look to the future
WPC2017 3

Hi! My name is Peppe!
Co-founder of Dev4Side S.r.l.
8 years Microsoft SharePoint MVP
Speaker in Microsoft communities events in Italy
"SharePointer" from 2005
Father of www.peppedotnet.it 
Office 365 advisor for www.office365italia.com
Author of the book "Pocket C#" from Apogeo
One of the top SharePoint and Office 365 influencers (for 2014 and 2015)
WPC2017 4

Hi! My name is Giuliano!
Software Engineer
Blogger: www.delucagiuliano.com
Speaker in various SharePoint Saturday
Twitter: @giuleon
GitHub: https://github.com/giuleon
Contributor for SPFx on Microsoft GitHub
WPC2017 5

SharePoint
Framework intro
WELCOME TO THE NEW WAY FOR CUSTOMIZING
SHAREPOINT ON-PREM AND ONLINE
WPC2017 6

What is it?
WPC2017 7
Already available on
SharePoint Online and
also for SharePoint
2016*!

What’s a modern page?
WPC2017 8

Is all SPOnline development in Javascript?
WPC2017 9
No
In similar ways as with SharePoint Add-in
model, server side development is needed
for back end services
SharePoint Framework concentrates on user
interface, not on fundamentals around the
API usage

Toolchain
TOOLING
Typescript
Node.js
Yeoman
Gulp
WebPack
Visual Studio (Code)
FRAMEWORKS (CHOOSE YOURS)
React
Angular.js
Knockout
Vue.js
WPC2017 10

What I can do with SPFx?
WEBPARTS EXTENSIONS
WPC2017 11
Application customizers
Field customizers
Command Sets

DEMO  yo @microsoft/sharepoint
How to create your first SPFx web part
WPC2017 12

You have two options for data access:
WPC2017 14
Call external services
• You can build API for custom activities
• You need to take care about auth flow
• You can call Graph APIs*
Interact with SharePoint
• Read/write from SharePoint lists
• The classic behavior of a webpart
• Use SharePoint REST APIs
• Use PNP Core Js library

DEMO  npm install pnp-js-core --save
How to quickly read/update SharePoint list data
WPC2017 15

Office UI Fabric
integration
YOUR WEBPART CAN LOOK GOOD EASLY!
WPC2017 16

Your webpart should look modern,
responsive and with a beautiful UI!
WPC2017 17
"KEEP CALM AND
USE OFFICE UI
FABRIC“
- SATYA NADELLA
OHH NOOO ! I’M
NOT A DESIGNERWAIT A MINUTE
GIULIANO, I NEVER
SAID THIS….

What is Office UI Fabric?
Front-End Framework
Responsive and mobile-first
Office 365 User Experience
Support to React, Angular, JS and IOS
Many components available
Open source
WPC2017 18

A lot of components ready-to-use
WPC2017 19

And it’s all open source
WPC2017 21
Fabric JS
Lightweight and
simple
components in
vanilla Javascript
Fabric IOS
Native iOS styling
and components
written in Swift
AngularJS
Community-driven
project for Angular
apps
React
Fabric’s robust,
up-to-date
components are
built with React

DEMO  npm install office-ui-fabric --save
How to give a style to your web part
WPC2017 22

Architecture and
deployment process
WHERE MY FILES WILL BE EXECUTED?
HOW CAN I DISTRIBUTE MY SOLUTION?
WPC2017 23

SPFx solution architecture
WPC2017 24
Azure CDN
SharePoint
Online CDN

SharePoint Online is your CDN!
WPC2017 25
https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>/

Security considerations
WPC2017 26
SPFx solutions
are running in
the context of
user

DEMO  gulp bundle --ship
How you can automate SPFx solution deployment
WPC2017 27

Roadmap
TAKE A LOOK TO THE FUTURE
WPC2017 28

SPFx roadmap
Site Collection App Catalog to allow for scoped deployment
Assets included in deployment packages
Site Designs
More Microsoft Graph support
Groupify APIs & Hub site APIs
WPC2017 29

Q&A Domande e risposte
WPC2017 30

Corsi
consigliati
• MOCXXXXX
• MOCXXXXX
• MOCXXXXX
• OECXXX
WPC2017 31

Contatti
OverNet Education
Info@OverNetEducation.it
www.OverNetEducation.it
Rozzano (MI) +39 02 365738
Bologna +39 051 269911
www.wpc-overneteducation.it
ROZZANO (MI) – BOLOGNA
ROMA – NAPOLI – GENOVA
TORINO
WPC2017 32

SharePoint Framework get started and best practices

SharePoint Framework get started and best practices

Recommended

More Related Content

What's hot

What's hot(20)

Similar to SharePoint Framework get started and best practices

Similar to SharePoint Framework get started and best practices(20)

More from Giuliano De Luca

More from Giuliano De Luca(6)

Recently uploaded

Recently uploaded(20)

SharePoint Framework get started and best practices