SharePoint Framework - An Introduction

  • Article

SharePoint Framework, a new development model for SharePoint which takes the SharePoint experience to the next level with the help of client-side APIs.

Introduction

For years, Microsoft keeps on enabling the different development models like Farm based solutions, Sandboxed solutions, SharePoint Add-In to access the SharePoint objects with the help of different APIs. And also we have another model in SharePoint by manually injecting a JavaScript file (which created based on JSOM, REST API) to the SharePoint page to obtain the appropriate result.

In addition to the above-mentioned development models, Recently Microsoft added another model called “SharePoint Framework model” to build great & better applications. This model is released as open source and this is still in initial stage even for developers.

“*The SharePoint Framework is a Page and Part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.” – *Microsoft

SharePoint Framework Highlights

Light Weight Components:

For developing the applications based on the old development models, we should require a Microsoft Visual Studio as a source code editor for developing & packaging the applications. But for SharePoint Framework development, we require some of the lightweight tools like Node JS, Gulp, Typescript, Visual Studio, Yeoman Generator instead of having the heavyweight software.

The below table provides a summary of Microsoft equivalent to the lightweight component.

Light Weight Component Microsoft Equivalent
Node.js IIS Express and /or build automation
Node.js .Net Framework
npm NuGet
Yeoman VS Project -> New -> Template
Gulp.js MS Build
Typescript C#

Node.JS

It is an open source and cross-platform JavaScript-based runtime environment built on top of Chrome’s V8 JavaScript engine for developing JavaScript-based applications.

SharePoint Framework uses this Node.js runtime environment to build & run the applications. We can call it as equivalent to .Net.

Ref: https://nodejs.org

NPMJS Packages:

npmjs is the package manager for JavaScript, which contains the larger number of open source packages and these are assembled in the solution to build the application.

SharePoint Framework manages the dependencies required for the application by using npmjs packages. This is equivalent to the NuGet package in Microsoft world.

Ref: https://www.npmjs.com/

Gulp:

Gulp is an open source toolkit used to automate the painful and time-consuming tasks in a development workflow. For ex., minification and copying of all JavaScript file.

SharePoint Framework model uses the gulp toolkit to automate the tasks of building and running the solution.

Ref: http://gulpjs.com/

Typescript:

Typescript is an open source editor developed by Microsoft. It is a typed superset of JavaScript language and compiles into plain JavaScript. It also eases the C# developers to develop JavaScript-based applications.

SharePoint Framework uses the typescript language to build the applications and this will be compiled into clean, simple JavaScript code to run on any browser.

Ref: https://www.typescriptlang.org/

Visual Studio Code:

Visual Studio Code is lightweight source code editor tool, which runs on any platform. It comes with built-in support for JavaScript, Typescript and Node.js and has a rich ecosystem of extinctions for other languages and runtime.

SharePoint Framework uses the features of visual studio code to edit and manage the source code for building the application.

Ref: https://code.visualstudio.com

Yeoman Generator:

Yeoman generator is the web’s scaffolding tool for modern web apps. This will generate the complete solution structure for developing the application.

SharePoint Framework uses the “@microsoft/sharepoint” yeoman generator to create a solution structure for the application.

Ref: http://yeoman.io/

GitHub:

GitHub is the web-based Git repository hosting service. It offers all of the distributed revision control and source code management functionality of Git.

SharePoint Framework is an open source and all of its code is hosted on GitHub for the public. So we can use the GitHub for contributing more to the framework. We can also enable versioning to our newly create an application as well.

Ref: https://github.com/

JavaScript Frameworks:

In the modern web world, there is a number of JavaScript frameworks like React, Angular JS, Knockout JS, etc…  available for building the web-based application to enable rich user experience.

SharePoint Framework also enables us to use any type of JavaScript frameworks in the solution to enrich the user experience.

SharePoint JSOM or REST API:

JSOM or REST API enables the client side development to access & manages the SharePoint sites.

SharePoint Framework is totally a client-side development model and it uses any of the JavaScript-based SharePoint APIs to develop the application.

Develop across Platforms:

Developing the SharePoint framework applications is possible across different OS platforms. By installing the lightweight tools on any platform and that opens the way for developers to build applications on any platforms.

Automated Process:

SharePoint framework uses the generator from Yeoman to creates the skeleton for the SharePoint and that same generator installs all required dependency packages to the development folder and configures the automated tasks. Gulp handles the tasks and automated the compile, build, run and packaging the solution.

Why SharePoint Framework?

For developing the client based SharePoint applications, we have used two kinds of approaches,

  • SharePoint Add-Ins
  • Injecting JavaScript to Content Editor or Script Editor web part

In above two type of approaches, we have to manually upload the packages to test or debug the application after completing or updating the code.

To debug the SharePoint Add-in, after changing source code every time, we have to redeploy and reinstall the add-in to the SharePoint site. The add-in part created from add-in solution is always residing within iframe by rendering the contents of the site. And it is time-consuming and also requires a Visual Studio tool to do that.

To debug the SharePoint client-side code by injecting scripts in a content editor web part or script editor web part requires some manual process to do testing our code and settings. And this also a time-consuming model to develop and debug the script.

SharePoint Framework model introduces the workbench to test the SharePoint applications locally and without connecting to SharePoint site. We can also use the workbench in SharePoint library to the application in SharePoint site.

SharePoint Framework has benefits over the limitations of previous models,

  1. Instant application debugging using Workbench without SharePoint site.
  2. Instant SharePoint site debugging using workbench (which is uploaded to SharePoint site)
  3. Automated process for deploying the updates
  4. Opens a way to use different JavaScript frameworks

 

Development Prerequisites:

Before Starting the development, we would require a below things to be ready,

Create SharePoint Framework project

  • Open any command line tool (PowerShell, Cmder, etc.)
  • Create a folder for the application source or open that folder
    md helloworld-webpart cd helloworld-webpart
  • Create a new project by using yeoman generator
    Yo @microsoft/sharepoint
  • Fill up the required details asked by the generator
Generator Requests Description
What is your solution name? Solution name for the framework project
Where do you want to place the files? Select any one of the below options to select where you want to store the files.
  • Use the current folder
  • Create subfolder
What is your web part name? Enter a name for the web part
What is your web part description? Enter a description for the web part
What framework would you like to use? Select any of the below javascript options to use in the application
  • No JavaScript web framework
  • React
  • Knockout

http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img3.png

Fig 3: Create a new SharePoint project

  • Generating the package takes some time and you may get some warnings and errors during the structure creation. Ignore those for now, because the generator is in the initial stage (You can also raise the issue in GitHub page of the generator)
  • The below information ensures the solution is created successfully and ready for development. http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img4.png Fig 4: SharePoint Project ready for development
  • To run the application, enter “gulp serve” command. This will enable the local server with required js files with the workbench.html in the location http://localhost:4321/temp/workbench.html. http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img5-1024x337.png Fig 5: Local SharePoint Workbench
  • In the same time, we can also access the application in SharePoint site. Navigate to the workbench.aspx, where we have uploaded the workbench file.
  • The error message will pop up and asks us to ensure the unsafe scripts to be loaded on SharePoint site. Because required js files loaded from localhost location. Click ok on message popup and select “Show All Content” button. http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img6-1024x507.png Fig 6: Enable Unsafe Scripts in SharePoint site workbench
  • The selection of Show All Content enables us to add a web part to the page, http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img7-1024x298.png Fig 7: SharePoint Site Workbench
  • Click + button and select the “HelloWorld” to add the web part to the page. The below screenshot appears in both Local Workbench and SharePoint Workbench page http://www.ktskumar.com/wp-content/uploads/2016/08/1596_img8.png Fig 8: SharePoint Framework Web part
  • By using any source editor, once we change and saves the source file. The gulp task running behind automatically updates the required js file and the updated changes appear immediately in local workbench page. The same change appears in SharePoint workbench page after refreshing the page.

Ref: https://github.com/SharePoint/sp-dev-docs/wiki/HelloWorld-WebPart

Conclusion:

We can enable modern UI experiences to the SharePoint site by creating web parts and pages with the help SharePoint Framework development model. It leverages all modern web technologies to provide better UI experience to the users.