grych

Creator of Drab

Drab: remote controlled frontend framework for Phoenix

Hi folks,
Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixir (here). Finally, first beta has been released!

Source and installation instruction: GitHub - grych/drab: Remote controlled frontend framework for Phoenix. · GitHub
Home page: Drab: Server Side User Interface Access - with live examples
Documentation with more examples: https://tg.pl/drab/docs

And of course it is available as a hex package.

In the meantime I’ve changed the API, so it is - I believe - easier to remember. If you think about webpage as a database which contains DOM objects, it is natural to query:

select(:text, from: "p:first") to get text of the first paragraph or
select(attr: :href, from: "a") for all links in the document,
update some object(s) with
update(css: :border, set: "3px solid red", on: this(sender)),
add new nodes or attributes
insert("<b>IMPORTANT</b>", before: "p:first"),
or remove something with
delete(class: "btn", from: "#the_button"),
and more, like synchronous modal which - launched on the server side - waits for user input.

Any suggestions, criticism, ideas welcome!

–
Grych

488 comments

/phoenix #web-frameworks #library #frontend #javascript #drab

64 54579 488

2020-01-31 18:52:13 UTC

First 10 of 488 Posts!

Qqwy

TypeCheck Core Team

Do I understand it well if I say that this allows you to basically ‘remote control’ what a user sees on their webpage?

This is very interesting, as I feel myself writing similar javascript over and over again to manage these kinds of tasks.

If this would be combined with a JS library managing a virtual DOM, we might even be able to write nearly all browser-UI management on the server, FRP-style!

awesome stuff!

Post #1

grych

Creator of Drab

Yes, it does exactly this. You can manipulate the user interface in the real-time, from Elixir/Phoenix.

–
Grych

Post #2

Eiji

Good job! It’s awesome for all projects that do not care about support as many connections as possible as fast as possible
What do you think about shourtcut method to toggle actions (delete or insert something or update with keep prevoous value)?

Post #3

Qqwy

TypeCheck Core Team

I foresee a wonderful symbiosis between Drab and GenFRP …

Post #4

grych

Creator of Drab

Yes, this is a good idea, thanks! We can extend update/3 function like:

update(:val, set: ["View mode", "Edit mode"], on: "#button")
update(:css, set: ["border: none", "border: 1px solid red"], on: "#button")

So in case when value to set is a list, it toggles between the array values (and it doesn’t have to be only 2 values: we can cycle!)

Post #5

grych

Creator of Drab

Interesting, thanks for sharing the idea!

Post #6

Eiji

Nice! Your API looks great. I want to see something like this in pure JavaScript.

You could add also shortcut for data- attributes:

update(socket, data: "something", set: "width: 100%", on: ".progress-bar")
# instead of:
update(socket, attr: "data-something", set: "width: 100%", on: ".progress-bar")

and allow to fetch dataset like:

select(socket, :dataset, from: "#name")

You can also move h3 outside ul at bottom of your home page

Post #7

grych

Creator of Drab

Thanks! I’ll add it to my todo list!.

Post #8

OvermindDL1

This looks fascinating and could simplify code! A question though, how does it work with a shadow DOM (which makes custom elements internal parts invisible to normal DOM methods) as the site I work on is almost entirely Shadow Dom (which is faked on Firefox and such but a real shadow DOM on Chrome)?

Post #9