Sunday, 27 May 2018

SharePoint Framework Notes

As the SPFx is progressing and changing rapidly, I shall try to update this page as time goes by. I have been dabbling with the SharePoint Framework (SPFx) for a few months and went to a day workshop with Andrew Connell (AC) on SPFX as the SharePoint Conference 2018 North America on 20 May 2018. I would definitely recommend attending Andrew Connell training (I have gone to a lot of workshops and presentations over the years and he is excellent) I am not an expert but these notes are my summary of items to be aware of.

Last Updated:15 June 2018

To use the SPFx on-prem. with SP2016, you need to have feature pack 2. SP2016 only for SPFx web parts does not do SP2019 will be behind SP365 but it shall have all the updates circ May 2018 when it is released circa Sept-Oct 2018.

Safer to user SPFx on modern pages rather than classic SP pages.

Development can be done on any laptop with any editor.

Either build Web Parts in the local or O365 (/_layouts/15/workbench.aspx) Workbench.

Language-wise, use JavaScript or you can use TypeScript which obviously converts down into normal JS but makes it easier to program (e.g. type ahead/intelisense).

Use NVM (allows for multiple versions of Node.js; you may have clients of different versions and NVM allows you to have multiple Node.js versions on a machine) and use the LTS (Long-term support) versions: v8.11.2 or v8.9.4

Install the following pre-reqs using npm: yomen, gulp and the MSfx template for yeomen scaffolding namely @microsoft/sharepoint…

VS code makes a good editor, I think Mark Rackly has built a VS template that will do all the scaffolding instead of using yeoman.

SPFx Eqivalancy Comparison:

SPFx Tool

C# WSP Tool

Desc

Node.js

.NET

Used to run npm and compile the SP package (*.sppkg) using gulp and webpack. Runs a local server to use the tooling

npm

Nuget

Download 3rd party packages/frameworks e.g. jQuery or Angular

yeoman

Visual Studio

Generates basic SPFx web part files, same as a template built using VSIX in VS. Ensure you have all the basic parts to build a SPFx web part

gulp

MSBuild or F5

Builds the package

webpack

NA

checks dependant files are included in the package. AC explained it as shaking the tree (removes unnecessary js libraries and ensure libraries are included)

SP2016 on-prem. Dev vs No FTC Sp2016 on-prem. vs SPO SPFx

WSP

Timer

Custom Service Apps

Event Handlers

References:
https://www.voitanos.io/

Background:
Node.js - Allows you to create a web server and compile JS on the server-side. It's 2 main functions to use in SP are: 1) Need it for local development workbench and 2) Node.js has npm (package manager) built in, you need node.js that uses npm and webpack to uses gulp to build packages (like we did with MSBuild for WSP's).
webpack - build tool that manages code. Manges styles and JS files.