1. 8

Get an Elm app to render using your favourite template library. (Anybody said Glimmer?).

  1.  

  2. 3

    If you’re interested in using something more template like with Elm that doesn’t require port glue, maybe check out elmx. I haven’t used it, but it’s designed to be the Elm equivalent of React’s jsx, letting you write HTML directly in your .elm files.

    One thing to keep an eye on with external rendering is that you might lose some of the optimizations in Elm’s rendering pipeline, like the ability to leverage requestAnimationFrame. Check out this blog post for some general information on the sort of optimzations Elm does that other frameworks don’t/can’t do: http://elm-lang.org/blog/blazing-fast-html-round-two.

    I couldn’t find the source for your performance benchmarks, but for the pure Elm one, you’ll want to make sure you’re using Html.keyed and lazy in the right spots, which uh… I don’t actually know much about those other than that they’re recommended to make rendering fast. I haven’t had much need to optimize anything in Elm yet. You might check out how they’re used in this repo: https://github.com/krausest/js-framework-benchmark, or maybe look at the PR’s from evancz and manlon in that repo: https://github.com/krausest/js-framework-benchmark/pulls?utf8=%E2%9C%93&q=is%3Apr%20elm

    Apologies if any of this is old news to you. If so, hopefully it will be useful for someone else!

    1. 2

      That’s actually very useful, thank you. I’ll check out those resources.

      Regarding elmx, I’m not really a fan of JSX because mixing logic with templates still doesn’t feel right to me. More specifically, I find it’s easier for designers to work in the project when template files are clearly separated. Mixing everything opens the door for merge conflicts and the like. Of course, I do think elmx it’s a great solution for people coming from React and already used to this syntax.

      1. 1

        Glad to be of help! I don’t particularly care for jsx or elmx either. Although to your point about working with designers, you could still put elmx views in a completely separate set of modules to keep them clearly separated from other code. That said, I haven’t had a workflow where I was paired with a designer generating HTML in quite a while, so what do I know?

        Personally, after working with standard Elm view functions for a bit, I don’t really miss HTML templates. There’s so many fewer typos and weird corner cases to consider that I count it a win overall. I never have to hunt around for typos in the markup, and I don’t get into scenarios where I want a newline in the template for readability, but I don’t want the resulting textual white space between elements when rendered. Essentially, using code makes all intent in the template explicit, hiding everything else. In a templating tool, my intent ends up getting mixed with formatting concerns.