Showing posts with label SPFx. Show all posts
Showing posts with label SPFx. Show all posts

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.

  • What you need is 1. Node.js, 2. npm, 3. Yeoman, 4. GULP, 5. Webpack (used to check and load dependency JS modules).  AC suggests for simplicity install and forget about: Node.js, Yeoman, Gulp and webpack.  You'll use them but you don't really need to understand them.
  • 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.  Manages styles and JS files.