Girls and boys,
I’ve just released v0.3.0 of Drab - the addition to Phoenix to live control of browser’s User Interface from Elixir, from the server-side. This version comes with few API changes, new features and many bug fixes.

Waiters

First at all, 0.3.0 introduces Drab Waiter: the functionality which allows you to wait for the user input. That could be useful, when - for example - you made a changes in the database, and want to ask the user what to do: rollback or commit? (forgive the pseudocode, it’s just an example).

Database.sql(conn, "UPDATE users SET password='';")
waiter(socket) do
  on "#commit_button", "click", fn (sender) ->
    Database.commit(conn)
  end
  on "#rollback_button", "click", fn (sender) ->
    Database.rollback(conn)
  end
  on_timeout 5000, fn -> 
    Database.rollback(conn)
  end
end

This function will stop processing until user press one of the buttons - or until timeout.

Drab.Query.select API changed

The second major change is the Drab.Query.select API. Before, select(:html, from: "p") returned a list of all htmls found on this selector. Now, there are two versions of each jQuery method: singular and plural. Singular behaves exactly like jQuery, returning the value of the first found DOM object. It is an exact equevalent of running $("p").html() in the browser.

Drab 0.3.0 introduces plural version of methods. They return all found DOM object values. In the same example, you may use select(:htmls, from: "p") to get all “p” elements from the DOM tree and return the value of jQuery .html() method, executed on every single object.

Plural versions of the methods return a Map of %{name|id|__undefined_[number] => value}. Keys of the map are created of DOM object’s attributes: first name or, if not found: id or, if both id and name not found, system will construct a special key with incremental number. Let’s check it on example:

### <span name="first_span" class="qs_2 small-border">First span with class qs_2</span>
### <span id="second_span" class="qs_2 small-border">Second span with class qs_2</span>
socket |> select(:html, from: ".qs_2")
# "First span with class qs_2"
socket |> select(:htmls, from: ".qs_2")
# %{"first_span" => "First span with class qs_2", "second_span" => "Second span with class qs_2"}

Callbacks

Drab is now equipped with callbacks to be used in the Commander: before_handler and after_handler. Usage is quite obvious, it is only worth to mention that before_handler must return truly value (everything except false and nil). Otherwise, the proceeding event handler will never be processed (handy for checking the authorization etc). By the other hand, after_handler is launched every time after handler function finish, and it receives the handler function return value as an argument.

More

Please check the release notes for more details.

Plans for the future

Unfortunately, the TODO list is rather growing than shrinking. In the following weeks I would like to concentrate on building the test environment. After this, I’d like to completely refactor Drab.Query and Drab.Template.

Feedback

Any feedback is strongly welcome! Most of the suggestion of users in this forum are included in this release of Drab.

One more thing: only Elixir/Phoenix can make it possible!

StartCom is utterly horrible horrible horrible, never use them!

For SSL there is no reason not to be using Let’s Encrypt.

Girls and boys,
there is a new release of Drab: 0.3.2. Finally, I’ve made tests for all Drab features. Because of how Drab works, mosts of the tests must be end-to-end (integration). I’ve decided to use Hound and chromedriver.

In addition, there is a build-in Phoenix server. Now to play with Drab in IEx, you don’t need to create your own Phoenix application and add drab to it, anymore. You can just clone the github repo and run the server on it:

git clone git@github.com:grych/drab.git
cd drab
mix deps.get
npm install && node_modules/brunch/bin/brunch build
iex -S mix phoenix.server

Open the browser, navigate to http://localhost:4000 and follow the instruction in IEX:

import Drab.Core; import Drab.Query; import Drab.Modal; import Drab.Waiter
socket = GenServer.call(pid("0.xxxxx.0"), :get_socket)

Now you can remote control the browser from IEx:

iex(5)> socket |> alert("Title", "WOW!")                                          
{:ok, %{}}
iex(6)> socket |> select(:text, from: "h3")
"Drab Tests"
iex(7)> socket |> update(:text, set: "It is set from IEx, wow!", on: "h3")  
%Phoenix.Socket{assigns: %{__action: :index, .........

And, last but not least, Drab has the own logo