SharePoint framework is the most recent way of creating awesome client side webparts and extensions using open JavaScript framework or using normal JavaScript. This new model provides full development support for client side development, easy integration with SharePoint data and open source tools. With the ability of SharePoint framework, you will be able to use modern web technologies and tools for the development of full mobile responsive apps which is able to deploy to SharePoint very easily. Currently this version is available for SharePoint online and soon it will be also available for on-premises.

Features of SharePoint Framework

• The webpart created by SPFx does not have any iframes in it, this will overcome the disadvantage of SharePoint apps having iframe.
• The developer can choose his own development frameworks like React, Knockout, Handlebars, Angular and more.
• This enables the developer to access the life cycle.
• The tools are based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
• The performance is better and reliable.
• This will run in the context of the current user.
• The administrator have the ability to deploy the SPFx apps to different site collections in a single click.
• There is no need to trust it even if it is deployed like SharePoint app.
• SPFx webparts are compatible in both classic and modern pages.
• SPFX webpart have very advanced property panel customization.

SharePoint Framework allow the developer to write codes in type script and they can utilize object-oriented programming techniques in writing their codes.

Why SharePoint Framework is important

SharePoint is available for end users as online and on-premises. While SharePoint is being used as an intranet portal by most companies, some companies still adopt it for their external websites too. In these cases users need additional webparts and customization which is not available by default in SharePoint. Since that customization capability was lacking, users were now customizing SharePoint with the help of different programming models using managed codes like C# and client side scripting like JavaScript, JQuery etc. Server side programming using managed code is acceptable in on-premises but this is not easy to maintain in online since multiple tenants are running side by side. So Microsoft completely removed the use of managed code in SharePoint online 2016 and they provided SharePoint app model and JavaScript injection for customizing SharePoint with both of them having their respective advantages and disadvantages.

Custom JavaScript code in script editor webpart or content editor is one of the widely used webpart in SharePoint online since it is very easy to create.

The disadvantage of this is that there is no option for developers to create additional property for these webparts, the script editor webpart is not easy to package and reuse, it is in a different page. A user with design permission can change the webpart code by editing the page and these webparts are not marked as safe for scripting. Hence, these webparts will be prevent running in the sites created from self service with no script feature enabled.

SharePoint app model have lots of advantages, the apps created using SharePoint app model will be fully isolated from the SharePoint web, so there is less chance of breaking the functionality due to the use of malfunctioning code and this will still be useful for creating advanced functional apps.

But the disadvantage of sharepoint apps is, they create an iframe to render the web app, this is not good for mobile compatible pages. The add-ins added in the on-premises pages with basic windows authentication will give continuous login prompts, and this can be fixed only in the same network using credential management feature of internet explorer or group policy management tools. But users who access the site outside the network will get the login prompt.

Conclusion

Most of the disadvantage of the old SharePoint development model can be avoided by the new development model using SharePoint framework. The development of new framework webpart can be handled using the Yeoman generator and Visual Studio code. This will make the development a lot easier and more productive.

In you don’t have it follow the steps below to install it

Configure development environment

Install NodeJS

Install NodeJS LTS version.

If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.If you have NodeJS already installed, check if you have the latest version by using node -v. It should return the current LTS version.If you are using a Mac, we recommend that you use homebrew to install and manage NodeJS

Install Yeoman and Gulp

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.

Enter the following command in powershell to install Yeoman and gulp:

npm install -g yo gulp

Install Yeoman SharePoint generator

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

To install the SharePoint Framework Yeoman generator globally, enter the following command in powershell:

npm install -g @microsoft/generator-sharepoint

If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command in powershell:

npm install @microsoft/generator-sharepoint –save-dev

Once you are done with the installation, you will be able to create new webparts using SharePoint framework.

Install a code editor

You can use any code editor or IDE that supports client-side development to build your web part, such as:

• • Visual Studio Code
  • Atom
  • Webstorm

The steps and examples in this documentation use Visual Studio Code, but you can equally use any editor of your choice.

How to create New webpart Project

1. Open windows powershell as administrator
2. Create a directory to store the files using powershell by running the following command

md <folder name>

3.  Navigate to the new folder

cd .\<folder name>\

4.  Call yeoman SharePoint generator and create project.

yo @microsoft/sharepoint

5.  This will request a couple of details, enter all of those, and that will create the new project for you.

a.  What is the name of your project

b.   What is the SharePoint version

c.    Select if the admin should have the option to deploy this app to all site or not.

d.     Select the type of client side component.

e.    Enter the webpart name

f.   Enter the webpart description

g.  Select the framework of the webpart, this is just for scaffolding purpose

h.  All Settings to be done in one screen

.

After the configuration, there is a confirmation message like the following.

6.  Once you are done with that, enter the following powershell command to open the code in visual studio code.

Code .

It is proven that the SharePoint team sites and communication sites have become very well established according to commercial needs. Structure, look and feel are in favor of custom site themes and custom site designs. A wide range of default and custom themes developed by various people help these specific designs stand out at the time when they create new sites.

The advantage is these custom designs and site themes applied to both team sites and communication sites can establish a preference for customers.

Previously released custom site scripts and site designs can be uploaded as templates. Site designs help us to adjust a logical set of actions such as creating lists and columns, setting themes or even sending an email.

The custom site designs are stored in a central gallery and can be applied to both team sites and communication sites. The user who is creating the site could see all the available site designs as a choice from their SharePoint home in Office 365 after selecting the site type.

The SharePoint site creation framework helps to apply additional site configurations by ensuring the sites are configured properly and effortlessly. To manage the framework files, it is important to have knowledge in REST and PowerShell APIs.  Also, SharePoint development Patterns and Practices (PnP)  for more complex scenarios

Site designs are more likely scripts that you run to control the process automatically. When a site design is run it changes the site configuration. The initial setting of site designs and site scripts is a bit complicated but after everything is set up they can be accessed from many places. It is also possible to apply site designs to existing sites.

Site scripts are non-destructive when they run they ensure that the site matches the configuration prescribed in the script
Available actions include:

• Creating a new list
• Applying a theme
• Setting a site logo
• Adding navigation
• Triggering a Microsoft flow

The professional look and feel of the site is very important. SharePoint owners have the option to customize color mixes across the site collection by managing themes. Additionally, custom themes can be created and uploaded to a customer’s theme gallery and made available through the panel within each site.

The SharePoint site theme offers the latest SharePoint themes and it can be customized by colors or styles on any site. Themes are defined in a JSON that stores color settings and related metadata.