Skip to main content

Hardcoding HTML vs generating HTML from JSON using Javascript [Resolved]

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.


Asked March 20, 2017
Posted Under: Programming
5 views
4 Answers

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.


Answered March 20, 2017
 
We are using Velocity Templates and for some reason I hadn't considered that as a solution to this problem. Thanks! – qbolt Mar 17 at 15:10
 CanDoerz  2 days ago

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.


Answered March 20, 2017
 
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 at 23:47
 CanDoerz  2 days ago

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.


Answered March 20, 2017
 
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 at 23:39
 CanDoerz  2 days ago
 
This is the worst of all approaches. – DeadMG Mar 16 at 22:18
 CanDoerz  2 days ago

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.


Answered March 20, 2017
Your Answer
D:\Adnan\Candoerz\CandoProject\vQA