IT-ROI Solutions are working on several SharePoint (On-Premise and Online) projects. We are constantly looking for updates on software development technologies to provide a better user experience (UX) with our SharePoint integration products.
This post is going to show you the approach to build a SharePoint Front-end application that could be reused in different SharePoint distributions: SharePoint On-Premise and SharePoint Online.
Sometimes SharePoint native components are not enough to create highly interactive applications, we must provide new mechanisms for developing these kinds of applications.
Suppose we must manage any JSON configuration at the SharePoint side, and suppose that the configuration requires complex user controls, additionally, this application needs to interact with external legacy systems. Of course, we could create a new web part in SharePoint for this purpose, but what if we need to reuse this application in SP On-Premise and SP Online? Then trouble arises because our C# approach and server side development are not valid approaches for SP Online scenarios, so we chose to build a Single Page Application(SPA) which allows us to reuse the same complex Front-end code in both SP distributions: On-Premise and Online.
Recently, we started a new project and one of the most important requirements was that our product should run over SP On-Premise and SP Online distributions. So we decided to develop a Single Page Application, in this way, we can reuse our front-end code for both SharePoint environments: On-Premise and Online.
The architecture of our solution looks like the following UML components diagram:
As you can see, the front-end component is agnostic to the SharePoint distribution, whereas the requests to the server are made with modern AJAX fetch instead of XMLHttpRequest object. In SharePoint, we write our SP logic and share data with front-end side via JSON.
The next view shows technologies involved in the project:
We choose Microsoft TypeScript as the programming language. TypeScript is a superset of JavaScript which means that all we can do with JavaScript is covered with TypeScript and more. Aspects as Microsoft support, strong type checking, easy code refactoring, Object Oriented Programming enhancements by adding classes and interfaces and support for new ES6 features makes TypeScript a highly configurable tool for web development. The TypeScript compiler trans piles written code to JavaScript that is the final programming language the browser executes.
Another important tool we selected is Facebook’s React library. We included React for create views components and improve user interactivity, with server side rendering of react we can provide some preloaded data to the Front-end tier. Additionally, we used Redux for application state management, Redux allowed us to work with programming logic out of the React views, this way, we could reuse programming logic between different GUI components. Finally, we selected Office UI Fabric as the Microsoft Official framework for building the user interface, Office UI Fabric provides a set of UI components such as: Buttons, DatePicker, CommandBar, ContextualMenu and many more…
In part 2 of this blog, I going to show how to create a basic Single Page Application with architecture and technologies shown in this post.
Check out IT-ROI’s SharePoint integration technologies: