What are SharePoint Framework? : A Definitive Guide with Best Practices [ OverView ]

• In this article you will get
• 1.Features of a SharePoint Framework
• 2.Use a client-side web parts beyond SharePoint
• 3.SharePoint Framework development tools and libraries
• 4.Overview of sharepoint framework extensions
• 5.Has sharepoint framework replaced other models?
• 6.Is using the sharepoint framework a best practice?
• 7.Conclusion

Features of a SharePoint Framework

• It runs in a context of the current user and connection in browser. There is no iframe for a .
• Controls are rendered in a normal page DOM.
• Controls are responsive and accessible by a nature.
• It enables developer to access lifecycle in addition to rendering, loading, serialising and deserializing, configuration changes, and much more.
• It is a framework-agnostic. Can use any JavaScript framework are like, including but not limited to React, Handlebars, Knockout, Angular, and Vue.js.
• The developer are toolchain is based on a popular open-source client development tools like NPM, TypeScript, Yeoman, Webpack and Gulp.
• The performance is reliable.
• End users may use a SPFx client-side solutions that are approved by a tenant administrators (or their representatives) on all sites, including self-service team, group or an individual sites.
• SPFx Web Parts can be added to the both classic and modern pages.
• SPFx solutions can be used to be extend Microsoft Teams.

Use a client-side web parts beyond SharePoint

Client-side Web Parts are basic building blocks for an implementing the other types of customization in SharePoint, Microsoft Teams, and the Microsoft Office client! for example:

• Client-side Web Parts can be used to deploy a Single Page Apps (SPA) in a SharePoint Online. For more information about using a Web Parts as SPAs, see Using Single Part App page in a SharePoint Online.
• Client-side Web Parts can be used to implement tabs in a Microsoft Teams. For more information about using a Web Parts in the Microsoft Teams, see Creating Microsoft Teams Tabs Using a SharePoint Framework.
• Client-side Web Parts can be used to implement a Office add-ins in clients like Outlook. For more information about using a Web Parts in the Office client, see Creating Outlook Add-ins by Using a SharePoint Framework.

SharePoint Framework development tools and libraries

The SharePoint Framework includes a several client-side JavaScript libraries that can use to build the solutions.

Typescript:

TypeScript is a typed superset of a JavaScript that compiles to the plain JavaScript. SharePoint to a client-side development tools are be built using a TypeScript classes, modules, and interfaces. And can use these to build robust client-side web parts.

Javascript Frameworks:

Can choose from a number of a JavaScript frameworks to develop the client-side web parts:

• Feedback
• Angular
• vue.js
• The handle

Since client-side Web Parts are the components that are dropped into SharePoint page, recommend that can choose a JavaScript framework that supports the similar component model. Lightweight frameworks such as a React, Handlebars and Angular 2 all the support a component model and are suitable for a building client-side web parts.Also recommend that can check out SharePoint PnP JavaScript Core Library, a community driven effort targeted at a providing simple access to a SharePoint REST API.

Node package manager (npm):

SharePoint client-side development tools use a npm package manager, similar to NuGet, to the manage dependencies and the other necessary JavaScript helpers. npm is usually included as a part of Node.js setup.

Node.js:

Node.js is the open source, cross-platform runtime environment for a hosting and serving JavaScript code. can use a Node.js to develop server-side web applications written in a JavaScript.

The Node.js ecosystem is be tightly coupled with npm and task runners like a gulp to provide an efficient environment for the building JavaScript-based applications. Node.js is similar to the IIS Express or IIS, but includes tools to made a client-side development easier.

Gulp task runner:

SharePoint client-side development tools use a Gulp as build process task runner:

• Bundle and minify a JavaScript and CSS files.
• Run the tool before every build to call bundling and minification tasks.
• Compile a LESS or Sass files into a CSS.
• Compile TypeScript files to a JavaScript.

Webpack:

Webpack is the module bundler that takes a web part files and dependencies and generates one or more JavaScript bundles so that can load various bundles for a different scenarios.

The development tool chain uses a webpack for bundling. This enables to explain a modules and where want to use them. The tool chain also uses SystemJS, an Universal Module Loader, to load modules. It helps to extend the scope of a Web Part by ensuring that each Web Part is executed in own namespace.

Yeoman generator:

Ps to start a new projects while prescribing best practises and tools to help stay productive. Yeoman SharePoint Generator is available as part of the framework for kickstarting new client-side Web Part projects.

Overview of SharePoint Framework Extensions

Can use a SharePoint Framework (SPFx) extensions to extend SharePoint user experience. With SPFx extension, can customise more aspects of a SharePoint experience, including notification areas, toolbars, and list data views. SPFx extensions are available for the production use in all Microsoft 365 subscriptions.

The SPFx extension enables to extend the SharePoint user experience within the modern pages and document libraries, using a familiar SPFx tools and libraries for the Client-side development. Specifically, SPFX includes a three extension types:

Application Optimizer: Adds scripts to a page, and accesses well-known a HTML element placeholders and extends them with custom rendering.

Field Customizer: Provides the modified view of the data for a fields in the list.

Command Sets: Extends a SharePoint Command Surface to add a new actions, and provides client-side code that can use to implement behaviours.

Can build an extensions with common scripting frameworks, like Angular and React, or for plain JavaScript projects. For example, can use a Office UI fabric with React components to create the experiences based on a same components used in a Microsoft 365.

Has SharePoint Framework replaced the other models

An important architectural consideration to keep in mind when using a SharePoint Framework (SPFx) is that it is based on a JavaScript and therefore within the context of a current user running SharePoint SPFx solutions in browser. There is no height and also safety trimming, so must be especially careful when driving the custom solution. This is one reason why using a SharePoint add-in model is still valid option – especially for using a third party solutions.

SharePoint is the rich platform and there are more various scenarios for extending its standard capabilities. The SharePoint framework probably won’t support all of them, and combining a SharePoint framework customization with a SharePoint add-in can yield the particularly powerful solutions.

Is using a SharePoint Framework a best practice

The declaration of a SharePoint Framework is not deprecating anything. Whatever were able to do in a past, we can do now. There is one more tool in a spfx toolbox and it is up to to choose best tool for a job.

One important thing to keep in a mind is that while customizations created using a SharePoint framework work on the both new and old sites, SharePoint add-ins only work with the older sites. So, if want to extend a new SharePoint UX, will need to use a SPFx.

There is currently no need to use a modern team sites and an organisation can still use a user experience it is familiar with. This is more important because more organisations have made huge investments in a SharePoint solutions and trained many users to work with the specialised UX. Modern Team Sites are look great and offer a better user experience in mobile-first world. As an organisation gradually adopts modern team sites, will be building a more and more solutions using a SharePoint framework to further enhance their capabilities.

Although a SharePoint Framework has just been announced, it is not yet be available to the developers. However, can start preparing for it by getting hold of technologies already used by a SharePoint framework. see, the SharePoint Framework has been based on a tools that have been available for the some time, but until now was irrelevant to as SharePoint developers. This changes as a framework is released and in order to fully take the advantage of its potential, it is important that can know these tools.

Conclusion

The SharePoint Framework (SPFx) is the model for creating customization on a SharePoint platform. The framework is based on a concept of building a client-side solutions that integrate with the modern SharePoint UX.

Can use any JavaScript framework are want to build an SPFx SharePoint solution, and building a SharePoint solution isn’t limited to the Windows and Visual Studio. Because SharePoint framework leverages are widely used a web development stack, solutions can be built on any platform, including an OS X and Linux, using a code editor of choice.