Collaborating with a designer/CSS publisher

[harfangk]

In my current project, I will be collaborating with a designer/css publisher. I will be responsible for front-end state management, DOM manipulation, and communication with the server. He will be responsible for overall design, layout, and CSS.

I’m worried that this arrangement for division of labor might prove problematic. The key problem is that he would be unable to modify DOM structures while testing out his design and CSS codes because he does not know Elm. He would have to explicitly tell me what kind of DOM structure he needs, and I would have to provide it. It’s easy to imagine how this might devolve into a nightmarish situation where I would be constantly asked just to change DOM structures and class names.

One solution would be for me to handle the CSS too, but publishing is its own specialized area and I am not good and/or fast enough at it. Moreover, he learned CSS and jQuery so that he could reliably publish his own design without a frontend developer mangling his design. It would be difficult to convince him to just provide design and let me give a clumsy shot at publishing it.

Another solution would be to teach him Elm, but he has strongly expressed his career goal to focus on design and CSS when he joined the project so he is not keen on learning Elm. Besides, he lacks background in software and it might take too long for him to learn Elm even if he was willing to do so.

We could agree on a preset list of DOM structures and class names, but that’s just a stopgap. The fundamental problem is that Elm is a big departure from conventional HTML/CSS/Javascript world, causing difficulty when collaborating with people unfamiliar with it. As for software developers, I expect them to learn Elm. But I can’t demand the same from a publisher or a designer.

With that context given, I have two questions:

1. If you’ve been in a similar situation, how did you cope with this collaboration problem? Do you have any advice for me?
2. In general, how should Elm as a language handle this issue about collaboration with people with minimal Javascript knowledge but won’t/can’t learn Elm?

[simonh1000]

I’m in a similar situation now and it is not a problem. The designer works out the design in html and css (and jquery sometimes), and I then replicate that in Elm. Meanwhile, I work on the real interactivity in the site (the messages, the commands etc) without overly much recourse to the design

[Brian_Carroll]

Simon’s suggestion is also what I was thinking, though I haven’t experienced it. You may want to take a look at this tool:
https://mbylstra.github.io/html-to-elm/

[harfangk]

@simonh1000 Thank you! It lightens my heart to hear that it’s working out for you. I hope it goes well for me too.

@Brian_Carroll Yeah that tool is a lifesaver!

[rupert]

To complete the loop you may need to give back to your CSS/HTML designer the output that your Elm code produces.

This can be obtained either from a build or test environment - the designer runs the application and looks at the HTML. Or you could use elm-server-side-renderer (https://github.com/eeue56/elm-server-side-renderer) to produce static HTML from instances of your Model. By this I mean that you write a small example program that creates the Model in a certain state that you want to show, then pass it to your view and render some HTML. You could even do this as part of your build process and have the generated HTML checked in to git. That way the designer can find these HTML views easily and can also make changes to them on a branch, which you could then diff against and then modify the Elm code in order to eliminate the difference.

Note that elm-server-side-renderer is experimental, but it does work and is easy enough to use and quite suitable for integrating into this kind of test/feedback cycle. There may be other server side rendering libraries for Elm now?

One further thought is that Elm does provide a lot of good stuff for working with CSS, but you can also use CSS that is hand crafted or output from a more old-school tool such as sass/compass. I had to do that when working with a designer that was more used to that way of working and it wasn’t a problem. CSS animations were done in Elm though and did not fit into this style of working so cleanly, but also we tried to keep the amount of animation to a minimum.

[harfangk]

It’s nice to know about that option to generate HTML. I’ll be working with
css files generated by the designer and will also minimize using animation.
elm-animation is a nice library but it’s gonna be duplication of work
porting complicated animations into elm-animation.