Drab: remote controlled frontend framework for Phoenix

web-frameworks
frontend
drab
javascript
phoenix

#181

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!


#182

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.


#183

It will going to appear in the next release.


#184

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

#185

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?


#186

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.


#187

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.


#188

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.


#189

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

Or am I misunderstanding something?


#190

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. ^.^


#191

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


#192

Yep you should. :slight_smile:


#193

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?


#194

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


#195

Thanks :slight_smile:


#196

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?


#197

Check this out:


#198

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


#199

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.


#200

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