1. SharePoint + CRM Saturday Zurich 2017
SharePoint Framework the new development way
Giuliano De Luca / @giuleon
#Spszurich #crmsaturday

3. www.delucagiuliano.com
SharePoint + CRM Saturday Zurich
May 13, 2017

4. • SharePoint Framework
• Toolchain
• Office UI Fabric
• SharePoint Framework Considerations
• Resources

5. Already available on
SharePoint Online
In the future also for
SharePoint On-Prem 2016

6. • Tooling
• Node.js
• Yeoman
• Gulp
• TypeScript
• Visual Studio (Code)
• Frameworks – Choose yours
• React
• Angular.js
• Knockout
• Etc.
SharePoint Framework Toolchain

7. IIS Express
VS Project 
New  <Template>

12. Tasks Purpose
gulp serve Serving the local development environment (--nobrowser is optional)
gulp build Builds the project (transpiling)  check “lib” folder
gulp test Runs the unit tests if you have written any
gulp bundle | gulp Build project in DEBUG mode  check “dist” folder
gulp bundle --ship | gulp --ship Build project in SHIP mode / ready for distribution  check “temp” folder
gulp package-solution Packages the DEBUG solution as an app package  check “sharepoint” folder
gulp package-solution --ship Packages the production ready solution  check “sharepoint” folder
gulp deploy-azure-storage Add the files to your Azure CDN
gulp clean Cleans the project from build artifacts (remove previous builds)
gulp trust-dev-cert Add a developer certificate to your client  necessary for local development
gulp untrust-dev-cert

13. Demo Hello Word Web Part

14. "Keep calm and use
Office UI Fabric“
- Satya Nadella
Ohh Nooo ! I’m not
a designer
Wait a minute
Giuliano, I never
said this….

17. 708 Icons available

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

21. Class Name Range Breakpoint
ms-u-smxx 320px - 479px Small
ms-u-mdxx 480px - 639px Medium
ms-u-lgxx 640px - 1023px Large
ms-u-xxx 1024px - 1365px Extra Large
ms-u-xxxx 1366px - 1919px Extra Extra Large
ms-u-xxxxx 1920px and up Extra Extra Extra Large

23. Demo

24. Azure CDN
SharePoint
Online CDN

25. https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>/

26. SPFx solutions
are running in
the context of
user

27. SPFx
• Solutions are
deployed centrally as
a tenant admin
• JavaScript is executed
with the permissions
of end user
Add-ins
• Isolated
functionalities hosted
either in iframe or
outside of the
SharePoint
Script editor web part
• Scripts are added on
the pages by end
users
• Scripts can be hosted
anywhere
• Same with content
editor web part
Script embedding
• Embedding scripts
with
Usercustomactions or
JSLink
• JavaScript files can be
added by site owners
using API
• JS files hosted in the
site
Characteristics
Centralized
approval
Permissions
model
Works on
‘no-script’
sites

28. So I'll write my code in
typescript and do I have to
debug in javascript ? That's
not really comfortable.
Of course not, you will go in
debug using ever typescript.

32. https://goo.gl/iRZZd7
https://goo.gl/SEUflx
https://goo.gl/Y46vkA
https://goo.gl/NmRG7j
https://goo.gl/uXnZJd
https://goo.gl/SJ1VHW
https://dev.office.com/fabric
http://www.delucagiuliano.com