3 ms·

Great article! I'm a fan of Elm - but I can't say I'm a fan of writing HTML like this: https://github.com/twopoint718/elmchat/blob/7ee097b937117cc65ffedaff73715

Great article! I'm a fan of Elm - but I can't say I'm a fan of writing HTML like this: https://github.com/twopoint718/elmchat/blob/7ee097b937117cc65ffedaff7371561f29479417/src/View.elm#L35 https://github.com/twopoint718/elmchat/blob/7ee097b937117cc6... And that's pretty much the most simple component you could create. The author is determined to reach their 10,000 lines of elm: that'd just be like, 10 reasonably-complex components! ;) But that's just the HTML part of the pie... the actual code seems quite beautiful.

munro 11y ago
Yea... In theory it would be nice to have any DSL style created in the language, but in practice it seems easier to specifically build HTML-like syntax into the core language (like JSX). Or build a separate language like Haskell's Hamlet [1], or Python's Jinja [2]. [1] http://www.yesodweb.com/book/shakespearean-templates http://www.yesodweb.com/book/shakespearean-templates [2] http://jinja.pocoo.org/ http://jinja.pocoo.org/
- grey-area 11y ago
  Another approach is to invert the problem and use html web components - so declare new objects in html and separate the logic. That feels far more natural to me than an almost html (react) or some sort of dsl which shadows html mixing up logic, data and presentation - html is the one part of the web stack which is pretty much fit for purpose, why try to replace it? See Polymer for an example of using this in current browsers: https://www.polymer-project.org https://www.polymer-project.org The markup is just custom html elements separate from the behaviour (in js). e.g. a dialog: https://elements.polymer-project.org/elements/paper-dialog?view=demo:demo/index.html https://elements.polymer-project.org/elements/paper-dialog?v... <paper-dialog> <h2>Header</h2> <paper-dialog-scrollable> Lorem ipsum... </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-dismiss>Cancel</paper-button> <paper-button dialog-confirm>Accept</paper-button> </div> </paper-dialog>
  - munro 11y ago
    Good point! I do really enjoy writing Angular templates. Embed the language in HTML, instead of the other way around. :D As an aside, PyCharm is a great editor, it can understand Angular, HTML, CSS, and Jinja all in the same file, and does lots of helpful introspection for me. For example, I can command click any property to jump to it's definition, as well as syntax highlighting for all these languages.
- zem 11y ago
  clojurescript has lovely html syntax; it's probably my favourite to write. i generally prefer mlish to lispish syntax, but s-expressions fit the problem of representing a tree structure perfectly.
btown 11y ago
Could you conceivably make a JSX preprocessor for Elm? Because this looks almost identical to how to do React components in CoffeeScript without JSX. And it's painful once you start getting to more than 1 level of nesting... it becomes impossible to tell, looking at a single line, whether something is meant to be an attribute or a nested component. Moving to JSX is a godsend after that - it feels a bit odd, but once you realize that you're really writing HTML that you could always copy-paste into something-that's-not-React if you ever decided to move away from React, it's incredibly liberating. There's this thread: https://groups.google.com/forum/#!topic/elm-discuss/uXjcVyZ5IYo https://groups.google.com/forum/#!topic/elm-discuss/uXjcVyZ5... - but no other activity on a JSX preprocessor. Has anyone else been looking into this?
RehnoLindeque 11y ago
There's a proposal at the moment to reduce comma-noise a bit, which I think might help the situation if it's accepted: https://groups.google.com/d/msg/elm-discuss/PMGBcspBDiM/m6a32H9knmsJ https://groups.google.com/d/msg/elm-discuss/PMGBcspBDiM/m6a3...

munro 11y ago

Yea... In theory it would be nice to have any DSL style created in the language, but in practice it seems easier to specifically build HTML-like syntax into the core language (like JSX). Or build a separate language like Haskell's Hamlet [1], or Python's Jinja [2]. [1] http://www.yesodweb.com/book/shakespearean-templates http://www.yesodweb.com/book/shakespearean-templates [2] http://jinja.pocoo.org/ http://jinja.pocoo.org/

grey-area 11y ago
Another approach is to invert the problem and use html web components - so declare new objects in html and separate the logic. That feels far more natural to me than an almost html (react) or some sort of dsl which shadows html mixing up logic, data and presentation - html is the one part of the web stack which is pretty much fit for purpose, why try to replace it? See Polymer for an example of using this in current browsers: https://www.polymer-project.org https://www.polymer-project.org The markup is just custom html elements separate from the behaviour (in js). e.g. a dialog: https://elements.polymer-project.org/elements/paper-dialog?view=demo:demo/index.html https://elements.polymer-project.org/elements/paper-dialog?v... <paper-dialog> <h2>Header</h2> <paper-dialog-scrollable> Lorem ipsum... </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-dismiss>Cancel</paper-button> <paper-button dialog-confirm>Accept</paper-button> </div> </paper-dialog>
- munro 11y ago
  Good point! I do really enjoy writing Angular templates. Embed the language in HTML, instead of the other way around. :D As an aside, PyCharm is a great editor, it can understand Angular, HTML, CSS, and Jinja all in the same file, and does lots of helpful introspection for me. For example, I can command click any property to jump to it's definition, as well as syntax highlighting for all these languages.
zem 11y ago
clojurescript has lovely html syntax; it's probably my favourite to write. i generally prefer mlish to lispish syntax, but s-expressions fit the problem of representing a tree structure perfectly.

btown 11y ago

Could you conceivably make a JSX preprocessor for Elm? Because this looks almost identical to how to do React components in CoffeeScript without JSX. And it's painful once you start getting to more than 1 level of nesting... it becomes impossible to tell, looking at a single line, whether something is meant to be an attribute or a nested component. Moving to JSX is a godsend after that - it feels a bit odd, but once you realize that you're really writing HTML that you could always copy-paste into something-that's-not-React if you ever decided to move away from React, it's incredibly liberating. There's this thread: https://groups.google.com/forum/#!topic/elm-discuss/uXjcVyZ5IYo https://groups.google.com/forum/#!topic/elm-discuss/uXjcVyZ5... - but no other activity on a JSX preprocessor. Has anyone else been looking into this?

RehnoLindeque 11y ago

There's a proposal at the moment to reduce comma-noise a bit, which I think might help the situation if it's accepted: https://groups.google.com/d/msg/elm-discuss/PMGBcspBDiM/m6a32H9knmsJ https://groups.google.com/d/msg/elm-discuss/PMGBcspBDiM/m6a3...