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.
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:
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: