Proof-of-concept app using Drab
Drab is an interesting Phoenix library that allows you to move front-end logic to the server side. In this spike app, I used Drab to trigger animations from the backend and experimented with how network latency affects the user experience. All the UI updates you see here come from page_commander.ex
:
Deploying the app to a distant server did degrade the UX as animations that are supposed to fire simultaneously now get out of sync etc. Clearly, server-triggered UI events shouldn't be used when timing is critical as the more latency there is, the more sluggish your app feels. So yes, we're still stuck with front-end tools where that instantaneous feel is required. But there's plenty of other use cases where Drab seems to shine and I'd definitely prefer Drab to the more traditional ajax calls or polling the backend for changes with long-running processes.
To see the spike app in action, you can deploy it to Heroku by clicking the button below.
For some inspiration on how you could benefit from Drab in your next project, check out the official demo page.
- Phoenix 1.3.0 or later
- Elixir 1.5 or later
- Erlang 20 or later
To start your Phoenix server:
- Install dependencies with
mix deps.get
- Create and migrate your database with
mix ecto.create && mix ecto.migrate
- Install Node.js dependencies with
cd assets && npm install
- Start Phoenix endpoint with
mix s
Now you can visit localhost:4000
from your browser.
See LICENSE.