Web-App Construction, HTML vs JavaScript

Question

I'm currently developing a Web-Application.

Now I'm wondering what's better in Performance or maybe other aspects to construct the Page.

First option, construct everything directly in a HTML File and hide the Objects () for later use and let JavaScript show/hide them when needed.

Second option, create a JavaScript which generates the HTML at Runtime via JQuery.

EDIT

To get a little more specific.

It's gonna be a Web-Application with many different Views. For example, at first you have Login-View, then Overview-View, Settings-View, etc.

All Requests like Login, GetData is gonna managed with AJAX JSON-RPC Requests.

If I go the HTML way, I would create for each View a div-Block which is from beginning not shown. JavaScript is then going to show them depending on what's needed and fills out Data via AJAX Requests.

If I go the JavaScript way, JavaScript generates the HTML and the Views get's replaced by JavaScript.

I'd like to do it this way, because I do not want the user to reload every Site. And I don't like PHP.

Elements present at run time, don't use show/hide, instead use add/removeClass(). — Ohgodwhy
– Ohgodwhy, Commented Mar 20, 2013 at 9:25
How much are we talking about generating here? Is the entire page dynamic? — Cody
– Cody, Commented Mar 20, 2013 at 9:26
Static HTML or generated from a template? Remember, the DOM is slow. — beatgammit
– beatgammit, Commented Mar 20, 2013 at 9:31
@MattCain, I think that's for questions concerning existing web apps, such as Google Drive or the like. — Cody
– Cody, Commented Mar 20, 2013 at 9:31
It depends on how much data you have, how much bigger it becomes when presented as HTML, how much bandwidth the client device has, and how much processing power the client side has. — Quentin
– Quentin, Commented Mar 20, 2013 at 9:31

Cody · Accepted Answer · 2013-03-20 09:29:06Z

1

I would have all the elements on the page if possible, and use jQuery/CSS to show/hide them as needed. In my opinion, it's a much more direct and clean approach unless you need something very dynamic, i.e., specific data to be displayed in newly appeared forms based on user input.

In addition, you should remember that what you have on the page already as HTML is going to already be on the page, vs needing to wait for the page to load and then the Javascript to fire.

answered Mar 20, 2013 at 9:29

Cody

9,00419 gold badges75 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Phartiyal · Accepted Answer · 2013-03-20 09:35:10Z

See there is a tradeoff between the two.

Usability:

If the data is important plus there is a chance that a user in most of the cases will be interested in it, then its better to load it in HTML and hide via javascript. The page will be more responsive then. If there is a rare chance that a user want to know about that data then do the AJAX load.

Size of Data:

Also if size of data is very very large and complex, often involving some form of media, then do an AJAX. If its textual then hide it via JS.

Example:

Hide it via JS

A description text clipped by JS and when user clicks more then complete text is shown. Usability: A user will never read half description, he will always be interested in whole story. Size and complexity of data is less. It only a text.

Use AJAX

A link to a "see it in action video" which opens in a modal popup. Usability: If a process has already be explained in text and images then there is a less chance that user will want to view the video also. If he don't get it he will leave the page simply. Here size if data is large and its complex too.

Lightness Races in Orbit · Accepted Answer · 2013-03-20 10:44:08Z

0

JavaScript is commonly used to play with the HTML content.It's not a good idea to preparing HTML with it.Of course we can't ignore some situations.

But designing a whole HTML content of a page with javascript really scaring me . :)

edited Mar 20, 2013 at 10:44

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Mar 20, 2013 at 9:33

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

2 Comments

Lightness Races in Orbit Over a year ago

Why did you mark these non-code things as code? Please do not use code blocks for arbitrary highlighting.

Suresh Atta Over a year ago

@LightnessRacesinOrbit thanks for the edit.I'll keep in mind from the next time onwards.

Collectives™ on Stack Overflow

Web-App Construction, HTML vs JavaScript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related