This is a summary of our front-end development process:
- designers create PNG mockups
- UXers create HTML mockups
- developers create final JSF
Now, these HTML mockups are pretty complete. They use all our in-house JavaScript widgets, production CSS files, responsive design, accesibility requirements, SEO-friendly code, proper semantics etc. So basically the final HTML we need from the JSFs has to nail these mockups, otherwise widgets might not work, styles might not appear correctly, accesibility errors might crop in and SEO might suffer. The developers tend to have limited experience in HTML/JavaScript/CSS/accesibility, especially compared to the UXers, so the less they can do to screw up the HTML the better.
With this in mind we tell our developers to just convert the very minimum to JSF. So that basically means forms & form elements and the occasional loop. For example we tell them to avoid h:dataTable and just use the given HTML table and a loop - for some reason (probably lack of experience) we found it very difficult to nail the right HTML in terms of thead, tbody, th and td (or to get a rowspanned "There are no results" output for empty lists). We even tell them to use straight EL instead of h:outputText (unless they really need it) for i18n literals or form outputs. Then there is the added complication in that we use HTML5 (currently using a RenderKit for that). I also prefer to avoid tying my HTML to a given technology: I don't want my JavaScript/CSS to depend on JSF (or PrimeFaces or whatever) output, I want it to depend on what we consider the "correct" HTML in terms of semantics (ie, unobtrusive frameworks).
Would you say this is a correct strategy? I find it helps reduce developer workload (less to convert), reduces front-end errors (less to screw up), and might it also reduce memory footprint on the server (less component tree)? Or am I missing something?