Drab - Access the User Interface from the Server Side

A Page with Drab.Core only

By default, Drab uses DOM tree for accessing the User Interface, via Drab.Live or Drab.Element. But it is not a requirement! The only required module is Drab.Core, which contains basic communication functions to launch the javascript from the server side (exec_js and broadcast_js) and few more.
To enable/disable Drab Modules, use modules option in use Drab.Commander directive.

defmodule DrabPoc.JquerylessCommander do
  use Drab.Commander, modules: [] # only default Drab.Core
  onload: :page_loaded

  def page_loaded(socket) do
    socket |> exec_js("console.log('Alert from the other side!');")
  end

  defhandler clicked(socket, payload) do
    socket |> Drab.Browser.broadcast_console!("You've sent me this: #{payload |> inspect}")
  end
end
Module Drab.Core is always loaded. By default, modules [Drab.Query, Drab.Modal] are enabled. To disable them, use an empty list, like in the example above.

Module Drab.core also adds to the client side JS the basic method for launching the Elixir functions located in the Commander. This is Drab.exec_elixir(function_name, arguments_map):

<button onclick="Drab.exec_elixir('clicked', {click: 'clickety-click'});">
  onclick="Drab.exec_elixir('clicked', {click: 'clickety-click'})"
</button>

Here is the live example of this code (open JS console to see the result):

Back to Drab