Workflow ideas - using static HTML & tools like Pinegrow with a LiveView app

I’m not the greatest at front-end work and a tool like Pinegrow seems like it could help me a lot. It supports the concept of “partials” which I think is a good start towards being able to using it to build the HTML for pages & LiveComponents. While it doesn’t list EEX support, I think the ERB support is all that I need (since it treats the code as on opaque blob).

I’d also like to be able to hand off the HTML part of development to somebody that is an HTML/CSS developer that doesn’t have Elixir knowledge.

Does anybody have any experience in setting up a workflow for doing this effectively? I’m thinking of something like having a folder with nothing but static HTML partials which are effectively a mockup of my app.

Here’s where things get fuzzy:

  • Do I have the HTML developer just put placeholder text everywhere? And then add a search and replace / build step that turns it into EEX? (I need to deal with i18n so pretty much all the text in my HTML needs to be parameterized).
  • Do I put my @assigns and for loops and such directly in the static HTML? What do I do with things that render conditionally?
  • How do I then have this work fit into the directory layout of my Phoenix LiveView app?

One idea I’ve had is to add some routes to my app which re-export static HTML partials for use by the front-end developer.components. That seems like it could create a lot of extra work though.

Basically what I’m looking for is an effective two-way collaborative process between these two parts of the development process. I feel like this must be a problem other people have solved, but I don’t even know what to call the problem I am describing.

Bonus points if anybody has suggestions which also allow me to effectively deal with using my same templates & layouts for some legacy parts of the application which are still written in PHP using Smarty templating.

1 Like