Simon Bisson
Contributor

Introducing SPFx, the SharePoint Framework for business apps

analysis
Jun 12, 20186 mins
Development ToolsSoftware DevelopmentTechnology Industry

Microsoft’s open source web tool is changing how you build business applications on top of SharePoint

file folder storage and sharing
Credit: Thinkstock

One of the oldest parts of Microsoft’s modern development platform is SharePoint. The successor to its original ASP-based Site Server intranet tool, SharePoint is a lot more than another enterprise content management tool. While it’s often ignored, left to host files and internal web content, at heart it’s an effective tool for building and managing workflows, with its own programming model and tools.

Our businesses are a lot more than their inputs and their outputs. They’re complex sets of information and material flows that link individuals, teams, and business processes. Much of that structure has developed organically, evolving as the business has grown, making it hard to map and harder still to add automation. That’s where SharePoint comes in, giving you tools you need to make that map of who does what and how they’re connected.

People often talk of Conway’s Law, the idea that software encapsulates the organization that created it, as “shipping your org chart.” It’s a bad thing, because it makes it hard for code to adapt to the world outside your walls and your servers. But inside those walls and on those servers, the org chart is a good thing. It’s how you build that map, and how you connect the human aspects of a business process.

SharePoint as a platform

SharePoint’s role as an enterprise content management tool gives it a significant insight into your organization chart, especially when it’s used to manage team-level collaboration with its built-in Team Site features. It’s that insight into your organizational graph that makes it a powerful back end for your internal applications, offering you a system of record for your corporate knowledge and for your documents, as well as for your org chart.

Using SharePoint, you can automate approval workflows, giving you the opportunity to build code that handles services for accounts departments or for HR—the parts of your company that rarely have outward-facing software.

SharePoint gives you a choice of development models. You can use it as part of an Office Add-in, integrating into familiar Office applications like Outlook or Excel, or call it from any application using a REST API and the Microsoft Graph, if you’re using it as part of an Office 365 or Microsoft 365 subscription. Alternatively, it gives you webhooks for integration with serverless and event-driven programming models, like Azure Functions.

However, the most powerful tool for building SharePoint integrations into your applications is the SharePoint Framework.

SPFx: the SharePoint Framework

Available in Office 365 and on-premises, the SharePoint Framework (aka SPFx) builds on the familiar C#-based web part development model, adding your own user interface to SharePoint data and services. Unlike the original web parts tools, however, SPFx supports any JavaScript framework you want to use, as well as familiar open source development environments. For complex implementations there’s even the option of using the combination of TypeScript and Angular.

With SPFx, you build components that run inside a page, as part of the DOM. Code is part of the page, behaving like a web component. While there’s similarity between the two approaches, SPFx is not an implementation of the web component model; in fact, it’s unlikely to ever become one.

Microsoft provides a web part generator for use with the Yeoman web application generator. An important web development tool, Yeoman also provides code generators for many familiar web development frameworks, delivering HTML and JavaScript structures that you customize with your own code. With the SPFx generator, you set the name of your application and indicate whether it will target on-premises SharePoint or SharePoint Online, along with any JavaScript framework you’re planning to use.

Building, testing, and deploying SPFx web parts

Yeoman creates a scaffold for your code, bringing in the appropriate SPFx elements and creating the file structure you need to build your web part. Because it’s a command-line tool, you can run it from the Visual Studio Code terminal or from any development tool with a command line, so you don’t need to leave your development environment to start building an SPFx application.

The code you’re building runs using the Gulp task runner to handle builds and deployment, using its built-in web server to handle tests. You’ll need to install a local certificate to ensure your code is secure, and Microsoft provides a developer certificate as part of the SPFx development environment. (It’s in the directory structure created by Yeoman for your web part.)

Building a web part is easy enough—it’s like building any modern web front end. You can use SharePoint’s REST APIs to access service data, wrapping calls in promises and callbacks with JSON processing to handle result data. You use the same approach to link your web part to any other services you plan to use.

Once the code is ready to test, SharePoint offers a Workbench surface to preview web parts from your local development environment. Because Visual Studio Code integrates with Gulp, you can use it to debug your JavaScript or TypeScript. By default, web parts are reactive, so any changes you make to properties inside the Workbench appear as soon as they’re made. Because the Workbench is running in SharePoint, you’ve got access to SharePoint data and can test interactions with a SharePoint site, lists, and libraries. Once your code has been tested and debugged, you can deploy it to your SharePoint instance for use in sites and in pages.

From 2D to 3D: SharePoint Spaces

The underlying technologies in SPFx go a lot further than delivering integrated web parts. In fact, it’s the SharePoint Framework that has let Microsoft deliver SharePoint Spaces, an easy-to-author augmented-reality environment. Instead of using complex modeling software to build virtual spaces, it uses a basic layout engine and web-based 3D models. You can bring WebVR into SharePoint, along with Babylon.js 3D animations and models. These then link to SharePoint libraries, giving you a 3D view into your content.

Microsoft has demonstrated using Spaces to build 3D catalogs on top of documents stored in SharePoint, using drag-and-drop tools to add new content and to link 3D models to content. In the demo I tried out, I could also include 360-degree video objects, quickly adding immersive content alongside the more traditional documents and images.

SPFx makes SharePoint an effective front end to the Microsoft Graph, extending it into the browser and into augmented reality. Beyond the browser, its built in APIs and webhooks offer more programming surfaces, integrating it with modern distributed applications and serverless computing, providing both a workflow environment and a managed storage platform.

With a growing set of open development tools and a hybrid deployment model that can mix on-premises, Office 35, and Azure, it’s time to stop thinking of SharePoint as an intranet, and to take advantage of it as a key component in your line-of-business applications.

Simon Bisson
Contributor

Author of InfoWorld's Enterprise Microsoft blog, Simon Bisson prefers to think of “career” as a verb rather than a noun, having worked in academic and telecoms research, as well as having been the CTO of a startup, running the technical side of UK Online (the first national ISP with content as well as connections), before moving into consultancy and technology strategy. He’s built plenty of large-scale web applications, designed architectures for multi-terabyte online image stores, implemented B2B information hubs, and come up with next generation mobile network architectures and knowledge management solutions. In between doing all that, he’s been a freelance journalist since the early days of the web and writes about everything from enterprise architecture down to gadgets.

More from this author