The document provides an overview of the SharePoint Framework (SPFx), detailing its web part development model that supports client-side development and integrates with SharePoint and Office 365 data. It outlines various tools and prerequisites for setting up the development environment, deployment options, and the process for enabling multilingual capabilities. Additionally, it discusses the advantages of continuous build and deployment in reducing effort and ensuring streamlined management of solutions.

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