The slide talks about getting started with SharePoint Framework Web parts - A session on this topic was given @ Global Office 365 Developer Boot camp Coimbatore

1. Deep Dive into SharePoint Framework Web Parts
Jayakumar Balasubramaniam
(Product Engineer, Hubfly)
Joseph Velliah
(Head of Delivery, Hubfly)

2. SharePoint Framework Overview
• SharePoint was launched as an on-premises product in 2001.
• Many features were written in C#, compiled to DLLs, and deployed to
on-premises farms.
• Didn’t scale to the cloud, where multiple tenants run side-by-side.
• JavaScript injection and SharePoint Add-in model

3. JavaScript Injection
Pros
• Paste JavaScript and execute when the page renders
• Runs in the same browser context as the page
• Same DOM
Cons
• Can't easily provide configuration options.
• End user can edit the page and modify the script, which can break the web
part.
• Script Editor web part is not marked as "Safe For Scripting".

4. SharePoint Add-in model
Pros
• Creates an iFrame where the actual experience resides and executes
• End users can install add-ins on NoScript sites.
Cons
• iFrames are slower than the Script Editor web part, because it requires a new
request to another page.
• Go through authentication and authorization,

5. SharePoint Development Model - History

6. What is SharePoint Framework?
A web part development model with full support for client-side
development
• Common open source client development tools such as npm, TypeScript,
Yeoman, webpack, and gulp.
• Easy integration with SharePoint and Office 365 Data
• Available in the cloud and on-prem
• Runs in the context of the current user and connection in the browser.
• Responsive and mobile-ready
• No server side code
• Not dependent on JavaScript Injection
• No iFrame

7. Toolchain Comparison

8. SharePoint Components
• Web Parts
• Extensions
• Application customizer
• Field Customizer
• ListView Command Set

9. Prerequisites
• Office 365/ SharePoint
• App Catalog
• Development workstation
• PC/iOS/Linux
• Tool chain in open source
• Code Editor
• Notepad/Visual Studio Code

10. Setup development environment
• Install NodeJS
• Check your node version using node -v
• Install Code Editor (Preferably Visual studio code)
• Install Yeoman and gulp
npm install -g yo gulp
• Install Yeoman SharePoint generator
npm install -g @microsoft/generator-sharepoint

11. Create and connect with SharePoint
• Create SPFx webpart/extension
yo @microsoft/sharepoint
• Connect your web part with SharePoint
this.context.pageContext

12. Demo

13. Preview Web Part in SharePoint Workbench
• Ensure dev certifcate to run in local server
• gulp trust-dev-cert
• Test your webpart without deploying/adding in a page.
• gulp serve
• https://localhost:4321/temp/workbench.html
• gulp serve --nobrowser
• https://sitecollectionurl/_layouts/15/workbench.aspx

14. Deploy your webpart with simple commands
• Deployment options:
• Office 365 CDN (if enabled)
• App catalog
• Azure CDN
• Packaging commands
• gulp bundle –ship
• gulp package-solution (To run from local (debug mode))
• gulp package-solution --ship

15. Enabling Multilingual/Localization
• SPFx provides options to enable multilingual in a simple way.
this.context.pageContext.cultureInfo.currentUICultureName
• Two ways of testing Localization
• Specify the locale to be tested in the project configuration.
• Specify the locale to be tested by using the command-line argument.

16. SPFx app structure
• Adding Multiple web part in same solution.
• Folder structure in SharePoint Framework solution.

17. SPFx Config setups
• Change bundle file name prefix in config.json
• Update webpart folder name in config.json
• Update solution name that deploy's in AppCatalog in package-solution.json
• Update app version in package-solution.json
• Manage deploying in Office365 in package-solution.json
• Configure solution package name in package-solution.json
• Handle CSS to fit with Microsoft Styles

18. Continued...
• Hide webpart from toolbox through webpart manifest file
• Make the webpart as fullbleed through webpart manifest file
• Set Icons for the webpart through webpart manifest file
• Manage cdn base path in write-manifests.json
• Manage localhost port in serve.json
• Manage azure cdn storage details in deploy-azure-storage.json
• Manage local path to publish files in copy-assets.json
• Update localization refernece in bundle json

19. Graph and 3rd Party API

20. Modern Intranet in SharePoint Framework
www.hubfly.com

21. Current Build and Deployment Process

22. Issues/Cons
• Time consuming build preparation
• Manual deployment
• Complex app upgrade process

23. Continuous Build and Deployment

24. Advantages
• Reduced admins and dev efforts
• No additional asset hosting location needed such as Akamai as we can use O365 Public
CDN or App Catalog
• Organization in control of solution assets and rapid deployment
• Reduced packaging mistakes such as wrong environmental variable configuration such as
CDN URLs
• Possible to promote the same package to Dev, Test and Prod Tenants
• Code review and Test case integration

25. Points to consider
• App upgrade process based on app functionalities
• What will happen to existing solutions/apps in use?
• Rollback process