Lisplog

Why Elm?

Submitted by Bill St. Clair on Fri, 19 Jul 2019 10:28:57 GMT

An AngularJS user in the Fediverse asked me to sell Elm to him. This is my first attempt.

I have never used AngularJS or any other JS framework besides jQuery, so I'm operating from a quick perusal of the Angular web site, making my comparisons mostly invalid.

Caveats

First off, you're going to miss a lot of Angular's features with Elm. Elm has a functional flavor to it, not the templatey feel of Angular. Your entire site, except for the initial HTML file that loads the elm-generated JS, is Elm. And Elm wants total control. With a couple of exceptions:

1. You may load Elm into only a single DIV of your larger site, and use regular HTML/JS for the rest of it. This, so I've read, can enable incremental conversion to Elm, but I've never done it.
2. Elm supports two ways to get to your own JavaScript code:
   1. Ports - a send/receive messaging mechanism to get JS data out of and back into Elm. Fully type-safe, since incoming JS data goes through decoders to bring it into Elm, and errors there must be handled by the functional Elm code.
   2. Custom HTML Elements - Since Elm's virtual DOM can support ANY HTML element, you can roll your own, to do anything you can dream up.

Elm's package manager is centered on open source, stored at GitHub. I've proposed a simple mechanism to open this up, so that you can easily define your own package plugins, or not use Microsoft's repository system, but Evan Czaplicki, Elm's creator, has not been open to the idea.

A normal way around this for organizations that need their code to be proprietary is a mono-repo for your code, and just include ths whole thing in every project. Elm's compiler is so fast, and so good at rebuilding only what needs to be rebuilt, and including in the output only what is actually used, that this isn't as bad a solution as it sounds.

Or, if you have Haskell chops, you could fork the Elm source, and add the package manager plugin yourself.

Advantages

Now that I've highlighted some caveats, on to Elm's advantages.

No run-time errors. Ever. If it compiles, the JS generated by the Elm compiler will contain logic errors that you need to find and fix, but it will NEVER mistakenly reference a null value or call an undefined function. This is remarkable to experience, for one accustomed to the runtime-error-prone JS environment. And it really works.

The same kind of type-checking that C programmers have had for decades, but without the necessity to say everything twice, and with a much friendlier compiler, and no way to get around the type safety (except in your own custom JS, as mentioned above). JS linters may give you a lot of this, but they don't do a complete job. The Elm compiler does.

As a long-time lisper, accustomed to run-time type checking, but compile-time laxity, I was surprised to find that I really like this. It takes a little longer to get your code to compile, but once you do, you know it won't fail because of a runtime error.

Refactorings, even large refactorings, are a joy, and usually "just work" once you get the refactored code to compile. In Elm, I'm not afraid to make radical changes to pieces of my code. This causes a large list of compiler errors early in the process, but you fix them one at a time until it builds, and then it usually works.

The generated JavaScript is not difficult to read, and is pretty good, performant code. You definitely lost a little in efficiency over hand-coded JS, but you can always move inner loops into ports if necessary, and it is rarely necessary.

Elm webapps behave pretty much like native apps. With all the JS frameworks available, this isn't as much of a sell as it used to be.

Conclusion

I wish I knew how to express my sheer joy when I program in Elm. If I had Shakespeare's skill, I'd write a sonnet. "Shall I compare thee to a summer's day?"

1 comment   Edit post   Add post

ZAP Meme

Submitted by Bill St. Clair on Thu, 18 Apr 2019 05:25:32 GMT

https://zapmeme.com is a meme maker written in Elm.

It's open source, with a link at the bottom of the page. It uses <svg> to layout the meme, and converts to JPEG or PNG for saving.

It stores meme and images (as data:// URLs) in your browser's localStorage database. They may be exported as JSON and imported into another browser.

Add comment   Edit post   Add post

Image Sizing in elm-ui

Submitted by Bill St. Clair on Thu, 06 Dec 2018 03:53:36 GMT

I've been using Matthew Griffith's wonderful elm-ui package to make the user interface for GabDecker, a TweetDeck-like web app I'm building for Gab.com. I've had inline images since the beginning, scaled to fit the column width. Today I made clicking on one of those image open a dialog with the full-size version, scaled down if necessary to fit the available space.

elm-ui eschews CSS in the source code, usually making it much easier to get what you want. But in this case, I was NOT getting what I wanted, so I wrote my own CSS, and learned about the object-fit property in the process.

Here's the code that's now running:

imageDialog : String -> Model -> Element Msg
imageDialog url model =
    let
        maxw =
            9 * model.windowWidth // 10

        maxws =
            String.fromInt maxw ++ "px"

        maxh =
            9 * model.windowHeight // 10

        maxhs =
            String.fromInt (9 * model.windowHeight // 10) ++ "px"
    in
    column
        -- This is black magic.
        -- It took much play with the CSS to get it right.
        [ centerX
        , centerY
        ]
        [ standardButton "" CloseDialog <|
            (Html.img
                [ Attributes.style "object-fit" "contain"
                , Attributes.style "max-width" maxws
                , Attributes.style "max-height" maxhs
                , Attributes.style "border" "2px solid black"
                , Attributes.style "width" "auto"
                , Attributes.style "height" "auto"
                , Attributes.src url
                ]
                []
                |> Element.html
            )
        ]

Add comment   Edit post   Add post

How do I run elm-test in Elm 0.19?

Submitted by Bill St. Clair on Mon, 17 Sep 2018 00:24:33 GMT

This is a FAQ, so I'm making a blog post to answer it.

elm-test is still in beta for Elm 0.19. To install it:

$ npm install -g elm-test@beta

The tests directory no longer needs an elm-package.json file (nor does it need elm.json).

Your top-level elm.json file needs to include the following:

    "test-dependencies": {
        "elm-explorations/test": "1.0.0 <= v < 2.0.0"
    }

The easiest way to get it there is with elm-test itself. The following will create a tests directory, containing an example test file, Example.elm, and will add test-dependencies to elm.json.

$ elm-test init

That's it. There is not yet support for running elm-test in the browser, nor is there support for testing DOM output.

billstclair/elm-localstorage is configured with a tests directory to test its JSON encoders and decoders: github.com/billstclair/elm-localstorage. To run the tests:

$ git clone git@github.com:billstclair/elm-localstorage.git
$ cd elm-localstorage
$ elm-test

Add comment   Edit post   Add post

iPhone Xs Pricing

Submitted by Bill St. Clair on Wed, 12 Sep 2018 19:22:55 GMT

From the www.apple.com/iphone pages.

Watch the 12 September keynote.

Prices (in parentheses) are per month for Apple financing.

Add comment   Edit post   Add post