February 1, 2018

Getting Started with the SharePoint Framework (SPFx)

Post by: Sarah Otto

Throughout 2017, Microsoft has been releasing updates to the SharePoint Framework (SPFx) – a new client-side development experience to customize SharePoint’s Modern Experience. We’ve been experiencing the changing development landscape as it takes shape.

Recently, I was lucky to have the opportunity to attend SP Fest Chicago to hear the experiences of notable people from the community. We wanted to share what we’ve been learning to get you excited about the Modern Experience and the possibilities to make it your own!

Customization Types

SPFx allows for customizations in the form of web parts and extensions.

Web Parts

Web Parts are controls that appear inside a SharePoint page but run locally in the browser. They’re the building blocks of pages that appear on a SharePoint site.

The key benefit of developing a web part with SPFx is having control of the web part properties panel. SPFx web parts give the power to the content authors for configuring the settings of their web part such as data source, layout, filtering, etc.

Extensions

Extensions enable you to extend the SharePoint user experience within modern pages and document libraries.

The SharePoint Framework has three extension types:

SPFx Extension ClassicPurpose
Application CustomizersEmbedded JavaScript or jQuery reference in Master PageAbility to add javascript to a page and access to well-known HTML placeholders (header / footer) – Allows for a branding solution
Field CustomizersJSLink, Client-side RenderAbility to override a display of a field in a modern list or library view (display view only)
Command SetsCustom Ribbon Action / Item Menu ActionAbility to add an action menu items

Developer Experience

The SharePoint Framework allows you to use any JavaScript framework to build your web parts and extensions such as: React, Handlebars, Knockout, and Angular. The toolchain is based on modern open source client development such as npm, TypeScript, Yeoman, webpack and gulp. Compare the tooling used in classic development with the new toolchain necessary for developing in the SharePoint Framework:

ClassicSPFxPurpose
.NetNode.jsCross platform run-time for executing server-side javascript
NugetNPMPackage Manager for Node.js – manage package dependencies
Visual StudioEditor of Choice (Visual Studio Code) + YeomanA project templating generator and editor
C#TypeScriptTyped superset of JavaScript, language used to build SPFx web parts and extensions
MS BuildGulpToolkit for automating tasks in the development workflow such as build, package and deploy
 Webpack Module Bundler Packages modern JavaScript applications into one or more bundles

Availability

The SharePoint Framework works for SharePoint Online (Web Parts and Extensions) and on-premises SharePoint 2016 Feature Pack 2 (Web Parts Only)

Let’s Start!

Use these steps to get your development environment set up for building your first SPFx web part or extension.

  1. SharePoint Environment (Create a Modern Team Site, or modern site page)

To set up your local machine,

  1. Install Node.js Install latest version (7+) https://nodejs.org/en/
  2. (Optional) If you are using a git source code repository (accept all default installation options) https://git-scm.com/download/win
  3. (Optional) You can use any editor of your choice, however we recommend using VS Code: https://code.visualstudio.com/docs/?dv=win
  4. Open Powershell
    1. Install Yeoman and Gulp à npm install -g yo gulp
    2. Install SharePoint Template Generator à npm install -g @microsoft/generator-sharepoint

Recommendations

Whether you are familiar with the tool chain or consider yourself a SharePoint Developer or a traditional web developer, we recommend to start slow with small customizations. Our approach to learning the new experience is to start with customizations we are familiar with in “classic” so we don’t get hung up on the functionality and allow more focus on the development experience.

With the infancy of the SharePoint Framework and the fast-paced updates in O365, the landscape is constantly enhancing and causing some frustrations with the experience. However, the community is taking notice that (with the SharePoint Framework) Microsoft is “eating their own dog food” by developing new SharePoint features in the framework alongside the rest of the community. This simply wasn’t the case with past development models. As Microsoft feels the pains we feel, better libraries and tools will be developed to make all our lives easier and gives high confidence that this will be a model that will have longevity.

Important Resources for Getting Started

Setup Development Environment
Build Your First Web Part
TypeScript

Learn more about our Modern Workplace capabilities.

Subscribe to our Newsletter

Stay informed on the latest technology news and trends

Relevant Insights

Should You Disrupt Yourself to Accelerate Digital Transformation?

It has been interesting to watch Microsoft transition from a company that makes its money via licensing to one that...

Cybersecurity Myth Busted: Tools Are the Solution

When thinking about security, people often gravitate towards implementing various security tools, solutions, or products. If you bring up a...

Time to Reconsider MP-BGP EVPN for Your Datacenter Network?

VxLAN was defined in 2014 by RFC 7348 and has been used as a component in several SDN (software defined...
X