Duplication of code (backend and javascript - knockout)

Question

We have a new developer on our team. He seems to be a smart guy (he just came in so I cannot really judge). He started with implementing some small enhancements on the project (MVC3 web application using Javascript with jQuery and Knockout).

Let's say we have two values:

A - quite complex calculation    
C - constant    
B = A + C

On the screen there is value B and user can change it (normal texbox). When B changes, A changes as well because C is constant. So there is linear dependency between A and B.

Now, all the calculations are done in the back-end, but we need to recalculate A as user changes B (in Javascript, I would use knockout). I thought about storing old A and B and when B changes by 10 then we know that new A will be old A + 10. He says this is dirty, because it's duplication of code (we make use of the fact that they are dependent and according to him that should be only in one place in our app). I understand it's not ideal, but making AJAX request after every key press seems a bit too much.

It's a really small thing and I would not post if we haven't had long discussion about it.

How do you deal with such problems? Also I can imagine that using knockout implies lots of calculations on the client side, which very often leads to duplication of the same calculations from the back-end. Does anyone have links to some articles/thoughts on this topic?

Answer 1

I think real-time, client-side, more responsive interface features sometimes end up being an exception to the DRY rule in cases just like the one you've described. The need for responsiveness merits client-side code, but often one finds themselves calculating these values on the backend before passing them to the front-end; the values are then dynamically recalculated when the user adjusts the interface somehow.

One thing I can say for certain: this is not worth a roundtrip to the server, unless it's ok that your values on the front-end only update only second or more. Any less than that and you may have not only issues with responses returning out of order, but a certain jarring refresh behavior even if the former isn't a problem.

I've always thought that - at some point - this would be the main reason for using Javascript on both the front and backend but I dunno if anyone's ever taken a stab at a common code transport or something like that.

If anything, I would question whether or not it's necessary to have these calculations in your backend model/server-side code at all - perhaps you need to ensure the linear contraints between the variables are met for consistency reasons, ones of security, etc, but - if not, and if you don't explicitly call these calculations from somewhere in your backend - then I would suggest you consider taking them out of there.

Answer 2

I believe that you've misunderstood your colleague.

This is not duplication between server-side code and client-side code.

Duplication would be to have code on server-side doing the "quite complex calculation" you're talking about, and code on client-side doing the same calculation: if you're changing one, you should change the second one, unless it is acceptable to get inconsistent results.

Instead, here, client-side code is just remembering the result of the calculation, nothing more. Thus, when changing the calculation, you need to do it on the server-side only.

This being said, what your colleague might have said is that you're reinventing the wheel. GET AJAX queries can be cached by the browser, and there is no need to duplicate in JavaScript the caching feature already implemented in the browser. If for the same parameters, the result of the calculation is the same (not dependent on the system time, application state, database or files), just cache it severely for a long period of time, and ensure that once cached, the request doesn't even reach your server.

Answer 3

In a slightly more complex situation, I decided to use AJAX to make sure the calculation is only done in one place, i.e. on the server. Coding the same calculation twice (on the server in C#, on the browser in JavaScript) is code duplication and might negatively affect maintainance; making use of a property of the calulation like you proposed seems even more dangerous because once someone decides that from now on, the formula has to be

 B = A * 1.05 + C

your code will create subtle errors and probably cause a lot of headaches.

Answer 4

If strongly desired, common code can be isolated across multiple languages and environments.

Imagine maintaining the same application written in both Java and C. They have several command line arguments in common; however, a few parameters differ. You could write the help for both applications independently (once in Java, once in C), ignoring the DRY principle. You could write a help file once in XML and use stylesheets to generate a Java Help class and a C help function. For example:

<?xml version="1.0"?>
<help>
  <param name="server" abbr="s" lang="both" arg="string">Application server name.param>
  <param name="garbage" abbr="g" lang="java" arg="nil">Attempt garbage collection.</param>
</help>

This allows generating help for both applications and -- with not much more work -- inject the parameters into the command line parsing code.

In your particular case, you have server code and client code that performs a calculation. If you really wanted to isolate the calculation, you could describe the calculation in a language-neutral format and then generate the corresponding code for the server and the client.

Constants are a similar issue: how do you maintain a list of constants within a client-server application, while applying the DRY principle? Use a database table to store the name and value of the constants and then generate the common code (Java interfaces, PHP globals, JavaScript variables, and such).

See also: https://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-and-escape-newlines