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 On Premises “SPS”: the on-premises versions 2016, 2019, subscription edition of SharePoint that customers install and maintain on their servers.
  • SharePoint Online “SPO” : this is the hosted version of SharePoint, managed as part of Microsoft 365.

SharePoint Framework Overview:

SPFx is a versatile framework that empowers developers to create rich, customized experiences in SharePoint, enhancing both functionality and user engagement.

Benefits of SPFx

  1. Modern Development Practices:
    • Uses modern web technologies like TypeScript, React, and Angular.
    • Supports client-side development, making it easier to create responsive and dynamic user interfaces.
  2. Flexibility and Extensibility:
    • Allows for the creation of custom web parts, extensions, and applications.
    • Can be used with both SharePoint Online and on-premises (SharePoint 2016 and later).
  3. Improved User Experience:
    • Enables the development of highly interactive and engaging user experiences.
    • Supports responsive design, ensuring compatibility across different devices and screen sizes.
  4. Integration with Microsoft 365:
    • Seamlessly integrates with other Microsoft 365 services like Teams, OneDrive, and Outlook.
    • Utilizes Microsoft Graph API for accessing a wide range of data and services.
  5. Open and Community-Driven:
    • Built on open-source tools and libraries.
    • Supported by a vibrant community, providing a wealth of resources, samples, and best practices.

Use Cases for SPFx

  1. Custom Web Parts:
    • Create tailored web parts to meet specific business needs, such as dashboards, data visualizations, and forms.
  2. Application Customizers:
    • Add custom headers, footers, or other UI elements to SharePoint pages to enhance branding and navigation.
  3. Field Customizers:
    • Customize the rendering of fields in SharePoint lists and libraries to provide more meaningful data presentations.
  4. Command Sets:
    • Extend the SharePoint command bar with custom actions, enabling users to perform specific tasks directly from the interface.
  5. Integration with Third-Party Services:
    • Connect SharePoint with external systems and services, such as CRM, ERP, or other line-of-business applications.
  6. Enhanced Collaboration:
    • Develop tools and features that improve collaboration and productivity within teams, such as task management, document workflows, and communication tools.

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 npm install –global yo
  • Install gulp npm install –global gulp
  • Install SharePoint yeoman generator npm install –global @microsoft/generator-sharepoint
  • Run the following version check npm list -g -depth -o