Hi guys,
nowadays building the web-based application (more complicated then the rails scaffolds) is in real building two apps: client side and server side. And even if you are a master of AJAX and JS, there are still some inconveniences, like providing a feedback to the browser on some events, which occurs on the server: long running process or task finished, or wants to communicate to the browser with message “hey! I finished 30%!”. Normally, you need to pull every few seconds to provide the update. Baaad.
There were a few attempts to unify server and client side, like Nagare or Volt Framework. I really liked this, so why don’t we add something like this to Phoenix? Phoenix/Elixir is a dream machine. Let’s give it some more possibilities
Back to the topic: Drab is the idea of manipulating client-side DOM objects on the server side. It is providing jQuery-like functions directly to the Elixir. Look at the code below - after each step of some process the server updates DOM object on the client side. No need to poll every few seconds to update the process status.
def perform_long_process(socket, dom_sender) do
steps = MyLongProcess.number_of_steps()
for i <- 1..steps do
MyLongProcess.perform_step(i)
# update the progress bar after each of MyLongProcess steps
socket
|> attr(".progress-bar", "style", "width: #{i * 100 / steps}%")
|> html(".progress-bar", "#{Float.round(i * 100 / steps, 2)}%")
end
end
Last, but not least, this approach could eliminate JS as well. Please don’t get me wrong, I am not an enemy of JS - but wouldn’t it be much easier when you can, for example, disable the button, run long database update and re-enable the button after finish, in the one place? Also it could be killer feature for the new programmers, which are lost in the Ajax and JS world…
There is a not a long way from the idea to the code, so I’ve developed the proof-of-concept page. It contains few working examples with the code samples, and of course it is running on Phoenix+Drab.
Please treat it like a proof-of-concept only. It still supports only a few events and only a few jQuery functions. But if anyone wants to try it yourself, there is a source code on Github with the installation instruction. Installation is not very straight forward yet, please forgive me. Additionally you can find the sources of the proof-of-concept page and the example project - ready-to-go project with Phoenix and Drab already installed, to be used as a sandbox.
Please give me a feedback: what do you think about this idea? Is it worth developing, or the ol’ good AJAX is good enough for everyone and websockets are only for chats?
–
Grych