How to Get Started with the SharePoint Framework

How to Get Started with the SharePoint Framework

By Sebastien Levert | July 28, 2017

Getting started with the new SharePoint Framework is a lot like laying out the groundwork for a new home. Before you get started gutting out the old architecture in favor for a more modern build, you have to first consider how to leverage your technical skills for proper development.

Sure, it’s exciting to identify all of the innovative ways you can implement great UI on SharePoint, but executing on proposed plans requires mapping out a blueprint of your entire project. And as fun as it is to daydream about your new wrap-around porch or basement den (complete with LED lights!), doing construction on your home demands plenty of heavy lifting.

In the same vein, it’s important to learn the foundations of the new SharePoint Framework before you hit a figurative wall. Here, we’ll discuss the new SharePoint Framework and help you get started on the right foot with an exclusive SPFx tutorial.

SharePoint Framework Tutorial

When it comes to adapting new technologies, it’s crucial to have a comprehensive understanding of the stack. The SharePoint Framework is equipped with a new set of tools and features that—coupled with the working knowledge of how to apply them—ensure a rich SharePoint environment geared towards facilitating an amazing user experience.

Instead of wasting time and energy trying to figure out the best way to get started on the SharePoint Framework, check out the following functions to get up to speed.

JavaScript

JavaScript is the language of the web, and it’s fundamental to any modern web development framework. If you’re proficient with JavaScript and possess an understanding of its strengths and weaknesses, then you’ll be on the right track with building the SharePoint Framework.

Though SharePoint developers were historically categorized as “SharePoint Developers,” as opposed to web developers, the new SharePoint Framework presents an opportunity for everyone to jump onto a broader development game.

TypeScript

TypeScript is an incredible language that supersedes JavaScript and provides an accessway to all of the important assets that another language like C# provides. Once you’ve mastered JavaScript, taking advantage of everything TypeScript enables would be your next big challenge.

Though TypeScript is considered to be more advanced than JavaScript, the SharePoint Framework depends on both languages, so ensuring full functionality of its features requires fluency of both.

Toolchain

This modern and open-source toolkit includes: NodeJS (the foundation of every tool within SPFx), npm (Node Package Manager), Yeoman (the scaffolding tool), and Gulp (the task runner).

Consider this technology stack your list of best friends. Since you will be living and breathing this toolchain, it’s imperative that you fully understand the dynamics of each tool.

What Comprises the SharePoint Framework?

The SharePoint Framework is a relatively simple framework that leverages industry standards. It is mainly comprised of three primary components: the Generator, the WebParts, and the UI Extensions.

The Generator

The Yeoman Generator is deemed the first step in getting started with the SharePoint Framework, as it helps you to create all of the necessary files and dependencies you need from day one. The Generator also allows you to manage the lifecycle of your project by adding new a WebPart or UI Extension.

The WebParts

The WebParts creation for Modern and Classic experiences was the first aspect of the SharePoint Framework that was released to the public. Though there’s a lot to learn about its functionalities, the main areas of concentration within WebParts entails the React integration (including Office UI React components) and the Configuration piece. With these features, you can build intuitive UI components and deploy techniques to make your set of WebParts available to your users.


UI Extensions

The UI Extensions are a fantastic way to customize and integrate yourselves directly into the Modern SharePoint experiences. In fact, you can deploy new Command Sets (buttons and actions on lists), new Application Customizers (control over specific placeholders within the page), and new Field Customizers (changing the way a field is rendered within a list).

Though the model could change depending on the Preview feedback, this integration in the Modern UI is generally welcomed by the SharePoint community, considering it covers a large number of use cases that the On-Premises version covered.


Example of a Command Set

Example of an Application Customizer


Example of a Field Customizer

Conclusion

As exciting as it is moving into a new home, committing to renovation requires not only a fair amount of legwork, but plenty of strategic planning as well. Similarly, if you’re looking to provide your users with an intuitive experience on SharePoint, the new SharePoint Framework is a great place to start.

By ensuring a solid foundation of the SharePoint Framework, you’ll be in an advantageous position to start your journey on the right foot and get your users up to speed. Though plenty of other admins and users may get into the thick of the SharePoint Framework without an understanding of how to navigate its rich tools and functions, it’s important to keep in mind that laying out the groundwork first guarantees a stable and user-friendly collaboration environment.

We’d Love to Help!

At Metalogix, we’re all about lending a hand when it comes to managing your on-premises or cloud collaboration platform. If you’re looking for the best way to manage users on SharePoint Online or Office 365, check out Essentials for Office 365! It provides a comprehensive scope on all things management, migration, and security on Office 365.


Sebastien is an Office Development MVP and a Microsoft Certified Software Developer. He speaks regularly at conferences around the world, including SharePoint Saturdays, the European SharePoint Conference, and the European Collaboration Summit. He is also an organizer of the Quebec SharePoint User Group, an organizer of MSDEVMTL, and an organizer of two SharePoint Saturdays (Quebec & Montreal). Follow him on Twitter at @sebastienlevert.

Written By: Sebastien Levert

Leave a Comment

Add new comment