We are living in an era of mobile-first, cloud-first applications. Microsoft is promoting this strategy and SharePoint is embracing the change.

In the past years we saw a rising number of clients switching to Office365 and demanding mobile-friendly SharePoint applications and portals. As a team we faced growing challenges: design and develop large and structured solutions that can easily leverage the REST APIs and the JSOM. In addition, clients often need reusable components that follow their brand guidelines and that they can easily manage and personalise.

Reusability

In SharePoint reusability is a key concept: SharePoint Web Parts should be simple components that can be reused by developers and administrators, added to different pages and sites targeting different data sources and potentially be  re-skinned to match the branding of the site.

In the past this could be achieved with Content Query Webparts, Search Webparts and Display Templates or Custom Webparts. While this is still a valid option, today is not the only one anymore.

Use this kind of Web Parts can be easy for SharePoint administrators and has been a reliable way to implement web parts for years but there are several limitations:

• Knowledge of XSLT is required
• Each visual customisation requires a different Display Template
• It’s not possible to customise filters: using this approach you are limited to the standard filters available in SharePoint
• Difficult to deliver a tailored user experience: relying on a fixed structure and the SharePoint templating is difficult, and often not possible at all, to use external frameworks and libraries

Using a powerful front-end framework enables us to overcome all these limitations.

React

It’s not a secret that Microsoft itself is using React for the most recent SharePoint components and interfaces. In fact the new SharePoint Framework natively support building Client-Side Web Parts using React.

React has proved to be what we were looking for: a framework that allows us to build lightweight, reusable, all-in-one components that can be logic-less and stateless (e.g. a simple  styled button, a link, a tile) or can contain logic and states (a carousel, a news viewer, a video player, a custom search webpart).

Comparing this approach to the more classic Content Query Web Part or Content Search Web Part the advantages are:

• It is possible to compose different subcomponents into one
• No SharePoint experience required to maintain and extend the components: any front-end developer can work with React
• Fully customisable user experience: the developers are free to use any external framework or library to improve the user experience
• Easy to reuse and extend for developers
• Mobile friendly and cloud-ready
• Compatible with the new client-side webparts

Office Fabric

Office Fabric is the official front-end framework for building experiences that fit seamlessly into Office and Office 365. This framework offers a set of styles, layouts, official brand icons, animations and even React components to reuse. We decided to include Fabric in our development process to build solutions that reflect the Microsoft user experience, that are easy to support and are well documented.

These components (e.g. the Date Picker in the picture above) can be easily plugged in our custom solutions and personalised to match the client look and feel and brand guidelines, maintaining all the rich functionalities provided by the framework.