Disclaimer: Posted this on Reddit yesterday as well, but then discovered this community is much larger so posting it here. Will also say I’m open to other ideas than the below 3 options as well.
I have three options at the moment that I’ve been racking my brain over for the last 24hours, and I can’t make the decision.
The best example of what our platform is would probably be something like RobinHood (the stock trading app). We’ll probably design it with mobile-responsiveness first, and then scale it up to full page app.
Option 1: Use Elm-bootstrap and Bootstrap 4.
Pros: It’s all in Elm, so I don’t have to worry about ports. I also think (but this is conjecture) that it’ll end up being cleaner than just using boostrap-css and doing all of the required JS pieces that are missing myself in Elm, because it uses aliases for things (like Bootstrap.grid etc), instead of say, div [class “grid-x grid-y”]. Feels like that may be a little cleaner, again though, conjecture. At the least it does save the port and interop requirements, which seems to be a big plus? Bootstrap resources online are common too due to its popularity, if I ever get stuck or need help with something design related it should be easy to find a solution.
Cons: The css classes seem confusing and messy (the names aren’t great and are not very descriptive). Bootstrap also seems to require a lot of bloaty nested HTML. I also don’t like the styling as much as Semantic. I’m also relying on the robustness and flexibility of the elm-bootstrap library (hopefully there are no bugs and it can do everything I need it to).
Option 2: Use Semantic-UI and their JS components
Pros: It’s very pretty, I love the styling. It seems to be more featureful and has cool features that’d be useful for Elm (like placeholders, which was just released in 2.4). The css classes are super clear and basically plain English, which I think will make it a lot easier to learn and use. It seems more concise in its use of HTML.
Cons: I’d have to use ports to handle all of the interop, and i have no idea how that’ll tie into Elm. I can imagine initialization problems abound (I presume page/view updating will require reinitialization, etc). I’ve heard that file-size is also larger than Bootstrap, but not sure how true that is anymore or how much bigger it is.
Option 3: Use Semantic-UI LESS
Pros: Same pros as above. The difference is that this doesn’t include the javascript, so I have no problems with interop.
Cons: I have to implement all of the javascript functionality myself. This is a sorta-con I guess, maybe this is a good thing, but maybe it’s a lot of work and I’d be better off just using something like Elm-bootstrap because this is all already done for me, and it’s done in Elm too.
Considerations: Speed to build a product, code maintainability/cleanliness, code clarity, optimizing file sizes, having a great looking product, easy development/learning
So far I’m leaning toward Bootstrap simply because my gut is telling me that this will be cleaner and require less work, but I really like Semantic-UI’s styling (really-really), and I want to use some of its cool features like placeholders (Bootstrap doesn’t have this). I’m just worried about either hand rolling the the JS and making it all myself in Elm if I use the “LESS only”, or worried about how nicely Elm will play with the Javascript using ports if I use their “full package”. Let me say that if there was an elm-semantic that did what Bootstrap did (reimplemented all the JS in elm) I’d probably use that.
Sorry for the massive wall of text, and thanks if you made it through it!