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

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

Last updated on 28th Dec 2021, Blog, General

About author

Yokeshwaran (Sr Software Engineer )

Yokeshwaran is a Sr Software Engineer and his passion lies in writing articles on the most popular IT platforms including prometheus, Machine learning, DevOps, Data Science, Artificial Intelligence, RPA, Deep Learning, and so on. You can stay up to date on all these technologies.

(5.0) | 19829 Ratings 898

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

    • Introduction to SharePoint Framework
    • Features of SharePoint Framework
    • Use client-side web parts beyond SharePoint
    • SharePoint Framework development tools and libraries
    • Overview of SharePoint Framework Extensions
    • Has SharePoint Framework replaced other models?
    • Is using the SharePoint Framework a best practice?
    • So, when should I use the SharePoint Framework?
    • Why Yet another model?
    • Conclusion

    Subscribe For Free Demo

    [custom_views_post_title]

      Introduction to SharePoint Framework:

      The SharePoint Framework (SPFx) is a Page and Web Part model that provides client-side SharePoint development, easy integration with SharePoint data, and full support for extending Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to create productive experiences and apps that are responsive and mobile-ready.


      SPFx is the recommended SharePoint customization and extensibility model for developers. Because of the tight integration between SharePoint Online, Microsoft Teams, and Microsoft Viva Connections, developers can also use SPFx to customise and extend all of these products. In fact, SPFX is the only extensibility and customization option for Viva Connection. In addition to SharePoint Online, SPFx is supported and can be used to optimise SharePoint on-premises deployments going back to SharePoint Server 2016.


      Features of SharePoint Framework:

      Following are some of the key features included as part of SPFx:

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

    • The Runtime Model improves on the Script Editor Web Part. It includes a robust client API, an HttpClient object that handles authentication for SharePoint and Microsoft 365, contextual information, easy property definition and configuration, and more.

      If you work primarily with C#, you may want to learn more about client-side JavaScript development. However, most of your existing JavaScript knowledge related to SharePoint is transferable, as the data model has not changed, and you will use the same REST services depending on your needs. If you are a C# TypeScript is a good transition into the world of JavaScript. The choice of IDE is up to you. Many developers prefer to use the cross-platform IDE Visual Studio Code.


      Use client-side web parts beyond SharePoint:

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

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

      SharePoint Framework development tools and libraries:

      The SharePoint Framework includes several client-side JavaScript libraries that you can use to build your solutions. This article provides an overview of the tools and libraries you can use to develop client-side Web Parts:

      Typescript

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

      Javascript Frameworks

      You can choose from a number of JavaScript frameworks to develop client-side web parts. The following are some of the most popular:

    • Feedback
    • Angular
    • vue.js
    • The handle
    • Since client-side Web Parts are components that are dropped into a SharePoint page, we recommend that you choose a JavaScript framework that supports a similar component model. Lightweight frameworks such as React, Handlebars and Angular 2 all support a component model and are suitable for building client-side web parts

      We also recommend that you check out the SharePoint PnP JavaScript Core Library, a community driven effort targeted at providing easy access to the SharePoint REST API.


      Node package manager (npm):

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

    • Node.js:

    • 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 is 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 make client-side development easier.

    • Gulp task runner:

    • SharePoint client-side development tools use Gulp as the build process task runner:
    • Bundle and minify JavaScript and CSS files.
    • Run the tool before each build to call the bundling and minification tasks.
    • Compile LESS or Sass files into CSS.
    • Compile TypeScript files to JavaScript.

    • Webpack:

    • Webpack is a module bundler that takes your web part files and dependencies and generates one or more JavaScript bundles so that you can load different bundles for different scenarios.
    • The development tool chain uses webpack for bundling. This enables you to define modules and where you want to use them. The tool chain also uses SystemJS, a Universal Module Loader, to load your modules. It helps you extend the scope of your Web Part by ensuring that each Web Part is executed in its own namespace.

    • Yeoman generator:

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


      Overview of SharePoint Framework Extensions:

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


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

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

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

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


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


      Has SharePoint Framework replaced other models?

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

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

      Is using the SharePoint Framework a best practice?

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

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

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

    • Although the SharePoint Framework has just been announced, it is not yet available to developers. However, you can start preparing for it by getting hold of the technologies already used by the SharePoint framework. You see, the SharePoint Framework has been based on tools that have been available for some time, but until now was irrelevant to us as SharePoint developers. This changes as the framework is released and in order to fully take advantage of its potential, it is important that you know these tools. In my next article I’ll share some tips on the tools you should start looking into to prepare yourself for the release of the SharePoint framework.

      So, when should I use the SharePoint Framework?

    • Generally speaking, solutions based on the SharePoint framework are your only option whenever you want to expand the capabilities of modern team sites. SPFx is the only SharePoint development model that works with modern SharePoint sites.

    • Another thing to remember is that SharePoint SPFx solutions work in both a modern and a classic experience. Even if your organisation is not yet using modern team sites, it may be worth it to build your solutions using the new SharePoint framework so that they can be used in the future.

    • There are also other architectural considerations for using the SharePoint Framework and other SharePoint development models and I will discuss them in more detail in a separate article, but whichever development model you use, code quality is an important factor in your solution. How will you perform and stand the test of time? It’s important to find a way to be the gold standard in all customization projects.

    • Solutions built using the SharePoint framework use client-side technology to present data. However how they get these data depends on the particular system and it may not always be possible to create a 100% client-side solution. For example, if you want to build a Web Part that interacts with Microsoft Graph, you can build a 100% client-side solution using Angular, ADAL JS, and OAuth implicit flows. On the other hand if you need to communicate with your organisation’s HR system, which does not support OAuth implicit flow, you will need a server-side API to communicate securely with the HR system on your behalf . Another common use case for leveraging server-side technologies is to implement long-running operations. So while you should definitely learn JavaScript, if you haven’t worked with it that much yet, whatever you’ve learned in the past and your knowledge of the SharePoint API in particular is still highly relevant.

    Course Curriculum

    Develop Your Skills with Advanced Developing with the SharePoint Framework Certification Training

    Weekday / Weekend BatchesSee Batch Details

      Why Yet another model?

    • We’ve seen quite a few development models for SharePoint over the years. Starting with WSPs in MOSS 2007, through Sandboxed Solutions in SharePoint 2010 to SharePoint Add-ins in SharePoint 2013. SharePoint customization models are evolving with one objective: to implement platform cleanliness and consistency, different from SharePoint customization. The SharePoint add-in model was the first step towards driving customization externally to SharePoint. Despite the various forms of add-ins, the model has some limitations, one of which is the use of iframes to integrate add-ins on a page.

    • As SharePoint SPFx, and technology in general, evolve and users demand new capabilities of their collaboration platforms, the new SharePoint UX is designed to answer that demand. SPFx is now the only model for building customization in SharePoint Modern.

    • An important fact to keep in mind is that modern SharePoint UX uses responsive web design with all of its components. This means that whether you’re using a desktop computer or a mobile phone, if you navigate a modern Teams site, you’ll be able to easily consume its content. When building a SharePoint SPFx solution, if you follow the guidelines provided by Microsoft, your solution will not only look great on mobile devices but will also be presented in the native SharePoint mobile app. It’s important to remember that the SharePoint Framework is just that – a framework. You should still analyse the quality of the code created by you and your team.

    SharePoint Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

      Conclusion:

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

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

    • For the first time, Microsoft is not using a proprietary development model specific to SharePoint, but instead leveraging tools and techniques widely used by developers across all platforms and stacks. At the same time, the product group is committed to using only publicly available APIs to build their solutions on top of the framework that will allow developers to build solutions with capabilities greater than those available out of the box.

    Are you looking training with Right Jobs?

    Contact Us

    Popular Courses

    Get Training Quote for Free