HTML-like syntax for elm-html

[Yemi]

I'm really excited about using Elm, however, when it comes to using elm-html I'm not really comfortable writing html (kind of) the same way you would write "html" in React without the JSX syntax.

So my question is: is there any way of using elm-html in a way that resembles native html (or haml/jade etc.)? If its currently not possible, is this something that other people than myself would be interested in? 

Im talking about some kind port of Jsx to Elm, so.. Elmx? ;)

[Rehno Lindeque]

I think I would personally quite like to see jade brought into Elm, in a similar fashion to elm-markdown (perhaps with some additional string interpolation).

[Max Goldstein]

I did not know about Jade, though I did know about HAML.

In the FP world, clojure(script) has Hiccup. Garden extends the idea to CSS.

[Ecky Putrady]

It might be just me, but I actually prefer writing html in a simpler syntax like current elm-html or CoffeeScript (http://yang.github.io/reactive-coffee/)

[Evan Czaplicki]

I'm with Ecky, it's nice that the full power of Elm is available with elm-html. No special syntax is needed, it's easy to use lists or dictionaries or functions or whatever else, and you get type checking very easily. That's a lot of features to match, and one of them involves having a type inference algorithm!

I guess this is controversial, but my feeling is that templating languages tend to evolve into bad languages. What I mean is, there's a pull towards accidental turing-completeness. "Wouldn't it be nice to have a for loop?" and it gets added. "Wouldn't it be nice to have if statements?" "What about when I want an expression from the host language?" {{ normal stuff }} Eventually you have embedded a whole new language in an existing language! And worse, that embedded language is probably fairly haphazard and limited.

What if your templating language meshed perfectly with the host language? I think you can think of elm-html as an answer to that question.

Is this a controversial thing to say? I have not really talked about this much before, so I have no idea if I am missing certain perspectives.

On Tue, Jan 27, 2015 at 1:32 PM, Ecky Putrady <eckyp...@gmail.com> wrote:

It might be just me, but I actually prefer writing html in a simpler syntax like current elm-html or CoffeeScript (http://yang.github.io/reactive-coffee/)

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jeff Smits]

I agree completely with this Evan. The only templating languages I've seen are only an improvement because the programming language you combine them with is a language that requires too much boilerplate to generate the stuff you want. And then you have to try and content yourself with the quirks of the templating language...

Perhaps the OP would be helped by elm-html-shorthand?

[Sean Corfield]

On Jan 27, 2015, at 5:46 AM, Evan Czaplicki <eva...@gmail.com> wrote:
> I'm with Ecky, it's nice that the full power of Elm is available with elm-html. No special syntax is needed, it's easy to use lists or dictionaries or functions or whatever else, and you get type checking very easily. That's a lot of features to match, and one of them involves having a type inference algorithm!

The elm-html syntax is very close to Hiccup in Clojure and there's really very little difference between HTML syntax and either elm-html or Hiccup (except HTML makes you write closing tags everywhere while elm-html and Hiccup take care of that based on syntax):

div [id "main"] [
h1 [] [text "Hello"]
, p [] [text "World!"]
]

[:div {:id "main"}
[:h1 {} "Hello"]
[:p {} "World!"]]

<div id="main">
<h1>"Hello"</h1>
<p>"World!"</p>
</div>

> I guess this is controversial, but my feeling is that templating languages tend to evolve into bad languages.

As someone who has had to work with quite a lot of CFML over the years (I was Macromedia's senior architect when they bought Allaire so we ended up with a lot of CFML on our various websites), I will agree with Evan here. Templating languages tend to grow and grow - and usually without much forethought about language design or elegance - until they become monstrosities.

Sean Corfield -- (904) 302-SEAN
An Architect's View -- http://corfield.org/

"Perfection is the enemy of the good."
-- Gustave Flaubert, French realist novelist (1821-1880)

[Richard Feldman]

100% agree with Evan and Jeff. I use React at work without JSX (using a simple CoffeeScript DSL that actually resembles elm-html, heh), but I recognize that a lot of people like JSX.

Personally I not only like elm-html's approach of just being a set of concise functions inside the language, I actually prefer it.

[Hassan Hayat]

Plus, I personally find it nice to use when I alias elements to make my own. I also take care of the attributes most of the time, so I end up with stuff like:

mainContainer [
   menuBar [
      menuButton,
      profileButton
  ],
  mainContent [
      article1,
      article2,
      article3
  ],
  footerSection [
      contactInfo,
      socialMediaButtons,
      copyrightText
  ]
]

I think this reads really nicely and it's in Elm. So, you have access to all of Elm's awesomeness. But then again, I know that a lot of people love them some templating languages.

[Rehno Lindeque]

So as the author of both elm-html-shorthand and elm-bootstrap-html I will say some things in defense of templating languages. Don't get me wrong, these are good points about direct embedding as well.

First thing: creating shorthand functions is somewhat time consuming and feels a lot like busy work. It's also really heavy on RSI, too much of that kind of work and my hands start to pain. Having said that, once the templates have been created it could also save on typing, especially in the form of larger layouts and widgets... however, getting to that point might take some time and a lot of tedious work.

These short snippets aren't really representative of what goes on in a full blown app. Never-the-less, for comparison, here's a tiny snippet in elm-html:

section [class "container", id "my-page"]

  [ div [class "row"]

    [ div [class "col-md-2 col-sm-3"]

      [ -- etc...

      ]

    ]

  ]

...and in jade:

section.container#my-page

  .row

    .col-md-2.col-sm-3

      //- etc...

I agree that embedding a logical language inside a templating language is not really very desirable, but it's also entirely unnecessary - a little bit of interpolation would go all the way in my opinion. The trouble that templating languages run into is that they need to deal with fragments of the templates themselves, but this is not a problem in Elm because Html is just a value. You would only need two* special forms of interpolation:

foo = 

  let contents title = jade """

        form(name="#{title}")    //- You would need string interpolation... (possibly with toString automatically) 

      """

  in jade """

      section.container

        .row

          .col-md-2.col-sm-3

            {{contents "Foo"}}   //- ...and Html interpolation

    """

* ...and actually, those two forms of interpolation could be only one if it takes context into account.

My last defense is going to be that the direct embedding is not always as nice and clean as presented in many of these posts. You do tend to get <|, |>, :: and ++ sprinkled around when you start building composites; this is likely to look rather arcane to newcomers. I can imagine situations where you'd like to employ a contract designer for a small amount of time... In this scenario it would be nice if they could make small layout changes and without needing to teach them much about Elm.

All that said:

I think templating languages like this is going to be inevitable. Somebody is going to do this, it's just a matter of time (assuming that Elm makes it mainstream). I don't really think this is right time to be worrying about this kind of thing though - except perhaps considering string interpolation as a language feature.

If anyone really wants to do something cool for html right now my suggestion would be an elm-html-focus counterpart to Evan's focus library that lets you manipulate Html in a jQuery-like (yet purely functional) fashion. I feel that this kind of thing would likely get yourself and Elm some really nice press if it's well thought out :-)

[Christian Wesselhoeft]

I'm a newcomer to Elm and FP so I don't have an informed opinion on this issue, but if there was an HTML-like syntax available I'd be using it. Maybe it'll grow on me, but right now the elm-html syntax feels like more work than something like Mustache. Also HTML-style syntax might be less of a context shift when debugging? I do believe in keeping logic out of templates, though.

Another example of prior art (although I haven't used it) is this Haskell library: https://github.com/nejstastnejsistene/whiskers

[Yemi]

Fair enough ;) I just wanted the nice syntax from e.g. Jade or even html (just to more easily make that design/markup connection). But i guess if you make aliases for your elements as in Hassans example it can look pretty clean as well.