Talk to us today

Sri Lanka
  • 40/2/21, Chakkindarama Rd,
    Sri Lanka

Silverstripe + React + Material-UI

Our learnings from building a fast, reliable, scalable, data management system with millions of records.

What we built

Early this year we were presented with a project scope to develop a property management system which holds information about various tourism organisations mainly hotels, their room types, room rates, free-busy periods and finally an advanced booking system.

Challenges we had

Challenges we had were choosing the right stack of technologies and building the system’s architecture. We have a few things in mind to achieve with this project. It needed to be extremely fast, and scalable among multiple servers. 

We knew the right direction to go was to use a distributed database, distributed digital assets and make the maximum of out of client side processing. We came up with a technical stack which included 

  • Silverstripe CMS, for data management 
  • Amazon S3, for digital assets storage
  • ReactJS, to build the user interfaces taking them completely away from Silverstirpe
  • Material-UI, to use as the base to built the interfaces 
  • GraphQL, to manage communications between Silverstripe and React 
  • JWT for authentication

What we learnt and gained

Silverstripe template processing

With the use of react we could avoid using Silverstripe templates, what this meant was all the looping, conditional and injections were not used, and brought to the client side. It also made it possible to use multiple servers without having to worry about distributed sessions.

Material-UI made development faster

A good thing about using Material-UI and basing the designs on MUI is faster turnarounds in development. After completing our basic style guides and patterns, the rest pretty much was to follow the wireframes and build each section in. Material-UI allowed us to create reusable react components for various complex field types, data grids, etc. and worked perfectly.

Silverstripe ORM and GraphQL

Silverstripe has a powerful ORM. We used all powers of it for CRUD operations of various data types. Silverstripe also ships with a GraphQL module enabling using it with React Apollo. Apollo allowed fetching data and executing mutations on the database, We ended up extending it to handle file uploads, versioned records updates etc.  GraphQL enabled querying data on a need to know basis, this saved us a lot of processing power in the CMS.

React Router

We made use of the react router to enable switching between various screens of the application. It ended up being as fast as lightning when a button was clicked and was only showing a different screen.

Powerful form validations

With the use of react and its statuses we built form validations within the front end application. However we did also have validations in the PHP, but we could avoid scenarios where a user submits a form and waits for the server to respond with validation errors. It also helps with minimising the traffic for the API.

The result

We made a powerful data management system within a time span of eight sprints and achieved unimaginable speed and stability. The project is still in its early stages in terms of production, but we haven’t had any issues so far, which is great. Our recommendation for any data management, business automation project would be to use Silverstripe with React JS and Material-UI.

Interested in what we are doing ?

It all starts with a “Hello!” click below to flick us a message to discuss your next digital project.

Lets Talk