Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

What is SPFx SharePoint Framework and Benefits? 

The SharePoint Framework (SPFx) is a page and web part model that enables client-side development, supports open-source tooling, builds SharePoint experiences. Provides quick integration with the SharePoint data. SPFx SharePoint Framework can create custom responsive apps and are mobile-friendly also you can use tools and advanced modern web technologies to build productive experiences in the preferred development SharePoint Framework environment setup. 

Tell us about your Project

Key’s Benefits of SPFx SharePoint Framework

      • It runs within the context of the user browser and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly into the page).  
      • Controls are rendered in the normal page DOM (Document object model). 
      • The performance is reliable.  
      • The Controls are responsive and accessible by nature. 
      • End-users are allowed to use the (SPFx) SharePoint Framework
      •  Build SharePoint with the latest SPFx development can be enabled on both Modern and classic SharePoint pages. 
      •  Advanced client-side frameworks like JavaScript, jQuery, Angular, ReactJS, Handlebars, knockout are fully supported 80% of the SPFx solutions written in React with TypeScript. 
      • Open-source Development tools such as NPM, TypeScript, Yeoman, webpack, and Gulp use. 
      •  Supports Graph API, Teams with personal Tab and also supports 3rd party API with AAD security (Azure Active Directory) 
      • It enables controlled visibility by restricting who can see the web part in the App Catalog. 
      • It supports the mobile view of SharePoint online sites. 
      • Data models are not changed and can be completely transferable.

Microsoft Gold Partner we can assist you in SharePoint Power Platform consulting services - Evolvous

Why do we need a SharePoint Framework (SPFx)?

The modern SharePoint UX is all about improving productivity and allowing people, easily access their information on any device. SharePoint Framework helps developers build solutions that seamlessly integrate with the SharePoint experience and offer users additional capabilities.

Introduction of Web parts and Extension

There are mainly two types of the SharePoint Framework Development approach, which are as follows:

    1.  Web Parts
    2.  Extension

SPFx Web Parts 

    • The controls showing up inside a SharePoint page, however running in the browser locally the SharePoint Framework client-side web parts. 
    • With the usage of the modern script development tools and the SharePoint workbench, the development surface, client-side web part built and can be, deployed to any modern-page or classic web part page in the Office365 tenant. 
    • A client-side web part can also be built, with common scripting frameworks like React, AngularJS, Knockout, etc. 
    • For example, one can easily create an experience similar to the same components is used in Office365 with the uses of React along with Office UI Fabric React components. 

 Extension SPFx

By Using the SPFx extension, we can extend the user experience within modern pages and SharePoint document Libraries  

    • Application Customizers: Using SPFx application customizers, we can add scripts, access HTML element placeholders extend, them with custom renderings, the Content Editor and the Script editor of the Modern sites. 
    • Field Customizer: By using SPFx field customizers, we can modify the list view. 
    • Command Sets: Using command sets, we can add new actions with client-side code to implement behaviour. 

Let’s discuss your project

Framework Tools & Libraries

Different client-side JavaScript libraries incorporated in the SharePoint Framework Development. Let us discuss the tools & libraries which are in the development of a client-side web part.

SPFx SharePoint Framework Tools & Technologies with node JS, Gulp, Angular JS, Yeoman, React, Github - Evolvous

TypeScript 

    • A JavaScript typed superset that complies with plain JavaScript is called TypeScript. 
    • The TypeScript classes, modules, & interfaces used for client-side development tools of the SharePoint. These tools use to build robust client-side web parts. 

JavaScript Framework 

    • JavaScript is a very light programming language and is seeing a lot of advancements in recent times. 
    • Several JavaScript frameworks are available to build client-side web parts. 
    • In a SharePoint page, a client-side web part dropped as a component. Thus, it requires choosing a JavaScript framework that supports the component model. 

 Below are some popular frameworks are listed: 

      •  Angular JSAngularJS is a JavaScript framework for building MVC-based web applications. Allows you to split the business logic layer, data layer, and presentation layer. It uses HTML as a template language to extend its syntax for creating various application components. It also helps to reduce the code by data binding and dependency injection features.
      • React JSReactJS is an open-source JavaScript library that uses for building user interfaces specifically for single-page applications. It is used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. 
      • Vue JSVue JS is a progressive JavaScript framework used to develop interactive web interfaces. The focus is more on the view part, which is the front end. It is very easy to integrate with other projects and libraries. 
      • Knockout JS: KnockoutJS is a pure JavaScript framework and can be used in any web application to easily handle data manipulations and user interfaces with JavaScript and HTML.  

Node Package Manager (npm) Framework

NPM installed with Node.js. The name NPM (Node Package Manager) stems from when NPM first was created as a package manager for Node.js.  NPM can manage dependencies. Use NPM to get packages for our customization need like Angular, React, jQuery or other useful libraries. 

    • Package Manager for JavaScript libraries 
    • Maintains an online repository (npm registry) to find and deploy new packages. 
    • Installs packages and their dependencies. 
    • Packages can be installed globally (-g switch) or locally. 
    • Installed packages are available inside the node_modules folder. 

NodeJS LTS version Framework

Node.js is an open-source, cross-platform runtime environment for hosting and serving JavaScript code. You can use Node.js to develop server-side web applications written in JavaScript. The Node.js ecosystem tightly coupled with npm and task runners such as gulp to provide an efficient environment for building JavaScript-based applications. Node.js is similar to IIS Express or IIS but includes tools to simplify client-side development. 

NodeJS does require for developing SharePoint framework solutions. Download the latest one (LTS version) from NodeJS.org. 

If you have NodeJS already installed, check that you have the latest version by using node -v. It should return the current LTS version

Go to nodejs.org and download and install the latest LTS version

Gulp 

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, Gulp reads files as streams and pipes the streams to different tasks. The tasks modify the files, building source files into production files. So, gulp allows you to write tasks using JavaScript and then tell gulp to run those tasks. 

    • Automates SPFx development and deployment tasks 
    • Bundles and minifies JavaScript and CSS files 
    • Runs tools to call the bundling and minification tasks before each build 
    • Compiles LESS or SASS files to CSS,  TypeScript files to JavaScript, bundles and copies files to the deployment folder for packaging.

 To learn more about Gulp, Please follow the link:  https://gulpjs.com/ 

Yeoman generators 

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem. A yeoman generator is a plugin that runs with the YO command to scaffold complete projects or useful parts.

    • Relies on NPM and Gulp 
    • Scaffolding tool for Modern web apps 
    • SPFx Solution generator 
    • “yo” is the command-line utility to build the project structure 
    • The Yeoman generator for creating the SharePoint Framework project is available from Microsoft

To learn more about the Yeoman generator, Please follow the link: https://yeoman.io/codelab/index.html 

Webpack 

    • Webpack is a tool that lets you compile JavaScript modules, also known as module bundlers. 
    • Given, a large number of files, it generates a single file (or a few files) that runs your app. 
    • Using the universal module loader SystemJS, the modules loaded to bind the web part scope for the execution in its namespace. 

Source code editors 

One can use any HTML/JavaScript code editors as per his choice as the SharePoint Framework client-side driven development. Below are some of the listed code editors: 

Visual Studio Code has been using, in the documents and examples of the Microsoft SharePoint Framework documentation. It is a powerful source code editor from Microsoft in addition to being lightweight. It provides the built-in default support for TypeScript, Node.js, and JavaScript. 

SharePoint REST APIs 

    • SharePoint Framework a powerful client-side development tool used to develop SharePoint apps with the full support of most the other JavaScript frameworks like Angular, React, Knockout.
    • Generally, to access the SharePoint REST API call request, we require authentication parameters like access tokens, Request Digest value, etc. 
    • But in (SPFx) SharePoint Framework, we do not need to worry about that because SPFx takes care of that authentication by using the current context in SPHttpClient class. The only thing we need to do is to pass the URL with some headers and post body. 
    • Refer to this link for carrying out any action using the REST call on the SharePoint List.

Pros & cons of the (SPFx) SharePoint Framework.  

Pros: 

        • Simple to use and performance were good. 
        • Run in the context of the current user. 
        • As it uses the same DOM, you can interact with other elements of the page.

 Cons: 

        • You can not provide web part configuration options to the user. 
        • End-user can edit the page and modify the script may break the page.
        • You cannot use it on the NoScript enabled SharePoint sites. 

Let’s discuss your project


Written by Nitin Puri

Nitin is SharePoint Developer at Evolvous Limited – specialists in Microsoft Technologies.