New example: Subscriptions

[newswim]

In #12, @nelsonic asked if someone would be willing to add a websockets example.

Since Subscriptions can be bound to an always-on connection, maybe we should come on with a code example that uses Subscriptions with WebSockets.. ❓

In his blog post, "Farewell To FRP", the author (of Elm) states that signals were a major hurdle for newcomers. As of 0.17, Signals are out, and a more generic form of subscribing to events is in. 💯

Subscriptions let components sit around and wait for messages while library code handles a bunch of tricky resource management stuff behind the scenes.

In the end, it was possible to remove signals because Elm has been moving towards an explicit emphasis on concurrency for quite some time now.

Nota

= "upgrade plan" for 0.16 -> 0.17 = ports also work with subscriptions now!

Subscription Examples :

• One
• Two-hoo-hoo-hooo
• Three. 🦉

P.S. The API for Elm's WebSocket library is very minimal.

TL;DR

• [ ] Let's come up with an example using Subscriptions!!!

[newswim]

Fair warning, this is a speculative and very naive suggestion. If I have the time in the next few weeks, I'd like to tackle it, but I don't even know enough elm to know what I don't know yet.

[njsfield]

@newswim great suggestion! The examples so far demonstrate using Http beginnerProgram function, perhaps adding an example that uses the program function with subscriptions could work well if the effect subscribed to was a simple browser event. There is currently a subscription example that demonstrates ports with subscriptions, so this could perhaps help to build up to that.

The WebSocket subscription examples are cool, but the learner would need to have an understanding of what WebSockets are to contextualise whats going on. I created this chatroom example- but it requires a backend with a server using the ws npm module so is a bit too heavy.

How about an example using a browser event like Window resizing? This gist provides a nice example using an earlier package version of the Window package.

Or maybe an example based on this tutorial on using the Time package. This may be more suitable as Time is built into the latest core library (whereas the Window example is based on an older package to take advantage of the resizes function)

I'd like to tackle it, but I don't even know enough elm to know what I don't know yet.

Am happy to help if you’ve got an idea but have questions on unknown areas :thumbsup:

[newswim]

Hey @njsfield, thanks so much for the feedback and offer to help. I'm really keen on learning Elm in more depth, and this repo is where I always others who are learning.

I updated the space-invaders example to use 0.18, which also uses the Time package. But as you rightly point out, there is some familiarity with WebSockets and their protocol to really understand what subscriptions are doing behind the scenes. As an architectural decision, i think abstracting the wiring and giving users a first-class way of using and subscribing in real-time is great! I myself started learning web-development with Meteor, which does something similar, and has a nice fall-back plan if WS's aren't available.

I love the example using Window -- maybe we should write something brief explaining what WebSockets are? Here's the docs for Meteor's DDP package.