3

Backstory

I'm a newer developer and have just started on this project and I've been trying to avoid copy-pasting code wherever I can and make the page be built as dynamically as possible, so that when someone comes along and wants to add features here or there, they don't have to add code into 20 different places. So far it's going well, but I feel as if I'm doing it TOO much or that maybe there's another solution.


Current problem

I've been tasked with creating a legend for a map webapp (GIS).

The way I see it, I have two options.

  1. Hard-code in a bunch of HTML elements that represent each legend entry and they will have the images, labels, and descriptions for each entry all hard-coded in.

  2. Put all of that into an easy to read JSON object and iterate over the object, generating each HTML element using javascript. This way, I could enable, disable, swap-out, have flags, etc for each element.


Side note

I'm sure people have encountered this issue before, and I'm encountering a lot of similar design questions throughout this project. It's starting to get messy. I have a lot of different parts being dynamically generated, but all of the code from before I got here is all hard-coded in.

closed as too broad by gnat, jwenting, Thomas Owens Mar 21 '17 at 14:43

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • What framework(s) are used for the web app? (either on the client-side or the server-side). Many modern web app frameworks have all kinds of tools for generating HTML, so you might be reinventing the wheel here.. – Ben Cottrell Mar 16 '17 at 19:57
7

Hard-code in a bunch of HTML elements that represent each legend entry and they will have the images, labels, and descriptions for each entry all hard-coded in.

This works great... until you need to change something. You did say you are working on a dynamic site, after all.

Put all of that into an easy to read JSON object and iterate over the object, generating each HTML element using javascript. This way, I could enable, disable, swap-out, have flags, etc for each element.

This is better, but not quite right. What you are looking for is a template for the HTML. You create a simple HTML fragment with the actual data omitted, and your web engine takes a legend entry and puts its data where it goes in the template. Depending on the framework and technology used, you may have static markers in the HTML that are simply replaced by the framework.

The issue with the JSON is it is perhaps a bit too dynamic. Using a static template means you can easily see the layout and modify it, and you still have a single document to modify rather than many.

  • 2
    We are using Velocity Templates and for some reason I hadn't considered that as a solution to this problem. Thanks! – qbolt Mar 17 '17 at 15:10
1

I disagree with the other answers. You should do as much as possible on the server side and as little as possible on the client side. By "hardcoding" HTML I assume you mean that you do not use any server-side language, but rather have static files served by the server. Don't do that! Instead, use a decent server side language that supports a template engine. I would recommend Java and FreeMarker as the template engine. Also, you will need a database; I recommend PostgreSQL but I have to say that MySQL is not anymore the total disaster it used to be. Some people say that you need a "framework"; I disagree. It is perfectly well possible to write a decent web application with no frameworks whatsoever.

Now, when you have your server-side environment set up, you will find that you can generate the page from data in database. The client will see it as "hardcoded HTML", but in reality it is a dynamic page that is generated from the data in the database.

If you need to develop modern user interfaces, I'm sure you'll find that JavaScript is necessary. I would do as much as possible on the server side, assuming a round-trip to the server is needed. So, the server can return HTML fragments in JSON objects and the client then can assign them into .innerHTML of elements.

  • I don't like the it's of returning HTML fragments inside of Json (just return the fragment!), but +1 for doing things server side. Few have websites with so much traffic (or a real application) that it actually warrants a ton of client side code. – RubberDuck Mar 16 '17 at 23:47
1

As you point out, the HTML solution is faster to implement, but not very flexible. It's good for proof-of-concepts, or static pages that (almost) never change (by design). If you develop a flexible solution, you might be able to reuse that for other maps in the future, hopefully with very little changes, other than the content itself. Go for the JSON/JavaScript solution, unless this is something that will never change.

UPDATE:

As juhist mentioned, it is also possible to generate the legend on the server side, although since you say nothing about the server-side technology you're using, I found it hard to give good input for such a suggestion. I don't think rendering a map legend using JavaScript and JSON is going to cause serious performance problems, but if it does, then generating the HTML on the server (with whatever back-end stack you're using) is probably a good idea.

0

Why not auto-generate the HTML at the back-end from your data source ? It's a distinct solution from either the hard-coded HTML or generating the HTML in the browser.

  • 2
    This is the worst of all approaches. – DeadMG Mar 16 '17 at 22:18
  • 2
    You can't make a statement like that without backing it up @DeadMG. It's an entirely valid approach. Sails and Asp Mvc both take this approach. – RubberDuck Mar 16 '17 at 23:39
  • 1
    @DeadMG it is a viable solution, since it does the job. Whether it makes sense depends on the project requirements, not on a dogmatic point of view. – Thomas Junk Mar 21 '17 at 7:53

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