Simplifying Analytics in React Apps

As he said, the thing I'm presenting on today is simplifying analytics in React apps. Oh, technical difficulties, sorry. One second. Okay, we're back.

Okay, so I want to talk to you about a recent process that we've kind of gone through here at Sisense. So I'm a solution engineer here at Sisense, and, for those that don't know, I mean, some of you have heard called it cSense and every variation of the name, but at Sisense we are a full stack BI platform. And one of the kind of things that we wanted to do was open it up so that developers could also get a little bit more engaged on the BI, which has been a pretty big shift.

So what I want to kind of talk to you guys a little bit about today is how we can build embedded analytics for developers. And that means using common languages that you guys are all used to, like JavaScript, TypeScript, all the modern SDKs that can enable customizable, powerful analytics, directly into your React applications. And by reducing the backend complexity, we can enable developers to prioritize building dynamic data-rich UIs without the hassle of necessarily managing all the infrastructure that traditionally comes with that.

So laying out the kind of problem to you guys, like I said, BI platforms didn't necessarily deliver the level of customization required for some of today's analytics applications. I'm not sure if you guys have used BI platforms, Tableau, Power BI, there's a million of them these days, but most of them are not incredibly customizable. Because Sisense has moved into this more embedded space, one of the things that we want to do is really enable, like I said, our developers to be able to use the languages that they're used to and be able to customize what a BI experience can kind of look like. So basically, the thought that kind of started this was, can we use React to create a powerful SDK able to replace a BI tool frontend?

The requirements that we kind of devised for creating this SDK comes in three simple steps. Construct a semantic layer, something that describes the data and gives us some context to kind of work off of. Build some reusable components, in this case in React, and then do some cool things with it.

Hopping into the semantic layer. In Sisense, we have our own editor of how we can kind of bring tables together, join them, and describe the relationships between the data. But this could easily be any other solution that you guys are currently using, a DBT, any other semantic kind of tool. But the idea is that by kind of simplifying the data model and giving it context, we can then feed it into other solutions that will let us then allow developers to work off of it easily. So moving forward one more slide. What we did is we were able to build a really simple just kind of generator, basically, that would take the joins that we just saw in that data model previously and allow us to generate a TypeScript representation of that data model. So over here on the right, in the very maybe tiny, maybe large, I can't tell, kind of code snippet over there, we basically just have a simple representation of what that data model looks like. In this case, we're just using the data model names, the tables, the columns, the data types. We could throw in like some additional formulas and kind of things like that. But this could easily be extensible to also add things like data dictionary or additional context that you would want your developers to have inside the application. And then once we have that kind of built out, we can now start building React components directly off of that. So basically, because Sisense kind of has that translation engine, we can really simplify the lines of code for a developer to now reference that model that we have. So Sisense basically brings the black box of how we do the user authentication, how we apply row-level security, just hundreds of APIs that allow you to do some customization and abstract basically how you can build these data products. So looking at this kind of little code snippet that we have over here, we're just specifying that we want a line chart.

It's going to a data model called datasource, and you can see that we now have those references that are showing our tables. So our commerce table, a couple of additional kind of nice quality of life things would be maybe date that we can easily segment into different areas, things like that.

It also enables really simple UI. So working in the exact same way, the queries to retrieve things like member filters or date filters can now be done in a few lines of code instead of requiring a developer to do any queries themselves. So the why is that it makes things incredibly easy to implement. It enables things like cross-filtering, drill-down, interactive measures and dimensions to even enable things like self-service, and it completely eliminates the need for front-end engineers to necessarily have to write any SQL API calls. We can leave all the logic in a very easy, intuitive BI platform and then allow our users to build their own front-end exactly how they kind of imagine it.

So here's some interesting things that our team has done with this lately. So in one case, we had a hackathon internally, and my leadership team originally said, oh, we'll give you a couple of weeks to kind of build something, but then in classic fashion as soon as the hackathon popped up, they asked me to do it in three days instead. And so I grabbed a React template. I worked with another guy named Steve. I had him do the data model piece, and then basically my job was to just do the front-end. And my background as a software engineer did help a little in this case, but the idea was that we were able to build a near-production-ready application, in this case using a template, whereas Sisense would power the entire experience, all the interactivity, all the features that we have in that BI platform, but now in a completely custom front-end wrapper.

And then where we're kind of going with this, now that we've simplified this system, have an easy semantic layer understanding of the data model that's referenceable directly inside the code, is that now we can start using the amazing large language model technologies that you guys have seen probably all day today. Because we have that easy kind of object interface to manipulate the queries, the dimensions, the measures, et cetera, we can now have a chatbot actually create these components, which I'm not sure how this GIF looks up here. Actually way better than I thought. But the idea is that he can ask questions to generate visualizations now, create components, change the visualization type, or even design entire dashboard layouts through a conversational approach as well.

And just some finishing notes for you guys. Like I said, the idea of this was we wanted to just make a simple way of accessing data in a framework that lowers the skill required to build complex data products. It enables developers to move a lot faster, and it opens up alternative methods of both generating React objects and making them interactive. But thank you very much for listening to me.