Getting Started with SharePoint Framework: Overview & Quick Resource Guide

Microsoft recently announced that its plans for new development will be done using SharePoint Framework, a page and part model that gives us yet another way to customize Office 365 and SharePoint. SharePoint Framework is fully supported for client-side development and allows for easy integration with Microsoft Graph, in addition to providing support for open source tooling. For Timlin, this is good news, as we will likely be able to develop against the same application program interface (API) as the product team. 

Setting the Stage: Past Problems and Future Promise

Looking to the past, we’ve seen some shortcomings with the look and feel of other Microsoft methodologies –  particularly, it’s been difficult to customize applications to look and feel like they are part of the Office 365 platform. Microsoft has solved for this issue, however, with the release of Office UI Fabric, a front-end toolkit that helps your app or add-in blend into Office and Office 365.

And now, as we see it, the future is promising for SharePoint Framework. There’s an increased user demand for new capabilities when it comes to collaboration platforms – and the SharePoint Framework model responds to that demand with customizations that integrate with SharePoint UX. Users can also look forward to the new look of features including the SharePoint Online document libraries.

Getting Started with SharePoint Framework

So what are some things you’ll need to keep in mind to get set up with SharePoint Framework? Here’s a quick run-down of what may be involved, and some resources to help you along.

First, you will need to set up your environment. Now, if you are like me, a long-time Microsoft Developer who looked to C# as my bread and butter, you may expect this to be some add-in to Visual Studio. However, this is not the case. Microsoft has made it easier for non-SharePoint developers to start adopting the platform: they have embraced the open source world and tools; partly out of conviction and partly out of necessity (perhaps the Visual Studio team simply can’t keep up).

Next, let’s take a look at the list of tools you will need and what they do:

• Node.js: A JavaScript runtime built on Chrome’s V8 JavaScript engine. Think of Node JS as your IIS Express in Visual Studio — you need something to serve up the files for your application.

• npm: A package manager that allows you to find, share and reuse packages of code and reassemble them in new ways. (In Visual Studio, it would be comparable to the Nuget package manager.) If you need to get the latest version of something, there is an npm package for it. And typically, when you install Node.js, it will install npm for you as well.

• Yeoman: This tool helps you kick start new projects, prescribing best practices and tools to stay productive. For example, Yeoman offers new project templates, which we can equate to New Project– Empty SharePoint 2013 Project.

• Gulp: Gulp is a JavaScript task runner that lets you automate tasks, namely solving for repetitive processes that developers find themselves doing over and over again on a daily basis. Think of MSBuild, which is scripting to automate builds and deployments.

Finally, you’ll want to think about a source code editor. Of the myriad of choices when it comes to code editors, here are two popular choices you’ll want to consider:

• Visual Studio Code from Microsoft: This powerful and speedy source code editor is good for daily use, and allows you to debug code directly from the editing tool. It also has built-in Git commands, extensions for new languages, themes, debuggers – and the ability to connect to additional services.

• WebStorm from JetBrains – From the same company that brought us ReShareper, WebStorm is a lightweight but powerful IDE that can handle complicated client-side and server-side development with Node.js. It provides intelligent coding assistance for developers (like smart code completion and error detection) as well a support for the latest technologies.

Now that we’ve covered the basics on SharePoint Framework, including some of the tools you’ll want to keep top of mind, keep an eye out for our next blog where we’ll cover how to setup your environment and write some code.  Stay tuned until next time – and remember, if you would like to learn more about the SharePoint services Timlin provides, contact us at any time.

HubSpot Call-to-Action Code end HubSpot Call-to-Action Code