Ed/29 may 17

[eellson]

https://www.dropbox.com/s/rvyc1vmurfnykn1/githubprofiler480.mov?dl=0

My solution here is kind of involved, so hear me out:

The TLDR is:

• Elm application which renders search field
• Phoenix application which sets up a websocket connection for Elm to send/listen on.

The flow of data through the app looks roughly like so:

• User loads page
• Elm renders search field, joins and listens on "typeahead:public" websocket channel
• User types into field
• Elm updates model with latest query on any changes to field, sending query across websocket to server.
• Phoenix receives every value the input is set to, but we don't want to send all of these to Github (we will quickly use up our allowance). We use GenStage to handle sending these less frequently:
  • When a client connect to the websocket, we setup GenStage linked to their connection.
  • QueryProducer is updated to hold the latest query whenever we receive one through the socket
  • QueryProducerConsumer then asks the consumer for the query, with configurable max_demand and interval. We use this to make sure we only ask for the query once per second.
  • QueryConsumer grabs these queries as they come through, calling out to github, and sending the response back over the socket.
• We've used the Github graphql api for this, which is cool because we get a higher effective rate limit for this query, and specify only the fields we want returned.
• When Elm receives results across the socket, we decode them, update the model with our results, and this triggers the view to re-render.

Perhaps I cheated with the rendering of the user, but all the info you wanted is displayed in the typeahead anyway ;)

Good luck finding a cooler stack than this in the near future:

• Elm
• Elixir
• Websockets
• GenStage
• GraphQL