Elm: How would you build and style your UI?

Question

For the last few days I've learning about Elm, and it has been a refreshing experience. So much that I do not want to go back into JS land, :-(.

My problem is that I still do not see a way to produce a web app with elm, and I would love some guidance and advise:

evancz/start-app is great for organising the app's structure.
evancz/effects together with elmfire can handle talking to Firebase.

But how would I build and style the UI?
Let's take a concrete example: a styled select widget from Semantic-UI.
It is implemented as a list of divs, together with some JS to handle the dropdown and multi-select.

The alternatives I have found so far are:

1. Include Semantic's CSS and JS (it requires JQuery) and use ports to hook into the widget's JS events.
2. Include only Semantic's CSS and try to build the functionality in Elm.
3. Both build the functionality and style in Elm (adam-r-kowalski/Elm-Css).
4. Forget about Semantic and redo the site in Bootstrap using circuithub/elm-bootstrap-html.

Are there other alternatives, or widgets that could be reused that I am missing?

The TheSeamau5/TabbedPages container is certainly intimidating. Would others widgets require this much work?

Again, I'd love to use Elm for my project, but I do not have the knowledge nor the time to write all the widgets myself.

For context, the widgets I am using from Semantic are:

• Two hamburger menus, one on each side of the screen.
• A styled select.
• Disclosure triangles, hiding/showing more content.
• A carrousel-like display of images, with prev/next and dots at the bottom.

Thanks again for the work you are putting into Elm, and any advise you can give me.

PS: I have also posted this question in elm's mailing list.

Answer 1

First of all, as the author of the TabbedPages container, I'd like to apologize for the complexity. That component is really meant as an experiment to see what is possible using Elm and the Elm Architecture along with inline styles. In short, the idea of the component is to allow for a tabs+swipeable pages components where the contents of both the tabs and the pages are unknown and the entire thing is styled using inline styles. This is probably the hardest route for making a component, although it has its advantages.

As for implementing widgets, think of Elm as a means of authoring Html (like a super advanced Jade). This means that you can just write html and give each div some classes and style those classes in CSS (or whatever pre-processesor you choose). This means that, no, your widgets would not need as much work as TabbedPages.

The best course of action would probably be to include the CSS and probably redo the JS part in Elm. This would give you a lot of the guarantees from Elm without having to pay too much of a cost in working on the component.

As for components in the wild, unfortunately there aren't many out there currently as Elm is still young. This will probably change in the future, but currently this is not the case.

Finally, for the hamburger menus, there are two great packages in Elm that deliver svg icons

1. TheSeamau5/elm-material-icons
2. jystic/elm-font-awesome

Between the two there's like a little under 1000 icons to choose from (I think, I haven't really counted) and they're just functions, so they're super easy to use. They produce Svg which is just another name for the Html type so you can just work with the two interchangeably.

In short, currently, the best way to go is to author your html and logic in Elm and your styles in CSS (or Sass/Less/Stylus/etc...). And the bulk of your logic would simply consist in switching the classes you put in the divs, like with jQuery.

To do so, I recommend following the Elm architecture:

init : Options -> Model  update : Action -> Model -> Model -- or update : Action -> Model -> (Model, Effects Action)  -- if you need effects like http  view : Address Action -> Model -> Html 

As for inline styles, don't worry too much for the moment. It is a work in progress and a lot of breakthroughs are happening in that space (like elm-css) and you'll probably start seeing some blog posts and components appearing whenever folks start mastering it. (unfortunately, this is what happens when you tinker with the cutting edge... although, if you wanna join in the fun of discovering, the Elm community is very welcoming and it's quite fun because it seems everyone is learning together :D)

Answer 2

I know this question was answered a long time back, but thought I'd add my $0.02 for Elm 0.17 and 0.18. Check out the Material Design Lite components, for 0.17, and forked for 0.18.

The Live Demo site is slick and exhaustive.