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

Welcome, my fellow alchemists! A couple of news from the Drab’s world.

The next future version, v0.6.0, is focused on Drab.Live (living assigns). Because of some bugs and limits, I decided to completely refactor it and for now, it looks really promiscuous (for now ;)).

First at all, Drab will not sourround <span> over expressions anymore, as it caused troubles in, for example, tables. Instead of this, it searches for the parent tag, injects some unique ID there and saves the innerHTML of this tag, in the cache, as a pattern.

Thus, if you have a template

<p>My name is Bond, <%= @first_name%>, Bond</p>

During the compile time, Drab’s engine injects some ID to <p>

<p drab-ampere=ovishfvoaidhfv>My name is Bond, <%= @first_name%>, Bond</p>

and saves the pattern to the internal DETS cache (it is a kind of the shadow html of the partial)

{"ovishfvoaidhfv", "My name is Bond, {{{{@drab-expr:fivdosifvoidfj}}}}, Bond"}

Thanks to this, when updating the assign @first_name, Drab re-renders the innerHTML of that <p> tag, injecting the new value of rendered expression to the pattern.

Second at all, Drab is going to be smarter while updating assigns. Consider the following:

<%= function(@assign1) do %>
    Some text, and other assign: <%= assign2 %>
<% end %>

In 0.5, updating @assign2 re-renders the whole expression. This is because @assign2 is one of the arguments of function/1, which is called as function(@assign, do: {:safe, ...@assign2...}).

That issue was found when having the living assign inside the form_for function. Updating the assign inside the form caused of re-render the whole stuff, including user’s input.

Third at all, the new code is smaller and faster (more floki, less regexp!). I’ve learned a lot while doing this.

API change proposal: HTML safe updates

Now all the updates in drab are raw. Doing

poke socket, text: "<b>bolded</b>"

or

insert_html(socket, "div", :beforebegin, "<b>bolded</b>")

updates the DOM without escaping the html. Of course there is an easy way to avoid this:

import Phoenix.HTML
insert_html(socket, "div", :beforebegin, ~E/"<b>MORE</b>"/)

but in my opinion it is not consistent with Phoenix, which uses safe htmls by default, enforcing developer to mark them as raw in case.

Shall I change Drab to render SAFE by default?

This must be changed in all innerHTTML updating functions. This will require to update all the existing applications.

But since Drab is the only beta 0.5 version, such change could be done without a big pain (sorry!).

Drab’s philosophy is to be as much compatible with Phoenix as it is possible. This is why I am quite convinced to make an effort to do it.

Please comment it out.

Drab v0.6.0 released

Please read release notes.

In this release Drab.Live is completely redesigned. It is not pushing <span> in every corner of your html, but it tries to find the parent tag and link to it.

Also, Shared Commanders are introduced. This allows you to create component-like modules.