Skip to main content

Thank you PREACT

· 3 min read
Siva Dirisala
Creator of SQL Frames

SQL Frames has several types of DataFrames that neatly fit into a class hierarchy as expressed in TypeScript. One of the goals of SQL Frames, which makes it different from current Python Pandas, is an integrated user interface to all the different DataFrames. There are two main reasons for this.

  1. Focus on what matters - that is to let the users focus on their data analysis rather than spending time on figuring out how to do the plumbing between their data and its presentation.
  2. No-code data transformations - that is to let the users manipulate their data transformations using the user interface and they can view and analyze every step of their data transformation so it becomes easy to not only debug but also to even figure out the right way to compose the logic to difficult business use cases.

In the past I had experience with AngularJS and Vue. I would have almost settled on Vue but before committing to it I did some research on other frameworks that I could potentially use. I ended up choosing PREACT. There were two main reasons to choose PREACT.

  1. Performance - It seemed to have some very good performance benchmarks in most use cases.
  2. HTM - It is possible to write the markup without having to transpile it using babel. That is, there is no need to use JSX and instead using JavaScript template literals it is possible to create tagged templates. The reason for choosing this is for rapid prototyping by reducing the build time.

PREACT is almost compatible alternative to React. I say almost because, it is not 100% compatible by default but possible to make it compatible with add-on libraries. This was done by design to reduce the bundle size of PREACT. Interestingly, SQL Frames so far has managed to use only the core PREACT library without the REACT compatibility layer. I intend to keep it this way for as long as possible.

While all the UI for SQL Frames is developed using PREACT, there is also a wrapper to provide it as a REACT component. That is how all the examples in the SQL Frames documentation are made live by embedding the REACT wrapper components into the Docusaurus based documentation.

I haven't done any formal benchmarks for SQL Frames UI comparing it with others. However, scrolling the DataFrame table feels very smooth. I compared this to several online table / grid / pivot UIs out there that are both free and commercial and I feel that SQL Frames is much smoother. A single scroll gesture is able to easily scroll through 400 to 500 rows without any sluggishness. Just go to the tutorial and see this in action with the DataFrame displayed at the very beginning.

As the UI matures, I might choose to replace tagged templates with JSX so it becomes easy to maintain for others working on the project. Also, I managed to bring down the build time drastically which I will discuss in another Thank you post.