Phoenix integration with Pug (Jade)

vnz

Some 2-3 months ago we started a Phoenix 1.4 project. The designer uses Pug https://pugjs.org/ for generating the basic html design, as well as the initial js/css. He uses some own pipeline for generating all this (using gulp), then I get the generated html, split it and use in Elixir templates (eex). This has proven to be a major setback and it’s taking big time on my side to integrate the changes. The generated files are too big, lots of html/svg ****, etc. On top of that, we take the generated js/css and integrate it with the webpack pipeline of Phoenix, with additional changes. We took a Vue.js dev onboard for some of the features that call the Phoenix backend/api. So as you might guess, it’s a big pile of fancy technologies, everyone coming from their background and not seeing the big picture of the project, and at the bottom line it looks like a big pile of ****. On the other side, business ppl have been pressing too much on releasing the product live, even though it’s not finished.
So, the question is: what would you have done differently in such situations? How would you integrate the work of some designer with some weird pipeline who delivers you bunch of html/js/css? How can one (if possible) get out of this pile of ****? I have lost the enthusiasm to work in this project, feel burnt out, and just want to finish and get out.

6 comments

/phoenix #advice

0 2572 6

2019-04-01 09:18:34 UTC

Showing Posts 1 to 6

Show Best Posts
Show All (oldest first)
Show All (newest first)

peerreynders

What about combining Vue.js + Pug, serving it through node and having Phoenix strictly as a JSON backend - i.e. take EEx out of the picture entirely?

It not an unusual approach.

Post #1

vnz

That’s the most logical solution, but I don’t think business ppl will agree on this - they just want the product shipped as soon as possible.

Post #2

chrismccord

Creator of Phoenix

It’s not clear what the requirements are, but it sounds like the use of a template language like pugjs was not at all needed. So that would be my first change in retrospect. Writing HTML is never the bottleneck, so I avoid template engines wherever possible. It sounds like the designer should have delivered well constructed HTML/css, but perhaps there are some client-side requirements we are missing.

Post #3

vnz

The basic functionalities were given to me in the beginning, but the requirements were known add-hock: the designer finished his work couple of weeks ahead, the business ppl gave him ideas how the site should look, and then it was given to me and deduce the functionalities that have/had to be implemented in Phoenix. Then the new changes are added to the design, and propagated to me…

Post #4

peerreynders

Then the new changes are added to the design, and propagated to me…

To speed this up it may be make sense to get the Designer back for a few sessions if possible so that you can pick his brain about the design rather that having to “deduce the functionalities” yourself.

In either case you may still end up discovering that either EEx or Vue.js has to go (Once Vue.js enters the picture there really isn’t much to do for EEx other than providing a container of the page body - with Vue.js gone you need a way to enable the page dynamics in concert with EEx).

Post #5