This is a meta-guide pointing to other resources for the various aspects of the web platform in Elm 0.18. If you're looking for a walkthrough of the language, I recommend checking out the official guide.
For most of these, some parts of the platform can be worked with directly in Elm and some parts fall back to using JS and ports. Check out the roadmap document for the future of the web platform in Elm.
Use the Http library. See the official guide tutorial on http and this http demo on Ellie.
For user mouse and keyboard movement in a particular form element or piece of DOM, use the HTML event handlers. To listen to events globally (such as setting up site-wide keyboard shortcuts), you can subscribe to global keyboard events and mouse events via their respective packages.
You will need to use ports. See the roadmap document explaining more about what's in the pipeline for local storage.
Programs can be made URL-aware using the Navigation package. The package also
allows for manipulating both history and window.location
.
Some aspects of audio and video can be controlled using custom custom event handlers and properties. For other aspects you'll need to use ports.
See an example of what can be done in pure Elm in this video demo Ellie.
File uploads must currently be handled in JS via ports. Downloads (from a server) can be triggered by a link that sets the HTML download attribute.
The window package provides functions to query or subscribe to a window's size. It does not allow changing of the window's size. That must be done via JS and ports.
Since event.target
is a DOM node, you can do some clever things with
custom event handlers and decoders to read properties from it. To execute
methods against the DOM or to read properties outside the context of an event,
you'll need to use ports.
Not all visual representations of our model need to be done via HTML. Elm also supports svg, canvas, and webgl. These can all be embedded into regular HTML Elm views. Common uses for these include data visualizations and games.
If you're building a game, check out the #gamedev
channel on the Elm Slack.