Skip to main content

Interview Question of Advanced SharePoint SPFx

1. What is WebPack?

A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins.

WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js.

2. What is PowerShell.?

PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS.

3. What is bundling and Minification?

The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the server and reducing the size of requested such as CSS and JavaScript.

it decreases the size of bundled files, WebPack is also one of the tools, used for bundling.

4. How to optimize the SPFx WebPart?

It can be optimized the WebPart by below methods:

Bundling: it builds a single file of all the js files with a unique name.

Minification: it removes the extra spaces between the line of code, and build it lighter in terms of space consumed.

By Using page events: Write the necessary function call on the appropriate page event e.g., componentDidMount()

Rest API Call: use limited rest API call, instead of heating multi-time, should have used collection approach, and perform all curd activity in the collection and at the end store it into the List.

Pagination: Instead of loading the whole data, use the pagination and take only the record which is needed for the load.

5. What is the difference between the local workbench and live workbench?

Local workbench: local workbench provides a running environment,  where a developer can perform the static user interface and activities. port number 5432 is used for Adaptive Authentication (TCP).

this workbench will have the WebPart name for which you run the server

the URL of the local workbench could be: https://localhost:5432/workbench

Live workbench: It provided the same running environment as local workbench provides, but the difference is, the developer, can access the other resources of the site collection, like list, document libraries and other files

this workbench will have the WebPart name for which you run the server, also the other installed components.

the URL of the Live workbench could be:https://mysite.sharepoint.com/sites/mysite/_layouts/15/workbench.aspx

6. What is the default port number used by the local workbench in the SPFx?

The default port number allotted for the local workbench of SPFx is 5432, this port number is reserved for the Adaptive Authentication (TCP)  PostgreSQL database. it can also change the default port number from server.json, inside the config folder in the solution.



7. What is yo or Yoman-Generator?

YEOMAN is the open-source Scaffolding template generator tool used in modern web apps and frameworks, it is a plugin that can run by the 'yo' command to ease the development effort by scaffolding the solution or useful part.

8. What is Gulp-Cli and Gulp Local?

Gulp is a toolkit that is used to automate and improve/enhance the workflow by providing the flexibility of JavaScript to automate, repetitive and compose inefficient build pipeline

Gulp-CLI: as we know, gulp is a toolkit that is used for the build pipeline, the CLI tense for Command-Line Interface, it is the global version of Gulp, which can run on any version. it is used to understand the command line and work outside the node. 

Gulp Local: It is worked only in the scope of the node.

to know the version of gulp run the command gulp -v

9. What is a transcompiler with SPFx and React JS.?

the term Babel is responsible to transcompile ECMAScript 2015+ like React to the JavaScript code that can be run on the older version of JavaScript compatible engines. Babel is an open-source and free tool.

Babel is not fully compiled code it can only change the type of JSX file to JS file so that JS compatible browser can run it.

10. What happened when the gulp serve command is running?

The gulp serve is predefined CLI command, so, whenever this command is written the gulp-CLI understand the command and take action, 

for example: if the gulp serve is entered gulp provide a running environment by executing the operation pipeline.

to provide the environment not only the gulp also node and other integrated plugins are responsible 

11. How Node JS manage SPFx envoirnemt?

Node.JS is one of the open-source resources which are built based on Chrome's JavaScript runtime environment,

Node.JS provides the platform to build fast, scalable and allows to run JavaScript in node terminal to create modules.

it is not mandatory to use node.js for the development, you can write your code in plain js and run it on the browser.

12. What is chokidar.js?

Chokidar.js is a fast and smooth open-source file watcher based on node.js.

it provides the feature of changes and notifies you every time whenever an old file is edited also when a new file is created.

13. What is Cholk.js?

The term chalk module is a third-party module/package, which stayed in the node.js umbrella, that is used for styling the format of text and it allows us to create our own themes in the node js project. 

Advantages of Chalk.js Module: It helps to customize the colour of the output of the command-line output (CLI).

14. Why did we run npm install to resolve the dependency.?

npm install is the command which is used to download a package and its dependencies. 

it workes under the node.js platform, it can be run with or without arguments. When run without arguments,

npm install downloads dependencies defined as per the package.json file and generates a node_modules folder with the installed modules.

15. What is package.json?

Package.json is the main configuration file, which stays in the root file of the solution, that can store the information of each and every dependency in 

the dependent sequence.

it preserves the package name with its version number, based on the package.json dependency, the node installs all the dependencies in the node_module folder.

16. How we can check the version of Node Js and all the dependencies.?

to check the version of different-different packages need to run the specific commands

  • 1. to check the node version: node -v
  • 2. to check the npm version:npm -v
  • 3. to check the gulp version: gulp -v
  • 4. to check the list of all dependent versions: npm list -g --depth=0
  • 5. to force clean, npm caches: npm cache clean -force
  • 6. to install the latest npm version: npm install npm@latest -g
17. What is PolyFill.js, what dependencies it resolve?
A polyfill is a javascript file or plugin used to provide javascript comparability or modern functionality to older browsers that do not natively support the modern one.
usually used to provide support on IE and Edge(non-chromium based) browsers.

18. What is Visual Studio Code terminal?
Visual studio code terminal provides the command-line interface so, that developer can provide input and visualize the output on that.
Visual Studio Code allowed selecting which command language you want to choose, from here developer can also, choose PowerShell.

19. What is the development and deployment process of SPFx?


20. What is the meaning of.SPPKG package?
the meaning of.SPPKG is a SharePoint solution package it is similar to SharePoint add-in packages.


Hope this will help, kindly share your feedback, so that I can improve my blogs.

Comments

Popular posts from this blog

Power Apps modern driven app Interview Question and answer

Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without the need for extensive coding. These apps can be built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens : Screens serve as the user interface for the app and can include multiple layouts, controls, and data visualizations. Data sources : These are the various repositories where the app can retrieve and store data, such as SharePoint lists, SQL databases, Excel files, etc. Connectors : Connectors enable integration with external services and systems, allowing data to be fetched or updated. Formulas : Power Apps uses a formula language called Power Apps

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

SPFX Interview question for 2023

SPFx Interview Questions for 2023 Question 1: What is SharePoint Framework (SPFx)? Answer: SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating client-side web parts and extensions for SharePoint Online and SharePoint 2019. It is based on modern web technologies like JavaScript, TypeScript, and React, providing a rich and responsive user experience. Question 2: What are the key advantages of using SPFx for SharePoint development? Answer: SPFx offers several advantages, such as: Responsive and mobile-ready web parts and extensions. Seamless integration with SharePoint data and services. Support for modern web development practices and tools. Easy deployment and hosting options. Enhanced security and isolation through the SharePoint app model. Question 3: Can you explain the structure of an SPFx solution? Answer: An SPFx solution consists of the following key components: Web Parts: These are the building blocks of SPFx solutions, representing the vi