[019.5] Elm Weekly Drip #19 and Exercise: Webpack Hot Module Replacement

An exercise to add webpack hot module reloading; also: bugs, matrices, json, games.

Subscribe now

Some links, and a call to try out getting hot module replacement support in your Elm apps with webpack. Links cover: applicatives and json; building a game with tests, maybes, and flat matrices; and a bunch of stuff about a tiny bug.

Elm Applicatives and JSON Decoders by Kyle Kress is a discussion of why Elm's JSON Decoders are both gnarly and awesome. It's also got a great demonstration that he builds up to, which is a Pokemon Browser | PokemonViewer.elm.

[ from @toastal ]

Here's a video of Aaron VonderHaer building a Lights Out game with unit tests, Maybes, and elm-flat-matrix.

[ from @avh4 ]

Ports do not register immediate send is fixed! This was a bug that a lot of people experienced with Elm - if you sent a message to a port in the same loop as the initialization, it got dropped. There was an easy workaround but it was a bug and it bit people! The thread on this issue is really fun to read and leads you to read the code for Elm's scheduler.

[ from @knewter ] (hey that's me!)

Leroy did some of the initial debugging that made it clear what was happening in the bug above! :) He implied he would be interested in writing up a blog post about the Elm scheduler as a result of his digging in, but I don't think he's done it yet. I think he's awesome for the work he did on the bug and deserved to be called out. I'm not sure if it's an honor, but if you want to pile onto this tweet and tell him how cool it would be if he wrote a blog post about the Elm scheduler I wouldn't think it was awful :)

[ cheers @artisonian ]

Here's the actual bugfix which is in itself a fascinating read. [ from @yjkogan and @luke_dot_js ]


This week we finished our time looking at individual components in elm-mdl. Something we noticed while working through things was that, since in our app we required a login at the beginning, every time we wanted to see how a change worked out we had to get back to the application state that would show us what we cared about. This is tedious, and we can do better.

For this week's exercise, try to implement webpack hot module replacement in a project you'd like to develop on a bit faster. There are a few paths to this, including 'starter packs' that do it all for you. I think you're better off using small composable pieces though, so try to roll it from scratch , probably using rtfeldman/elm-webpack-loader and fluxxu/elm-hot-loader.

Published on 08.20.2016