Chapter 5. Talking to JavaScript

 

This chapter covers

  • Rendering custom elements
  • Sending data to JavaScript
  • Receiving data from JavaScript
  • Initializing our Elm application by using data from JavaScript

Now we’ve gotten Photo Groove loading photos from a server. It’s looking better and better! However, our manager has a concern: “We have the photos, and they certainly look sharp. But where is the groove? This is Photo Groove, not Photo Browse! You know what we need? Filters. You know, the kind that make normal photos look all wacky and messed up? Those!”

Sounds groovy.

We collaborate with our team’s visual designer to create a mockup of the filtering feature. The final design calls for a display to report on the current activity of the filtering process, and sliders to control the filters’ settings. And not just any sliders! Our designer wants these to match the look and feel of some sliders we’re using on a different product.

As luck would have it, we won’t have to code either the filter effects or the sliders from scratch. They’re both available as open source libraries, but there’s a catch: these libraries are written in JavaScript, not Elm.

5.1. Using custom elements

5.2. Sending data to JavaScript

5.3. Receiving data from JavaScript

Summary