Blog written by:
SharePoint & .Net Consultant
This article is the first in my upcoming series on SharePoint Framework. You’ll see the detailed steps on how to create client-side web parts using the SharePoint Framework and how to deploy these new types of packages/solutions. I’ll first start off with a general overview of the new SharePoint Framework and some of the concepts and tools used in this new development model.
Microsoft Doesn’t Want to Leave You Behind
During the years since SharePoint launched in 2001, development evolved from developing server-side web parts using C# toward client-side development using content editor and script editor web parts. Later on, the company came up with the SharePoint app, also called SharePoint Add Ins, which wasn’t as successful as iFrame and was very slow. With the release of this framework Microsoft wants to draw in fresh developer support through use of various open source tools. Gone were the days when you would need to know ASP.Net and C# to work with SharePoint. My opinion – I like C#, but I can see the clear advantages of this new model and using just client-side API.
What Benefits Does SharePoint Framework Bring?
SharePoint Framework brings the new SharePoint UX, using open source tools like Yeoman scaffolding, Gulp and REST-based APIs for building SharePoint web parts. It allows any Java script frameworks like React JS, Angular or Knockout JS. It provides:
- Full client-side development
- Development using open source technology
- Your choice of host
- SPFx components run in the current user context, which improves the load time
- Supports development on modern pages as well as traditional classic and publishing pages
- Full-trust mode
- Responsive design
Open Source Tools
Learning all these new tools and frameworks is little overwhelming, but it’s very important to know that you don’t have to really become experienced at everything because most of the tools you can install and forget about. It might be best to get well versed with TypeScript and some basic Node.js commands. You may require these other tools at some time, but you can ignore them while you’re getting comfortable with the SharePoint framework. Also, you’ll learn about these commands in the next article in the series.
Let’s take a look at each of the tools you’ll need.
Node.js—Node.js is an open source, cross-platform runtime environment to develop applications. You won’t code in Node.js, but you will use NPM (Node package manager) to deploy the various packages in your project. You’ll use NPM to get the pre-built packages to use in your application like Angular, Jquery, and other similar apps.
Yeoman—Yeoman is a template engine that runs on top of Node.js. You’ll use the SharePoint framework just to create your Sharepoint project structure and then forget about it. The out of the box SharePoint Yeoman Generator for SharePoint Framework has two templates one for React and another for Knockout.
Gulp—Gulp is a task runner to compile Typescript or lesser files and to run the automated processes. Again, this is also built on top of node.js. You use this to compile Typescript files, bundle the files into a package and upload to SharePoint or CDN.
Webpack—Webpack is the build tool that bundles your JS, CSS, Image and fonts file into a single big file, which helps to increase performance and manageability. SharePoint framework uses Webpack to bundle the source code files. Like Yeoman, once installed, you can ignore Webpack since you don’t have to explicitly install it. It will remain available as default scaffolding from the Yeoman template.
These tools and technology are good to get you started in the SharePoint framework.
There are multiple code editor options you can use for development of components in the SharePoint framework like Notepad ++, Sublime, Visual Studio code and others. It’s up to the developer to use the editor they’re comfortable with. For example, I like Visual Studio code because it’s very lightweight, open source, Microsoft-supported, and it has good Typescript support.
Now, you have a brief overview about the SharePoint framework and what benefits it brings. Also, you learned about the tool chain and technology to use for developing the client-side components in SharePoint framework. In the next posting, you’ll learn how to get your development environment ready.