Does it make sense to rely on JS libraries for simple effects s.a., Collapse?

Learn
1

I’m new to Elm and trying to understand best practices. In my first app I needed to use a Collapse element. Since I am using the Bootstrap CSS file, I tried to use Collapse, but of course it’s not CSS only and requires JQuery. I’d think overuse of JS libraries breaks the no-runtime-error guarantee that Elm promises, but at the same time I wonder if I should be spending time implementing every little effect from scratch. What’s the “correct” way?

2

To me, it always tempting to use something already built for something like a Collapse or a dropdown. Less coding, and less state to keep track of in the model!

But then a while later I need to automatically open some Collapse elements and close all dropdowns programmatically in some situation. Now that becomes much more annoying! While if I had done it all in Elm, I could just update the model and that would be it.

So in my experience, it’s worth doing things that feel “unnecessary” or “just a lot of work” in the beginning. It can pay off in the long run!

Also, it’s good to know that if something changes DOM that Elm controls, Elm can easily crash next time it updates the DOM. Elm expects the DOM to look exactly like it did last time it rendered.

3 Likes
3

For the record, in your particular scenario there are at least two ways to implement collapse-like scenario without JS:

3 Likes
4

Last sentence in particular is great to know as a beginner, thank you!

1 Like
5

Without hacks you can use <details>: The Details disclosure element - HTML: HyperText Markup Language | MDN as well. There’s also currently a proposal to use the same element for native web modals, though in Firefox it’s still behind a feature flag.

2 Likes
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.