Presentación de Gustavo Velez sobre Introducción al SharePoint Framework en el Workshop de desarrollo para Office 365 del SharePoint Saturday Madrid 2017.

1. May 20th, 2017
SharePoint Saturday
Madrid
Introducción al SharePoint Framework SPFx
Gustavo Velez

2. Gustavo Velez
MVP Office Servers And Services
Portiva
http://www.gavd.net
gustavo@gavd.net
http://www.compartimoss.com

4. Introducción
 Que es el SharePoint Framework SPFx
 WebParts de Cliente
 Herramientas para desarrollar con el SPFx
 Configuración de maquinas de desarrollo
 Configuración de Office 365
 Que nos trae el futuro
 Conclusiones, preguntas, etc.

6. SharePoint UX – Evolución a través de sus versiones
2009
SharePoint
Server 2010
2006
Office SharePoint
Server 2007
2003
SharePoint
Portal Server 2003
2001
SharePoint
Portal Server 2001
2012
SharePoint
Server 2013
2016 …
SharePoint
Server 2016, SPO

7. SharePoint Framework

8. SharePoint Framework

9. Entonces el SharePoint Framework es:

10. The SharePoint Framework is
made for “Modern Pages”

11. Demo Paginas Modernas en SharePoint

12. Modern Pages: mobile, fast, and powerful

14. Web Parts
SharePoint WebParts

15. SPFx Client-Side WebParts

16. Demo Client-Site WebParts

18. Open source tooling

19. IIS Express
Project Templates
Server/Client Side WebParts tool comparison
MSBuild C#

20. npm – Node Package Manager
• Similar ways as NuGet is for .NET framework managed code
https://www.npmjs.com/

21. Yeoman - Templates
• Similar ways as Templates is for Visual Studio
http://yeoman.io

22. gulp – Your task and build manager
• Task manager in similar ways as MS Build has been classically for
Visual Studio projects
http://gulpjs.com/

23. TypeScript – Typed JavaScript
https://www.typescriptlang.org/

24. Office UI Fabric
Fonts, icons Colors

26. 1. Install developer tools
2. Install Yeoman and gulp
3. Install Yeoman SharePoint generator
4. Install optional tools
Setting Up Your Computer: Steps

27. Linux
Install developer tools – NodeJS and npm
NodeJS
homebrew
sudo npm install -g npm@3
npm install -g npm@3
** It will also install NodeJS, but we need only npm…

28. Install developer tools – Windows Build Tools
sudo yum install make automake gcc gcc-c++ kernel-devel
npm install -g --production windows-build-tools
sudo apt-get install build-essential
** It will also install Python 2.7 (and Visual C++ Build Tools 2015) …

29. Yeoman helps you kick-start new projects
SharePoint client-side development tools include a Yeoman
generator for creating new web parts.
Install Yeoman and gulp
npm install -g yo gulp

30. The Yeoman SharePoint web part generator helps you quickly create a
SharePoint client-side solution project with the right toolchain and
project structure.
Install Yeoman SharePoint generator
npm install -g @microsoft/generator-sharepoint

31. Install developer tools – Code Editors
Visual Studio Code
Sublime
Atom
Webstorm
** Not all these tools are required. Just install the ones you want to use

32. Install developer tools – Visual Studio
Visual Studio 2015
Visual Studio Update 3 or later
Node.js Tools for Visual Studio

33. • Fiddler (HTTP debugging by recording Web traffic)
• Postman plugin for Chrome (Fiddler on steroids)
• Cmder for Windows (console emulator)
• Oh My Zsh for Mac (??)
• Git source control tools
• Etc., etc., etc…
Install optional tools

34. Demo Development machine

36. • Sign up for an Office 365 Developer Tenant
• Create app catalog site
• Create a new Developer Site collection
• SharePoint Workbench
Office 365 Developer Tenant Setup Steps
http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant

37. • Sign up for the Office Developer Program (https://dev.office.com/devprogram)
• Gets one-year, free Office 365 developer subscription
• You will receive a welcome mail with a link to sign up for an Office 365
Developer Tenant
• One user allowed
• Or go to https://products.office.com and
• Make a 30 days trial tenant (choose “Office 365 Business Premium”)
• 25 users allowed
• Create a new Azure AD Tenant
• Not obligatory
• Necessary to experiment with some functionality (PnP for example)
• Trial for 30 days
• Only one AD Tenant for each Credit Card
Sign up for an Office 365 Developer Tenant

38. https://yourtenantprefix-admin.sharepoint.com
Create app catalog site

39. https://yourtenantprefix-admin.sharepoint.com
Create a new Developer Site collection

40. Workbench simulates the use of a Client-Site WebPart:
- In the development machine for testing:
- Starts a browser with the WebPart loaded
- No data-connection, but it can be simulated
- In SharePoint 365 tenant for testing:
- You can access the SharePoint Workbench from any SharePoint site
in your tenancy by browsing to the URL https://your-sharepoint-
site/_layouts/workbench.aspx
- Allows data-connection with SharePoint environment
SharePoint Workbench

41. Demo Client WebPart

43. • On-premises support (Shipping as part of Feature Pack)
• Client-Side web parts++ and add-ins
• Easy access to Graph API to access user specific information
• Part-to-part communication
• JS Framework isolation
• Azure AD Registration
• Build Add-Ins with SharePoint Framework
• The same tool chain and deployment model as client side web parts
• Derive from a strongly typed base class wherever possible rather than manipulating the page DOM directly
• Replacing custom actions and JSLinks with SharePoint Framework-based extensions
• Application Lifecyle Management
• Owner initiate the approval process
• Tenant admin gets automatically notified
• ALM REST APIs - Deploy, activate, delete and upgrade apps and add-ins
• ALM REST APIs targeted to support everything in the App Catalog, including add-ins
• Automatic CDN hosting for code
SPFx Roadmap

44. • Developer Experience
• SharePoint Framework Workbench 2.0: Development story beyond web parts with support for new
component types on top of client-side web parts
• Additional Yeoman Templates
• Full Page Apps
• Build SharePoint Framework apps, which render in full page mode, rather than as a client-side web part
• List level: custom view item, edit item, delete item, add item
• Page level: assign an app to a page to a full custom page experience
SPFx Roadmap

45. - Las herramientas de trabajo son feas… comandos y mas comandos
- Proyecto de 35.000 archivos para producir UN archivo de código
- Conflictos de autorización (no separación en WebParts)
- Es código de cliente: como lo aseguro para que no me lo copien?
- (Algo bueno, por favor) Comparado con el desarrollo de WebParts de
Servidor, las de Cliente son mas fáciles de desarrollar (opinión personal)
- (Otro bueno) Maquina de desarrollo de muy, muy bajo costo
- Significan las WebParts de Cliente una resurrección del desarrollo para
SharePoint?
Lo malo, lo feo… y lo bueno

47. - Nueva forma para crear WebParts (y personalizaciones) para
SharePoint
- SPFx esta aquí para quedarse (por el momento, al menos)…
- Si no maneja JavaScript, comience a aprenderlo, lo va a necesitar…
Preguntas
Sumario

48. Gold sponsors ______________
Silver sponsors
Bronze sponsors
Collaborate
Platinum sponsor

49. INSTALLATION
01 - Install NodeJS Long Term Support (LTS) (latest version) (https://nodejs.org/en/)
02 - Install npm --> npm install -g npm@3
03 - Install windows-build-tools --> npm install -g --production windows-build-tools
04 - Install Yeoman and Gulp --> npm install -g yo gulp
05 - Install Yeoman SharePoint generator --> npm install -g @microsoft/generator-sharepoint
WEBPART
06 - Create directory --> md blabla --> cd blabla
07 - Create project with Yeoman (5 min) --> yo @microsoft/sharepoint
08 - Start VS Code (don't forget " .") --> code .
09 - Install dev. certif. (only one time) --> gulp trust-dev-cert
DEPLOY TO LOCAL WORKBENCH
10 - Build and preview the WebPart --> gulp serve (stop with Ctrl+C)
DEPLOY TO SHAREPOINT FROM LOCAL
11 - Generate the package for SP Catalog --> gulp package-solution (Pack in "..sharepointsolution")
12 - Start Gulp in dev environment --> gulp serve --nobrowser
13 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page
DEPLOY TO SHAREPOINT FROM SHAREPOINT LIBRARY
14 - Create Library in SharePoint
15 - In "config/write-manifests.json" --> use the Library full path as cdnBasePath (and Save)
16 - Create the files to deploy --> gulp bundle --ship ("--ship" for release build version)
17 - Copy the generated files --> (files in "..tempdeploy") to the Library
18 - Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
19 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page

50. DEPLOY TO SHAREPOINT FROM SHAREPOINT CDN
20 - Configure SharePoint CDN --> Run Cmdlets to make one Library or folder the SharePoint CDN
Needs to have the SP Online PowerShell Cmdlets already installed (https://www.microsoft.com/en-
us/download/details.aspx?id=35588)
$creds = Get-Credential
Connect-SPOService -Url https://contoso-admin.sharepoint.com/ -Credential $creds
Set-SPOTenant -PublicCdnEnabled $true
New-SPOPublicCdnOrigin -Url "https://contoso.sharepoint.com/siteassets/folder1"
21 - Get the ID of the SP CDN Library --> Get-SPOPublicCdnOrigins (Copy the ID of the SharePoint CDN repository)
22 - In "config/write-manifests.json" --> use the following path as cdnBasePath (and Save)
"https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the SharePoint CDN>/<sub-path under the origin>"
for example, if the Library is in the root of the Tenant:
"https://publiccdn.sharepointonline.com/contoso.sharepoint.com/17280044dc65df7..."
23 - Create the files to deploy --> gulp bundle --ship ("--ship" for release build version)
24 - Copy the generated files --> (files in "..tempdeploy") to the SP CDN Library
25 - Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
26 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page
DEPLOY TO SHAREPOINT FROM AZURE CDN
- In Azure create a Resource Group
- In the Resource Group create a Storage Account (example spfxstoragegavd)
- In the Storage create a Blob Container (example ss01webpart)
- In the Resource Group create a CDN Profile
- In the CDN Profile create a CDN Endpoint (example ss01webpartendpoint)
- In "config/deploy-azure-storage.json" --> Change the values (and save):
account == The Storage Account Name (in the example spfxstoragegavd)
container == The Blob Container Name (in the example ss01webpart)
accessKey == In the storage account dashboard, choose Access Key in the dashboard and copy the first access keys
- In "config/write-manifests.json" --> in the cdnBasePath use (and save):
"https:// + "Endpoint hostname" + ".azureedge.net/" + Name of the Container in the Storage Blob + "/"
in the example: "https://ss01webpartendpoint.azureedge.net/ss01webpart/")
- Buil the assets (.js, .css, etc.) --> gulp bundle --ship
- Deploy the assets to the Azure Storage --> gulp deploy-azure-storage
- Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
- Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page