1. SharePoint Framework (SPFx)
Gosia Borzecka
@gosiaborzecka

2. About me
@gosiaborzecka

3. Agenda What is SharePoint and Office 365 Overview of SPFx Demo SummaryQA

5. What is SharePoint?

6. SharePoint on-premises
SharePoint Online

7. What is Office 365?

8. Office 365 Roadmap

9. SharePoint Development
Farm based
Sanboxes
SharePoint Add-ins
Manual injecting JS file

10. What is SharePoint Framework (SPFx)?
Client-side SharePoint development
Open Source tooling
Responsive and mobile-ready
Works for SharePoint Online and SharePoint on-premises

11. Modern Pages

12. Main Components NodeJS Npmjs Gulp TypeScript Yeoman
build & run the applications
NodeJS
manages the dependencies required for the application
Npmjs
automate the tasks of building and running the solution
Gulp
Build the application and compile into clean, simple JavaScript code
TypeScript
create a solution structure for the application
Yeoman

13. Extra Components Visual Studio Code GitHub JS Frameworks
edit and manage the source code
Visual Studio Code
contribute the source
GitHub
use any type of JS Framework (React, AngularJS, KnockoutJS etc..)
JS Frameworks

14. IIS Express C#
Project Templates
MSBuild

15. How to start? npm install –g bower npm install –g yo
npm install –g tsd
npm install –g gulp-cli
npm

16. DEMO Modern Page Environment Display Mode Page Context Debugging
Logging
Mock Data
List
Deploy on SharePoint
DEMO

17. Workbench Local SharePoint Runs on https://localhost
Has no SharePoint Context
Use mock data
SharePoint
Runs on SharePoint Site (
Has SharePoint Context
Use SharePoint data

18. Helpful commands create new project / add new web part
create new project / add new web part
gulp bundle
build and bundle project
gulp serve
bundle project and start Workbench
gulp package-solution
build solution package (.spapp)
gulp nuke
delete build and intermediate folders
gulp test
run tests
gulp trust-dev-cert
generates and trusts a development certificate
--ship
argument to execute a release build

19. Property Pane Text Button Checkbox ChoiceGroup Custom DropDown
PropertyPaneTextField
Text
PropertyPaneButton
Button
PropertyPaneCheckbox
Checkbox
PropertyPaneChoiceGroup
ChoiceGroup
PropertyPaneCustomField
Custom
PropertyPaneDropdown
DropDown
PropertyPaneHorizontalRule
HorizontalRule
PropertyPaneLabel
Label
PropertyPaneLink
Link
PropertyPaneSlider
Slider

20. Environment
import { EnvironmentType } from
this.context.environment.type
Values:
EnvironmentType.Tests – Tests context
EnvironmentType.Local – SharePoint Workbench
EnvironmentType.SharePoint – Modern SharePoint page
EnvironmentType.ClassicSharePoint – Classic SharePoint Page

21. Display mode
DisplayMode.Edit
DisplayMode.Read

22. Logging
Log.info('HelloWorld', 'Info message', this.context.serviceScope);
Log.warn('HelloWorld', 'Warn message', this.context.serviceScope);
Log.error('HelloWorld', new Error('Error message'), this.context.serviceScope);
Log.verbose('HelloWorld', 'Verbose message', this.context.serviceScope);

23. Deploy > $creds = Get-Credential
> Connect-SPOService -Url -Credential $creds
> Set-SPOTenant -PublicCdnEnabled $true
> Set-SPOTenant -PublicCdnAllowedFileTypes "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT"
> New-SPOPublicCdnOrigin -Url "
> Get-SPOPublicCdnOrigins

24. Deploy
CDN-origin-Id>
gulp bundle –ship
gulp package-solution –ship
…\temp\deploy -> copy to CDN
…\sharepoint\solution\<webpartname>.sppkg -> deploy on app

25. UI Fabric Fonts, icon Colour Component
Front-end experiences for SharePoint
Powers Microsoft’s own experiences
Available out-of-the-box
Design web parts seamlessly
Office UI Fabric React includes a rich set of reusable controls
Fonts, icon
Colour
Component

26. Microsoft Graph

27. SPFx is open source

28. If you want to know more!
Dev Office
Waldek Mastykarz
Andrew Connell
Vesa Juvonen
Jeff Teper
SharePoint Saturday
UK Community Days

29. https://dev.office.com/

30. @gosiaborzecka
Q&A

31. SAY THANK YOU TO OUR SPONSORS!

32. Sponsor Raffle!!!
Each sponsor stamp will opt you into their raffle prize and mailings
Collect 9+ sponsor stamps on your Badge to be eligible for the Xbox
Hand entire Badge/ ribbon back into registration desk at end of day
We will draw Badges for prizes at 5pm in Cromwell (if you are drawn and do not have the pre- requisite stamp/s….. You lose!)
SQLCloud: XBox One-S with Forza Horizon 3 Bundle; Amazon Fire TV with 4K Ultra HD; Raspberry Pi 3 Starter Kit; dbWatch: Apple iPad Mini; Skybow: Marshall Speaker; Coeo: A free place on any Coeo training course, RRP £600; Edison365: Helicopter ride (lunchtime session prize) and a Fire TV Stick; Pyramid Analytics: Amazon Echo; Quest: Samsung Gear S2 Smartwatch; DBPro/ SQLGovernor: Splash-proof JBL bluetooth speaker; Redgate: SQL Monitor License - with 12 months support and upgrades; Axioworks: Amazon Echo Dot; Idera: $100 Amazon card; Lightning Tools: Lego Technics Race Car; SQL Sentry: SQL Sentry license and 1 year of support (worth $2994); Locke Data: R for Data Science: Import, Tidy, Transform, Visualize, and Model Data; SharePoint Unite /BMM Media: A free pass to SharePoint Unite 2017 conference in Haarlem, Netherlands, on the 25th & 26th October. worth €699. travel and hotel not included; PASS: Recording (download) of all sessions from PASS Summit 2016

33. Social Make sure you tweet on #spscambridge or #sqlsatcambridge
During the event we have Giant Jenga, Sack races and Conker Fights!
After event, join us for a post event SharePint/ SQLPint from our bar
Don’t forget to thank Sponsors, Volunteers and Speakers!
The event will close at 6.30pm

34. Thank you!
@gosiaborzecka