About Prisma

Prisma is an Open Source ORM (Object Relational Mapping Tool) for Node.js and Typescript. Prisma supports many of the most popular database systems: PostgreSQL, MySQL, SQL Server, SQLite, MongoDB (Preview) and Cockroach (Preview). Prisma client is Open Source and Apache Licensed.

By using an Open Source model, Prisma's aim, as described by their CEO Søren Bramer Schmidt, is to "democratise the custom data access layer used by companies like Facebook, Twitter, and Airbnb and make it available to development teams and organisations of all sizes to effortlessly build modern & scalable applications."

Everything in Prisma is based on a simple schema language which is used to generate the ORM client code. As versions of the schema change over time migration code can be automatically generated by comparing the schema changes.

The Prisma toolkit consists of the Prisma Client (the ORM query builder), Prisma Migrate (data modelling and migration) and the Prisma Data Platform.

We managed to get some time with some of the Prisma team (Emily Morgan and Luan van der Westhuizen) to see the toolset in action and understand a little more about how they use AG Grid.

Prisma Data Platform's use of AG Grid

Prisma uses the Community Edition of AG Grid for one of the key elements of the Prisma Data Platform (PDP) the Prisma Data Browser.

AG Grid is used as the basis the data browser and editor.

• Database Table data is shown in the browser
• Relationships between tables are shown in a popup AG Grid

PDP Data Browser’s UI is written in React, and uses the AG Grid React UI.

Selecting AG Grid

Prisma started by building their own Table View in React but as the Data Browser functionality grew they looked around for a table library that would help save them time.

The evaluation process was initially a hands on experimental process trialing a lot of different table and grid libraries and struggling to customise them until they found AG Grid.

"We found that a lot of existing table libraries let us build basic features quickly, but most of them were hard or impossible to tweak to our liking. We had very specific kinds of behaviour in mind, and spent a lot of time in CodeSandbox experimenting with different libraries, before finding an out-of-the-box solution like AG Grid that fit all our criteria."

• Luan van der Westhuizen, Senior Frontend Engineer

Configuration was an important consideration, as was a library that would save development time. AG Grid provided the perfect mix of out of the box functionality and customization.

"Some of the libraries we evaluated gave us the whole table, and all we could do was tweak the styles; others didn’t render anything on the screen, so that left out the hardest parts up to us to implement, and others were just not built for inline editing the way we wanted."

• Emily Morgan, Software Engineer

After learning about the capabilites of existing libraries and having ruled out a headless table solution a more formal set of criteria was created for evaluating components against.

• The component needed to be able to virtualize data, rather than render it all in the DOM.

The Prisma Data Browser is a DataBase viewer, and has to handle a huge amount of data. Rendering everything on screen, at once, would lead to poor performance and excessive memory consumption. AG Grid has built in row virtualisation so it only adds rows that are displayed to the DOM, the rest are maintained in memory. For larger data sets AG Grid offers server side row models to pull data as required from server side calls.

• Custom cell renderers that were east to create and test.

The Data Browser deals with many different types of data (strings, BigInt lists, relations to name a few). To offer the best user experience, Prisma needed to build UI controls that were specifically designed for that data type. For example, a drop down for editing an enum and custom controls for relations and scalar lists. Prisma created custom Cell Renderers and Value Getters to model their business use case.

• Custom styles that could match the design.

The Prisma team had created an extensive set of Figma mockups that they wanted to implement as close to the designs as possible for the best user experience.

Prisma have cosmetically customised the grid, by adding their own cell renderers and editors, header customisaton and a new theme for light and dark mode. The Prisma team have been able to use the standard features of AG Grid without additional customisatoin: row/column virtualization, column visibility, row selection, row sorting, etc.

Prisma Data Browser has a popup relations editor, which looks very complicated to implement but they found it easy to create with AG Grid as they simply created a custom Cell Editor that rendered data in a separate AG Grid instance.

"AG Grid allowed us to implement our design vision for maximum UX. Even the Prisma Data Browser popup relations editor was super easy to create: it’s literally the same component as the main grid; we just overrode the cell editor, and rendered a read-only version of the main grid."

• Luan van der Westhuizen, Senior Frontend Engineer

• Interoperability with MobX

The Data Browser has a lot of state to manage. Prisma had evaluated many state management systems and had built up a very extensive state management system with MobX at its core. Any grid library chosen would need to be able to work with MobX. Since AG Grid is built to be framework agnostic it doesn't impose any constraints on how state is managed.

• Library had to fit in with the development process

AG Grid was easy to fit in with the development process and the Prisma team also automate the grid for the end to end tests using Playwright to interact with the grid just like a user would.

AG Grid managed to tick all of these boxes. In fact Prisma said that they "haven’t touched ag-grid’s setup in nearly 2 years, it continues to just work".

Prisma Future Use

Prisma are actively working to improve the capabilities of the ORM and cloud platform. The currnet plan is to expand the capabilities of the PDP Data Browser to allow teams to collaborate with even more sophisticated permissions and views of the data.

They are also working on:

• Automating the provisioning of databases for preview deployments
• Extending the Prisma schema to enable declaring how to propagate data changes from a source to a destination

Prisma offer their ORM client as a free open source product and the cloud platform is currently free to use.

Video Demo and Interview

Emily and Luan jumped on a video call with Alan Richardson for a chat and demo of the ORM and the Data Platform.

Watch On YouTube

The Community Edition of AG Grid is free for anyone to use in commercial and open source products.