0

These days, lots of stuff is being done on the client. This includes full page rendering, data fetching, and much more. Right now, I am developing an API and also working on the client-side app which fetches data, binds it, and displays it.

The problem I am experiencing, is that I am not responsible for any front-end design, and a beautiful design needs to wrap my stateless html5 app. Given my circumstances, where data is bound to DOM elements, and I am programming on the client AND the server, how can I work harmoniously with my front-end designer such that a) he doesn't need to worry about any code whatsoever, and b) I am able to make sure that none of my data bindings break and that things load seamlessly?

I am using backbone, jQuery, require.js, doT.js, and a few other helper modules on the clientside to achieve statelessness. My POC application works like a charm but it looks terrible. I was considering creating an 'htmlspec' or something along those lines, to give to my designer, but what types of things would it need to include? How is this done at large companies that are working with responsive pages?

Improve this question
3
  • It sounds like you're acting as both coder and product manager, which seems out-of-sequence to me. Usually, a designer would collaborate with the product manager to determine key task flows for the interface to emphasize and would then pass a rough wireframe to you to implement (or in a more Agile environment would involve you the engineer in determining which flows to implement). You appear to have created the code before the design, which seems backwards because it may have created unnecessary functionality or may not have created some necessary functionality.
    – Graham Herrli
    Commented Aug 4, 2014 at 21:33
  • Try taking a step back and getting a clearer design of what you want your application to do (in particular what you want your main user to do and in what order) rather than just viewing the UI as a skin for the functionality.
    – Graham Herrli
    Commented Aug 4, 2014 at 21:34
  • I wouldn't go that far. The API itself is well-specced, and will be accessed by an array of clients. This question has more to do with the concrete details of how a web designer can work with programmers to implement their design in a fluid fashion (e.g. nothing breaks) for a very specific type of client. I think that using intelligent IDs and class names (as specified below) ought to be the move.
    – Sam Levin
    Commented Aug 4, 2014 at 22:30

1 Answer 1

Reset to default
1

A solution would be to talk to your front-end designer/developer, or to give him some kind of documentation about the ids/classes that you used to bind the events to.

I would make sure to replace elements selectors (#mydiv > p) with selectors that point directly to ids or classes (#paragraphInsideMyDiv) so that the templates could even be done from scratch without breaking your logics.

Ideally you would not go into the development phase without having defined the usecases, the tasks, the wireframes, (some iteration with few user tests wouldn't hurt here), mockups and the designs first.

I would create the templates separately and then I would wire them to the JS library.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.