SVGs as Elm Code | Hacker News Reader

SVGs as Elm Code

blog.noredink.com

77 pointswebwielder242 comments

If you haven't already, do also have a look at Scott Wlaschin's talk "Domain Modeling Made Functional with the F# Type System" (it seems he has a whole book out on it now too) https://fsharpforfunandprofit.com/ddd/ (F# and Elm are similar enough that the concepts map directly.)

I've been challenging folks for a while now: What's the economic argument for using JS in a world where Elm exists?

In other words, if you want a front-end app, and you do not care about the technology used to make it (you're not using a particular stack just because you like it) then you should pretty much just use Elm, eh?

If I'm some business owner who wants a web app that works reliably and is cheap to maintain, I don't know or care about the underlying tech stack, it seems like Elm is sooooooo much better than all the JS frameworks and "ecosystem" in terms of the metrics I care about.

Typical objections:

1) JS devs are easier to find.

I would never hire a programmer who can learn and use JS but refuses to learn and use Elm. That's a technician not a programmer.

It's easy to train non-programmers to use Elm. (If you can solve Sudoku you can learn to program.)

2) Elm doesn't integrate with some library or service.

That's an argument for wrapping that lib/service in an Elm module, not against using Elm entirely. (E.g. in Rust you sometimes must use unsafe code but we do not give up the borrow checker entirely.)

3) Evan is mean.

I do not care.

4) I can't control the Elm compiler development.

Elm is simple, write your own compiler.

- - - -

I've heard that there's work on an Elm-to-native app compiler... Neat.

Elm is stagnant. There's been no release since October 2019. It's a problem because there are known bugs.

Elm is also unstable; there's no guarantee Evan won't break things in the next release.

It's a bad combination. A fork could in theory fix this. Has anyone done it, though?

There is Gren, but I didn’t use it.

https://gren-lang.org/

I am particularly interested in this project that transpiles to TypeScript: https://github.com/eeue56/derw

> Elm is also unstable;

> no release since October 2019

Three years with literally not changes is pretty stable in the fronted world.

The known bugs are not a huge blocker for most people.

Even if a new version with breaking changes would arrive tomorrow you could still keep using the version of Elm that worked fine for years. Really no issue.

https://www.roc-lang.org/ looks very interesting, it's from Richard Feldman who's done a ton to promote Elm over the years and also happens to work at NoRedInk.

> quality-of-life improvements inspired by dynamic languages (always being able to run your program even if there are compile errors, automatic serialization and deserialization using schemas determined by type inference, reliable hot code loading that's always enabled and requires no configuration to set up, etc.)

They get it! Especially the being able to run your program even with compile errors part. Looking at you Golang and Zig with your unused variable errors. Let me do my prototyping!

And yeah, Richard Feldman is awesome. Roc is sure worth keeping an eye on.

> Elm is stagnant. There's been no release since October 2019. It's a problem because there are known bugs.

There are. I have never encountered them in my life but yeah there are. Fork it if they're really holding you back

> Elm is also unstable; there's no guarantee Evan won't break things in the next release.

I'm showing my privilege as someone who started with elm with 0.19 after all the big emergent patterns had emerged, but here goes: the FFI workaround that was broken from 18 to 19 was telegraphed for years. Earliest mention about it being disfavored I can find is from 2015 [1]. Conversely with 0.19.1 we get "If you like what you see now, that's pretty much what Elm is going to be for a while." [2] Ports and Custom elements make it such a non-issue to interact with JS while keeping your state in elm that it's just never held me back shrug.

> It's a bad combination. A fork could in theory fix this. Has anyone done it, though?

Gren, Derw, and eventually Roc compiled to JS/WASM could all do it I guess. Remains to be seen, but it's a very exciting space right now. It's a bit like The Velvet Underground: they only sold 20k records, but everyone who bought a copy started a band (or so the saying goes).

[1] https://groups.google.com/g/elm-dev/c/1JW6wknkDIo/m/H9ZnS71B... [2] https://github.com/elm/compiler/blob/master/roadmap.md

Nope, because anyone forking would have to come up with new name and run their own community.

If you are building an SPA then there is always Mint[1] (it's an Elm like language).

  [1]: https://github.com/mint-lang/mint

> It's easy to train non-programmers to use Elm. (If you can solve Sudoku you can learn to program.)

Training developers is expensive. The less experience they have, the more expensive it is (generally).

> Elm is simple, write your own compiler.

The economic argument against this is it isn't easy (expensive) to write and maintain your own compiler.

It really depends on the app. There is a lot of functionality that is cumbersome to use with Elm, i.e. everything requiring Ports. Additionally, if your app depends on some functionality that is not yet available in Elm, you‘ll have to solve a hard problem not related to your app, before actually developing your app.

You can also encapsulate things into web components, then use them in Elm.

https://elmprogramming.com/interacting-with-web-components.h...

elm doesn’t have anything like unsafe blocks or much of an FFI. It has ports, which make integration with many libraries rather cumbersome. The elm philosophy seems to be to rewrite everything in Elm, and to disincentivize binding.

once you write a custom element you'll never go back to ports if you can help it. So ezpz. You can keep your state entirely in Elm with no issues.

> The elm philosophy seems to be to rewrite everything in Elm, and to disincentivize binding.

Or to use web components https://elmprogramming.com/interacting-with-web-components.h...

> That's a technician not a programmer.

If a technician can handle a job, why would I hire a programmer?

That's a good point. I like to point out that secretaries were programming Emacs in Lisp back in the day:

> programming new editing commands was so convenient that even the secretaries in his [Bernie Greenberg] office started learning how to use it. They used a manual someone had written which showed how to extend Emacs, but didn't say it was a programming. So the secretaries, who believed they couldn't do programming, weren't scared off. They read the manual, discovered they could do useful things and they learned to program.

https://www.gnu.org/gnu/rms-lisp.html

Our (programmers) whole business model is predicated on the normies not realizing they don't really need us.

From that POV the JS ecosystems and all their churn are a form of job security. I feel like it's kind of a scam, a Potemkin village of complexity to hide the fact that computer programming just isn't that hard, and most needful software is already written.

(Excel is the most successful programming language and IDE in the world, eh?)

I present to you an alternative https://safe-stack.github.io/

You trade in some purity for practicality. Elmish on the front end is really nice. You get F# on the back end. Fable remoting makes RPC front end to back end really easy. The docs are amazing https://zaid-ajaj.github.io/the-elmish-book/#/.

You get access to the .Net ecosystem so it enterprise ready.

If you want me to believe Elm is better where is the meta analysis of dozens of research papers showing Elm produces similar or better quality results for a lower cost than JS.

Instead all I got is "Trust me, it works", just like all the other snake oil salesmen on the street.

> 3) Evan is mean. > I do not care.

Is this not a valid objection? Surely there is a non-trivial economic cost associated with have a dickhead maintaining a critical part of your stack, who's willing to remove support you rely on at his whim.

> Elm is simple, write your own compiler.

... that is a significant economic cost; which if you have a non-trivial probability of having to do, drastically shifts the cost/benefit analysis in favour of JS.

FWIW those are a bit tongue-in-cheek. For one thing, Evan is actually really really nice and civil, from all I've seen of him.

I'm looking to work on implementing a simple hex-based puzzle game I used to play a lot as a web app so I recently tried to do some investigating of what libraries might exist out there for this

I landed on Elm and the library that convinced me was seeing this demo for the elm library so seamlessly use SVGs:

https://www.danneu.com/elm-hex-grid/

So, how's the state of Elm?

I am familiar with all the social media drama on Elm - are serious things missing, or is it possible to write competitive software (you may define that as you wish) and using the web elements FFI, if things are missing?

Vendr uses Elm as its main front-end tech. It's valued 1B I hear.

https://elm-radio.com/episode/elm-at-a-billion-dollar-compan...

PS: they are hiring Elm developers https://www.vendr.com/job?gh_jid=4539989004

"Elm is dead"

https://iselmdead.info/

IMHO prefix commas is fixing one mistake with another mistake. Enforce trailing commas.

Do you have a good reason for enforcing trailing commas vs leading?

Leading is necessary to minimize diffs when you don't support trailing commas:

    Prelude> [1,]

    <interactive>:4:4: error: parse error on input ‘]’
    Prelude> [1]
    [1]

This means if you go multiline in the "usual" style:

any time you need to append a new item, you need to modify the existing last line as well:

Meanwhile:

If you support trailing commas, you can just use one on the last line for the same effect:

Incidentally, some crazy people put the closing symbol on the last line:

    [ 1
    , 2
    , 3 ]

That completely defeats the point:

     [ 1
     , 2
    -, 3 ]
    +, 3
    +, 4 ]

Do many/most feel this way? I always felt this argument was the diff tail wagging the code readability dog, so to speak

It does feel like a misplaced priority.

It's very important to me. I don't feel readability is impacted by having commas before or after. As long as it's consistent.

I did prefix my opinion with "IMHO". But no. Leading commas are, in my opinion, less common in life and a distracting, surprising style for the sake of fixing a syntactic language mistake. "Enforce" might have been an overly demanding word. Enforcing when there's a newline is probably more apt or simply allowing it to prevent giving leading comma folks ammunition.

something like `[hello, world]` should probably be allowed since `[hello, world,]` feels extraneous.

Precisely, or even find a way not to require commas.

I don't think we've seen a language that is explicitly designed to be as ergonomic / accommodating as possible to developers.

Something that is the good protocol truism equivalent of "be liberal in accepted input and strict produced output".

Granted that flies in the face of another programming language design best practice of having 1 way to do a particular thing.

> Precisely, or even find a way not to require commas.

Here it is: https://news.ycombinator.com/item?id=33457176

I absolutely love prefixing commas. Super readable and good for diffs.

Sure trailing commas also solve the same problems but you need language level support for them. Plus they add one additional character compared to the prefix solution.

I wish I could use prefix comma formatting in other languages but not chance to convince coworkers to use that not to mention getting code formatting support.

Why would you think they are a "mistake"? What is your hang-up?

The only solution to this war is no commas!

To roughly translate the first example in the article (I shortened the value of `d`):

  svg [ 
    x=[0px]
    y=[0px]
    viewBox=[0 0 21 21]

    path [
      fill=[#FFF]
      stroke=[#146AFF]
      strokeWidth=[2]
      d=[M11.1,1.4l2.4,...]
    ]
  ]

You can remove all whitespace and it's still unambiguous.

It's a perfectly viable lightweight syntax for SVG.

Another example would be Lisp. And yeah generally, fair point.

In Elm though it would cause some ambiguity because of the function call syntax not requiring parentheses. For example:

    [foo bar baz]

Is this a List with three elements or is it one element whose value is a function call on foo with the arguments bar and baz? Who knows. Sure you could have implicit commas on line break but that would be weird.

Yes, in Elm or Lisp this would be problematic.

In this syntax though it isn't. Anything between brackets like this:

  [foo bar baz]

that does not contain any nested brackets is a simple tree which contains "foo bar baz" as its sole value (called a suffix).

In this syntax whitespace is not a separator.

So you can store a single piece of text in such a simple tree.

Now if you want to have 3 pieces of text you do this:

  [foo][bar][baz]

3 simple trees together -- they are subtrees of a top-level tree.

If you want to have 3 of these you do this:

  [[foo][bar][baz]]
  [[foo][bar][baz]]
  [[foo][bar][baz]]

The linebreaks don't change the tree structure, they are inserted purely for readability.

There are no implicit commas or anything.

Each subtree is also potentially a name-value pair. If you insert names before the opening brackets:

  [x [foo] y [bar] z [baz]]

You have 3 pairs.

The names themselves are also pieces of text (whitespace is not a separator), so you can have names like:

  [my x [foo] your y [bar] their z [baz]]

Still 3 pairs.

Now to turn trees like this into something useful, for example XML/SVG, you'd do a little bit of processing on them, e.g. you could transform the names like so:

  my x [foo] your y [bar] their z [baz]

into:

  <myX>foo</myX><yourY>bar</yourY><theirZ>bar</theirZ>

in this manner you could transform:

  svg [x=[0px] y=[0px] view box=[0 0 21 21] path [
    fill=[#FFF] stroke=[#146AFF] stroke width=[2] d=[M11.1,1.4l2.4,...]
  ]]

into:

  <svg x="0px" y="0px" viewBox="0 0 21 21"><path
    fill="#FFF" stroke="#146AFF" strokeWidth="2" d="M11.1,1.4l2.4,..."
  ></path></svg>

Notice that here I used a convention where names which end with "=" become XML attributes, whereas names which don't become children.

I have used the same convention here (except I don't bother with transforming names with spaces into camelCase): https://github.com/jevko/specifications/blob/master/easyjevk... to generate this HTML file: https://htmlpreview.github.io/?https://github.com/jevko/spec...

Now I intend to write specifications that codify conventions like this into different formats based on this fundamental syntax of square brackets.

It can be useful for all kinds of things. Its advantage is extreme simplicity and flexibility.

BTW, for clarity I have to say that the format that I used here: https://news.ycombinator.com/item?id=32995047 does a bit more transformations -- it actually sometimes treats whitespace as a separator (e.g. in `svg width[391]` space is a separator). That allows for extreme conciseness, but is not necessary and introduces complexity.

They're a mistake because correcting the language level issue with trailing commas to fix diffs was the correct solution. Instead everyone had to convince themselves that they prefer leading commas, which is not how commas are used, over whitespace. Have you ever considered maybe your coworkers are right?

> which is not how commas are used

How is that an argument? "I am right because I am right?"

Look around you and have some awareness. https://en.wikipedia.org/wiki/Comma there ya go. Do you see a whole lot of uses with it prefixing things? This is the common way that commas are used in grammar and also in programming languages. I'm not sure why everything has to be an argument, but that's it. It's ugly and I don't like it - find solace in letting me lament without having to reach consensus with your uncommon preferences.

Once I used a really REALLY good formatter like prettier for JS or elm-format for elm I got it. I realized that I don't care about the format, I care to see the jump from unformatted to formatted that means what I wrote is valid syntax. The leading commas (a convention but not actually necessary for elm) make diffs easy and make lists a bit easier to read. The syntax is almost the same in Haskell, but Ormolu puts the commas at the end and somehow it's harder to pick apart complicated list entries. Can't really explain why.

Reply on news.ycombinator.com