Introduction To SharePoint Framework (SPFx) - Zero To Hero Series - Part One

Overview of SPFx

SharePoint Framework is also abbreviated as SPFx. SharePoint Framework offers modern technologies, Node-based development, TypeScript etc. that are applied to SharePoint and Office 365 development.



Earlier, we used to create web-parts (rectangular boxes with defined functionality) and even business users knew what web-parts are. In SharePoint Framework, these web-parts are termed as Client web-parts. From a technology perspective, they are quite different, but from a user perspective, they are the same rectangular widgets that the users can add on their pages. In addition, we know about Add-In model and the Iframe-based integration, which we used in our daily SharePoint development.

History of SharePoint Development

• Farm Solutions
  The development in SharePoint started with Farm Solutions, WSPs, full trust code. This approach was very powerful and developers could literally do whatever they wanted to do on the SharePoint Farm. However, it made upgrades very difficult and it made maintaining and keeping the environment secure very difficult.
  
  
• Sandbox Solutions
  A box in which code cannot run outside the boundary of the box.
  
  
• Add-Ins (App Model)
  This has been introduced in SharePoint 2013 and Office 365. It is based on Iframe-based integration. This approach also has many disadvantages.
  
  
• Script Injection
  Using Content Editor and Script Editor web-parts. With this approach, we can almost everything on a SharePoint page; however, this is not the best-recommended approach from Microsoft.
  
  
• No-script capability
  A tenant wide setting which removes all content editor web-part and scripts from the page.
  
  
• SharePoint Framework
  It is a custom and supported way from Microsoft, to allow to embed code inside SharePoint sites.

Skills and Tools required for SPFx

• Npm and Node-based Development
• TypeScript
• Visual Studio Code Editor

NPM and Node-Based Development

The example shown in this article is tested on a Windows 10 Machine (although you can test on a MAC or LINUX   machine also). I have installed a terminal called “cmder” - http://cmder.net/  (You can go with built-in terminal also).



Now we will see how to install Node.js

Go to the site nodejs.org, and download and install the Current (Latest features) version of Node.js (.msi file will be downloaded).





Once nodejs is installed in your system, you will see the below folders created in your local drive path,



NOTE

Go to another site, npmjs (https://www.npmjs.com/). This site is a node registry where there are many node packages available, and there is lot of reusable code, which we can use in our projects.

Once nodejs is installed, go to cmder and type “node”, you will see the below screen which means we are good to go with nodejs. (to exit, enter .exit and press enter)



One of the packages available is npm (Node Package Manager). It’s showing the npm version as 3.10.10, and it might be possible that you might see a different version, because it updates very rapidly.



First thing that we do after install Node, is to write

npm install –g npm

NOTE

Node modules can be installed globally (-g) which means you can run them from command like any other DOS program but they can also be installed locally and then they go to a folder called node_modules. Then they will be available to use in your code but not at an operating system level.

If you are using the above command on MAC or LINUX machine then add a word – sudo with the above command, as shown below:-

sudo npm install –g npm 

Once you run the command (npm install –g npm), it will look into the npm registry and will look for a package named npm and it will install it. While installing, it is just copying collection of JavaScript files into my profile and I can very well uninstall it using npm uninstall –g, I can also update it and so on.



Wait for the node package to get installed, and the below screen shows that it has been installed.



Now if you will hit the command npm ---v, it will tell you the version of node package manager installed.



Great, now that node package manager has been installed, we can start writing Node-based projects.

Additional Notes

When you will install node.js from official website, you will see an option to install LTS version, as shown below. I will highly recommend not to install this version, as you might face the below scenarios (errors) after installing LTS version, as it comes with limited features. I have also included the local drive image showing less items in the nodejs folder, after its installation.

Summary

In this article, we saw the introduction of SharePoint Framework and learned about Node-based development. The commands used in this article are,

• npm
• npm install –g npm
• npm ---v 

In the next article of this series, we will see more on Node-based development and introduction to other tools and technologies required for SharePoint Framework.