Misc Blog

Summary of: ElixirConf 2023 - Chris McCord - Phoenix Field Notes

Summary of: ElixirConf 2023 - Chris McCord - Phoenix Field Notes - Longpolling as a backup for websockets - New data structure: Scope - DNS Cluster - help with distributed elixir - Distributed elixir is awesome - Easily find your HEEX components from the DOM - Can <option>-click anything in the browser and it takes you to the code in VSCode - Server logs in the client console - assign_async + <.async_result> - UploadWriter

Name
Nicolas
Twitter
@nicolashoban

7 months ago

If you haven’t yet seen Chris’s talk you can catch it on the link below:

https://www.youtube.com/watch?v=Ckgl9KO4E4M&ab_channel=ElixirConf

In any case, we thought we’d provide a summary of the important points we came across.

Longpolling as a backup for websockets

  • 2% of visitor websockets connections fail at http://fly.io
  • needed a backup - long polling to the rescue - will be a first class citizen. one line addition to config

Longpolling as a backup for websockets

New data structure: Scope

  • prod apps often need rich info about the current user/client, eg IP address and user agent, and passing this information along becomes a pain as the system grows.
  • Phoenix will now provide a data structure for this that can easily be passed down eg:

New data structure: Scope

DNS Cluster - help with distributed elixir

  • not many elixir apps are distributed (despite it being easy to do)
  • new lib: dns_cluster: only requires a single line of configuration and uses Erlang’s standard lib without any external deps
  • Chris says “avoid using Redis!”

DNS Cluster - help with distributed elixir

Distributed elixir is awesome

  • any process can talk to any other process in a cluster
  • long polling makes use of this:
    • poll 1 - server starts process - PID passed to client
    • poll 2 - okay if hits another server, just use PID to msg the original process started on poll 1

Easily find your HEEX components from the DOM

  • can toggle comments in the DOM that tell you which HEEX component rendered the HTML

Easily find your HEEX components from the DOM

Can <option>-click anything in the browser and it takes you to the code in VSCode

Can <option>-click anything in the browser and it takes you to the code in VSCode

Server logs in the client console

Server logs in the client console

assign_async + <.async_result>

  • live view async is harder than it looks
  • this solves all the problems elegantly

assign_async + <.async_result>

UploadWriter

  • what if you don’t want to store an upload to disk, but just pass it to another API?
  • UploadWriter allows you to upload the file in chunks, just 64kb in memory at a time - never touching disk
  • achievable in under 100 LOC
The end

More posts