SharePoint Framework Overview

What is SharePoint Framework?

SharePoint Framework is a new development model that provides full support for client-side SharePoint development by using open source client developments tools. The SharePoint Framework is the next evolution in SharePoint development.

SharePoint Framework works for SharePoint Online & SharePoint On-Premise (SharePoint 2016 Feature Pack 2). SharePoint Framework can be used  for developing client-side web part & extensions

Toolchain

SharePoint Framework development toolchain is based on common open source development tools npm, TypeScript, Yeoman, webpack & gulp.

SharePoint Add-in model

Advantage:

• Security – SharePoint Add-in model creates an iFrame where the actual implementation resides & executes. It is more secure because it’s external to the system and has no access to the current DOM/connection.

Disadvantage:

• iFrame is slower – The page loading under iFrame should go through authentication & authorization.
• Responsive Design – iFrame makes it difficult to create responsive designs and inherit styling information.

Set up SharePoint Framework development environment

You can use Windows, Mac, or Linux machine for doing SharePoint Framework development. You should Install developer tools:

• Install NodeJS
• Install Visual Studio Code (Code editor) . you can use any other code editor such as Atom, Webstorm  that supports client-side development.
• Install Yeoman and gulp
• Install Yeoman SharePoint generator

Client side web parts

Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Client-side web parts can run on SharePoint Online and on-premise environment (SharePoint 2016 Feature Pack 2). Once you have configured SharePoint Framework dev environment, a client-side web part can be created in few steps.

Extensions

SharePoint Framework extensions are client-side components that run inside the context of a SharePoint page. Extensions can be used to extend the SharePoint user experience. Extensions can be used to customize user experience within modern pages and document libraries. SharePoint Framework includes three new extensions types:

• Application Customizers: Application customizer can be used to customize SharePoint pages by accessing HTML element placeholders and extend them with custom renderings.

 

 

• Field Customizers: Field customizer can be used to customize the rendering of a field in a list view by using custom HTML elements and client-side code. JSLink customizations can be migrated to SharePoint Framework extensions without the need to make any changes.

 

• Command Set: SharePoint Framework extension command set can be used to add custom ECB menu items or custom buttons to the command bar of a list view for a list or a library.

 

Workbench

One new part of the build toolset for SharePoint Framework is called Workbench. Workbench is a tool that can de used by developers to build and test their SPFx solutions. There are two versions of the workbench 1. Local workbench 2. SharePoint Hosted workbench.

Local Workbench: 

Local workbench runs locally on the development machine and do not have connection with SharePoint. This workbench can be used to test functionality of web part with mock/dummy data. Local workbench URL is https://localhost:4321/temp/workbench.html

 

SharePoint Hosted Workbench:

SharePoint Hosted workbench is hosted inside SharePoint and is used to build & test the web part by using SharePoint data and context. you can access SharePoint hosted workbench by opening this application page _layouts/15/workbench.aspx, complete URL will look like https://[tenantname].sharepoint.com/sites/appdev/_layouts/15/workbench.aspx