Drab: remote controlled frontend framework for Phoenix

I’m very interested in this feature! For me, being able to associate drab commands to more granular pieces of the app than controllers.

P.S. Drab is very impressive, well done!

2 Likes

Drab looks great. Is it possible to send client-side event data, like onclick? I’m thinking of replacing a React/Redux app which has a lot of UI interactions. I’m not sure if Drab is a good fit, but I hate the complexity React and Redux bring.

I wrote a widget that lets you tag photos. To place the tag, I need to get mouse click coordinates from the event. For example:

function getEventLocation(event) {
	const rect = event.target.getBoundingClientRect()
	const x = ((event.clientX - (rect.left + 10)) / rect.width ) * 100
	const y = ((event.clientY - (rect.top  + 10)) / rect.height) * 100
	return { x, y }	
}

I’m not sure if Drab is suited for this type of thing. While I love how Redux and React work, in practice, I find the added complexity unpleasant. I love writing my templates in EEx.

It will going to appear in the next release.

3 Likes

Yes, Drab by default sends some sender object properties, including event. Check docs.

The event map contains choosen properties of event object:

  altKey, data, key, keyCode, metaKey, shiftKey, ctrlKey, type, which, 
  clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY
2 Likes

How easy would be to support something like Slime or Pug instead of HTML in the Drab live templates? If I can compile Slime or Pug into HTML EEx templates it should work, right?

The heck is slime/pug?

But yeah, if you can compile ‘to’ eex then Drab’s would work fine. Drab adds it’s own eex engine.

Sorry. They’re template languages that generate HTML:

From the little I understand about the libraries and EEx it seems like they both compile to EEx templates.

Hmm, quick checks show they do not compile to eex, but rather they are eex engines (like drab) and do their own things. They would not be possible to use with drab as-is.

Isn’t this an example of compiling to EEx: https://hexdocs.pm/expug/how_it_works.html?

Or am I misunderstanding something?

Oooo wait, that one ‘does’ have a parser to eex, nice! I saw it’s Phoenix template hooks earlier, which is replacing the eex engine with it’s own then. ^.^

So it looks like I can compile to EEx and pipe it into Drab’s engine, right?

Yep you should. :slight_smile:

2 Likes

Currently there is no support for changing “nested assigns”, right? If I have a nested map of things I can only work by replacing the top level assigns, right?

Yes, it is a known bug. Working on it.

Thanks :slight_smile:

Well, actually I wouldn’t call it a bug, it’s just a feature you might add. And the only reason to do it would be efficiency, as you can do whatever you want just by poking the “top level” assign… It just forces you to change more HTML, riight?

Check this out:

https://github.com/grych/drab/issues/42

Hm… Ok, I see the problem. Just a question (please forgive me if it’s kinda dumb). Have you thought of generating the full webpage, sending it to the client and use something like morphdom to patch it inside the browser? Would performance be that bad?
EDIT: if not the whole webpage, at least the outermost HTML component that contains assigns, maybe

Rather oposite, I’d like to send the smallest possible amount of html.
Anyway, I am now rebuilding the eex engine from the scratch, there are more issues with existing one.

Are you working on a real vdom as the issue suggests? If so, good luck :slight_smile:

1 Like