Please note: this is an archived copy. For the most up to date version see https://docs.google.com/document/d/1PviXkmbkl3Q-2Ygvhgw2nzqeL273cpaCDvlyK-ShEs0/edit?usp=sharing
The existing Admin app needs evaluating with a view to replacing components to fix issues with non compliance against accessibility guidelines, and to enable better development in the long term.
...
UI components trusted by the very top companies: companies such as Spotify, Netflix and Amazon either use or build on top of MUI, and they’re not alone. Material UI has the largest UI community in the React ecosystem and is one of its leading libraries.
First-class user experience: MUI components are tried, tested and heavily customisable. We’re already customising components such as DataGrids in this release, and as we need more and more functionality our UI will evolve further to meet the needs of our users.
First-class design: MUI is simply more visually appealing than its predecessor, giving our admin UI a bit of ‘sparkle’ and ‘wow’ factor that makes it easier to sell to customers and more enjoyable to use. Our implementation in the admin UI also has the potential to be extended, reused and developed in future K-Int projects, giving us a big headstart on creating a fantastic UI in those projects.
World-class documentation: available at MUI, this documentation provides a massive range of examples and use cases for each component, helping not just with implementation but also with teaching and onboarding. Documentation also helps us fix issues quicker.
Faster navigation: switching to MUI has delivered speed and reliability improvements over react-bootstrap, its predecessor. It also means we can take advantage of Next.js features like server-side rendering, and eventually server-side pagination, so that we can stay fast even when dealing with huge data sets.
Building for the future: Switching to components like MUI Data Grids now means that our UI will stay fast even when dealing with massive data, as these components are designed to work with potentially millions of items.
Smaller bundle size, faster builds: by performing this work, we’ve been able to nearly halve build time by eliminating unnecessary components, npm packages and CSS, streamlining the application and its dependencies.
Easier customisation: our user interface can now be customised either at component-level with just a few lines, or globally with themes, eliminating the need for multiple hard to track changes across lots of CSS files. MUI gives us the power to create beautiful, customisable UIs that can be easily changed for each client’s specific needs.
More features: just by switching to Material, we gained: improved pagination, the ability to search data grids, sort and filter columns, and dark mode, to mention a few.
More accessible: now fully compliant with WCAG 2.1, the admin UI is hugely accessible after the Material UI upgrade, with more accessibility improvements coming in future releases and the AXE Dev Tools being used to keep it accessible going forward. This also provides an accessibility template to build on in future K-Int releases/projects.
Supports internationalisation: although we’ve not implemented this yet, just switching to Material UI makes supporting different locales a lot easier, with just a few lines of code required.
Easier to test: MUI components have well-known and well-documented established behaviours, making them easier to test when we implement automated testing in the UI.
Comes with its own design kits: https://mui.com/design-kits/ - this improves cross-team collaboration between developers and designers and establishes clear design guidelines.
Helps us ship faster: with a huge library of components that can be built upon and combined to fit almost any UI need, there’s no longer a need to ‘reinvent the wheel’ and spend lots of time building components that already exist, freeing up our developers to tackle the bigger problems.