Blog written by:
Dhaval Shah
SharePoint & .Net Consultant
Intro
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.
Current Trends of JavaScript Framework
Nowadays, we see a lot of buzz around JavaScript frameworks like Angular, React JS, Knockout JS and hundreds of other frameworks. The best thing about all of these frameworks is that they’re open source. For rapid development you must have the technology that’s popular. That way you don’t have to reinvent the wheel, and you’ll have a large support community if you’re stuck somewhere – that’s always a very good thing.
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.
Typescript—Typescript is an open source language Microsoft created. Typescript executes in Node.js and is suitable for the client- and server-side applications. Typescript is a super-set of JavaScript. So a valid JavaScript code is a valid Typescript code but not the other way around. Typescript is something you have to be very well versed in since most of development uses Typescript.
These tools and technology are good to get you started in the SharePoint framework.
JavaScript Frameworks
You can also choose any of the JavaScript frameworks like React, AngularJS, KnockoutJS, among others. Microsoft doesn’t recommend which framework to use. However, Microsoft uses ReactJS for its customizations in SharePoint. The only one that doesn’t work well is Angular 2 because of its architecture. It works with one web part on the page but not on multiple web parts on the page, which is more of an Angular 2 issue and not a Microsoft issue.
Code Editors
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.
Conclusion
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.
View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
- SharePoint Metadata - October 8, 2018
- SharePoint Permission Levels - August 29, 2018
- How to Create multiple SharePoint Sites using PowerShell and XML template? - September 5, 2017