Hi there , recently I’ve been working on a small personal accounting application in Elm. Basically importing bank statements from CSVs, categorizing them and showing monthly overviews of income and spending by category. It’s not yet ready to be shared, but I intend to open source it once it has some kind of MVP-ish completeness.
I’m using elm-spa and elm-ui.
Naturally, I have pages with “large” tables, especially on the basic “Book” view that shows the entirety of all bank statements in the DB and has some filtering and sorting options.
But this page gets super slow with my test data of only ~1700 rows (in practice it’s going to be more than that, I’d expect in the order of 5-10K statements). Using the helpful guidance from Performance Optimization, I was able to pin down the performance bottleneck: combining stylesheets of elm-ui elements is what takes about 40% of the time:
$mdgriffith$elm_ui$Internal$Model$toStyleSheetString</combine<, which calls
_Utils_ap, the elm-core implementation of append.
If I replace the elm-ui table with a
Html.table element, the app is super snappy, which confirms the source of the issue. But obviously I’m loosing all the the nice styling options of elm-ui (if it were only colors and spacing I guess that would be okay, but there’s also inline editing / input fields and other, harder to replace ui elements).
I did use
Element.lazy and it did provide a little bit of speedup, but by far not as significant as with the Html table.
So my questions are
- Does anyone have prior experience with large tables and elm-ui performance and some optimization ideas?
- How I place the
Element.lazycalls strategically? I put it just in front of the
Element.indexedTablecall to get some speedup. But when I use it for every single table cell, it actually slowed the whole thing down (to a point worse than without Element.lazy at all). It would be great to have this per-row, because that’s the level on which the ordering and filtering logic is being applied, but I don’t see how I could achieve that with
- I noticed that elm-ui does not produce elements, but aligns each cell individually, which of course leads to per-cell unique styles. Is there a way to make elm-ui able to understand that there are basically only a handful of styles to be applied (up to positioning)?
- I’d like to see/try whether GitHub - mdgriffith/elm-optimize-level-2 can help, however because I’m compiling with elm-spa, it’s not clear to me how I could pass on other compiler flags - pointers would be greatly appreciated.