SharePoint Online Framework Overview

Heba Hegab

SharePoint user experience has been evolving across multiple versions throughout the years.

Nowadays SharePoint exists in two versions:

  • SharePoint Server 2019: this is the on-premises version of SharePoint that customers install and maintain on their servers.
  • SharePoint Online: this is the hosted version of SharePoint, managed as part of Microsoft 365.

SharePoint Framework Overview:

  1. Modern client side development which means that all the customizations the developers create and build will run in the browser.
  2. SharePoint framework components are lightweight and run in both mobile and web experiences exactly the same way because the depend on HTML, CSS, JavaScript and images.
  3. SharePoint framework has backward compatibility which means that it supports classic pages and modern pages.
  4. Development tools which are used in SharePoint framework is implemented with open source tools and common JavvaScript web frameworks like react.

Modern Pages

  1. Modern Pages are rendered client side not server side. They are natively responsive and mobile optimized.
  2. It is client side component that can be persistent and cached. So, data that was cached by SharePoint framework API can be used by custom components on modern pages.
  3. It enables users to easily create nice looking pages

SharePoint Framework development environment

(I) Open Source tooling

Build process and tooling

Yeoman –> replaces the new project experience of the traditional server side SharePoint solution.

Gulp –> task runner that replaces MS build creating JS bundles and SharePoint packages.

Web framework

Developers can use any web framework such as:

  • React
  • Angular
  • Knockout
  • Vue.js

Code editors

The most commonly used is VS Code. But there are some others code editors such as Atom, Sublime or web storm

(II) Core development and build tools

Node.JS

underlying runtime used by all applications

NPM

used as the package manager and use it to install global tools and reusable code

Web pack

Combine javascript and CSS files in the SharePoint project.

(III) Installation:

  • Install Visual Studio code
  • Install node.js (LTS version)
  • Install Yeoman
    1. npm install –global yo
  • Install gulp
    1. npm install –global gulp
  • Install SharePoint yeoman generator
    1. npm install –global @microsoft/generator-sharepoint
  • Run the following version check
    1. npm list -g -depth -o