I’m planning to develop a website that displays analytics reports, similar to Cloudflare Radar 2.0 or Google Analytics. I’m currently in the process of selecting a tech stack.
I looked into Plausible because it closely aligns with my project, and I noticed that it uses React for the frontend. Now that LiveView has reached version 1.0, I’d like to hear your thoughts on the best tech stack for such a website.
Would a combination of LiveView and JavaScript graph libraries like D3 be sufficient, or should I consider using React for the frontend?
So just for the graph features, using React seems to me like an additional layer and most React chart libs are just abstractions over d3.
There is one benefit though: these abstractions give you the 80% for 20% effort. Unless you want something the abstraction does not support; then you have rewrite straight to d3 (my previous employee had to do so)
Advice 1
I would skip all the extra work, layers and extra deployment concerns and just go with straight d3 in LiveView. Integration is easy and you are not limited by whatever abstraction.
——
About React vs LiveView for a dashboard: not sure as I haven’t done anything remotely close to the use case with LiveView. (edit) But the Phoenix Analytics project chose React, maybe they can enlighten you on their decision:
Phoenix.LiveDashboard with Phoenix.LiveDashboard.PageBuilder seems to be a LiveView solution.
Advice 2
Please do notice there is a project for “Analytics ala Google” already. Might be better to work together than to start and alternative on your own.
I personally liked the dev experience for VegaLite because the Elixir package gives you a nice way to build the JSON spec and it’s just a simple hook for every chart, because it gets configured via the spec. But it’s missing some interactions/animations and that’s why we settled on ECharts in the end for a nicer user experience. You can push the serialized data as JSON to the hook and have it render the chart.
@BartOtten isn’t the Phoenix Analytics project a React frontend?
@kevinschweikert I’ve used echarts for some dashboard and animation work but have migrated the complex stuff to d3 to get more control. echarts was great until I hit that wall. Having to define your formatters on the JS side when the rest was done on the Elixir side was a bit unfortunate too.
D3 is rather confusing to learn at first, though D3 in Action and observablehq are good resources. It is rather verbose on account of being so low level, but you can create exactly what you want.
Charts.js is very simple and pragmatic and used by my favourite website monitoring tool uptime.com I don’t know if there’s any pre existing integration with livebook but I agree it should be straightforward to integrate.
An option I’m currently evaluating, because it seems reasonable and someone (@staxx) kindly wrote a liveview plugin, is Apexcharts