We are a group of developers working on a web application that accepts forms filled and sent by our users and present it in an overall view. Our main form view looks like this: enter image description here

There are multiple forms on this page. The form on the left is the parent form which contains general questions about the project. The right panels are more detailed questions and are about sub-projects. The forms are lengthy and contain different types of properties (form elements) in them. The parent form is static and is opened on page load. We have given no options to close or minimize it. The right panels (child forms) are collapsed by default and open by click and the contents are then rendered. This is done to reduce the page load time. I have annotated the picture so I don't have to explain everything myself. Everything in the picture that has a rectangle around it is a (Backbone) view by itself. To make it even more complex, look at this other picture: enter image description here Look at the photo slider view. Each slide in that slider is again, a view by itself. The manipulation buttons are rendered along with each slide so moving them somewhere else (like next to the "move left/right" buttons) is quite a pain. That is why we have not done it. Now look at the grand child form's fields that I have marked as "properties with relationships". If you change them, they become highlighted (with a yellow hollow color around them) and that changes a whole lot other things in the "child form" and the "parent form". We have managed that kind of relationship when saving the page but this kind of relationship adds to the complexity of the view.

I guess you already have figured it out by now but I'm going to say it anyway: the code has grown out of hand. It is truly a can of worms. There are more than 30 functions in the base view file and 15 other views attached to this page. Multiple people have worked on this view and because it is a big file (base file: 2500 LOC), everybody has just tried to do their bit of task and not think about refactoring or simplifying the design of the page. The page is flawed because it is not extensible. For example, the grand-child forms have two more levels of child forms and we cannot add them to the page. We have been discussing for days on how to redesign this page but none of us seems to come up with a good idea.

Now the question here is how can we redesign this page so it keeps all the functionality but with much simpler code?

We are OK with a total redesign, a total new concept. We want to write the whole thing from scratch. All your ideas are appreciated.

  • Maybe look into task based ui – Esben Skov Pedersen Sep 3 '14 at 6:30
  • 1
    A bit unclear what/where exactly is your problem. A redesign of the form would be off topic since that's a UX question (also the design shouldn't really matter much for your code). So is the problem frontend (javascript) or backend (what technology do you use? In Rails for example splitting this thing into partials or templates, moving some code into helpers etc would work). Also do you have a reasonable MVC structure? You may have too much controller or even model code mixed into the view. – thorsten müller Sep 3 '14 at 9:34
  • We are using java (spring mvc) for our backend. The forms are saved in backbone models. The problem is not with the backend. It's with the javascript code. It is not really obvious for us how to simplify the design (or the structure) of the javascript code (and the page in general). There is just too much clutter in the page. It takes like an hour to understand the code at any time and solve some subtle bug in it. – hamid Sep 3 '14 at 9:43
  • Are you using any kind of client-side MVC framework (e.g. Angular)? They help with this kind of problem – AlexFoxGill Sep 3 '14 at 12:08
  • Sorry, but I think I already mentioned Backbone (I mean Backbone.js) several times on this page. – hamid Sep 3 '14 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.