1

In a PHP + jQuery environment, me and my friend can't come along with what is the best solution. We are getting data from a database with Ajax.

Solution 1 - Ajax should only transport data, not HTML

Benefit: We get the data with Ajax with the JSON format. This way Ajax only transports data, not HTML.

Pitfall: The JS now need to handle the HTML so the JS will be filled with HTML markup.

Solution 2 - JS should only contain code, not HTML markup

Benefit: We get the data with Ajax with the HTML format. This way Ajax transports HTML which means the JS can just render it directly. No HTML in the JS code. I can also use the same HTML template as I use with PHP (DRY).

Pitfall: The Ajax transport more data because HTML is bigger. It is also not easy to manipulate.

Question

We now have two cases and I can't see what is best of them. Maybe it's a personal preference? Maybe some of them is recommended over the other for some reason?

Is there a better solution here or is it a personal preference? If so why is that one better? Which would you choose?

Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
  • Solution 3: Use AngularJS or some other framework that separates JS from HTML at the client side. Only send the data over the network. Benefits: (1) Less data over the network, so shorter response times (2) The server can serve multiple client apps with different HTML requirements (3) Clear separation of business logic (server-side), view (HTML files) and presentation logic (JavaScript) – www.admiraalit.nl Oct 30 '15 at 08:54
  • if you want solution 3 @www its beter and sulotion 1 is good too – Mohsen Oct 30 '15 at 08:57
  • @www.admiraalit.nl You forgot about the pifalls: Big learning curve and bad for SEO. – Jens Törnell Oct 30 '15 at 08:59
  • _The JS now need to handle the HTML so the JS will be filled with HTML markup._ Not necessarily. Have you heard about [JS templating](https://en.wikipedia.org/wiki/JavaScript_templating)? – hindmost Oct 30 '15 at 09:01
  • @Jens Törnell, Big learning curve: agree, but investment pays off. Bad for SEO: The two solutions you propose are equally bad for SEO. – www.admiraalit.nl Oct 30 '15 at 09:09
  • @www.admiraalit.nl I tried Angular once and it seems like it wants to take over the whole HTML part to work well. With jQuery for example we can just change the parts of the HTML we want. Maybe some of them is plain HTML / PHP. Correct? – Jens Törnell Oct 30 '15 at 09:14
  • No, you can have a web page with 90% plain HTML and 10% AngularJS. For example, you can use Angular for a small "widget" on your home page, while not affecting the rest of the page. – www.admiraalit.nl Oct 30 '15 at 09:22
  • @www.admiraalit.nl Ok, let's say we have a small widget that covers 10% of the page. What will it show for none JS users? Probably alot of this {{widget-title}} {{widget-text}}. With jQuery it will show nothing or some PHP / HTML default text. Am I wrong? – Jens Törnell Oct 30 '15 at 09:24
  • 1
    @JensTörnell You can hide the widget or show an alternative, as explained here: http://stackoverflow.com/questions/22256371/how-to-handle-javascript-being-disabled-in-angularjs – www.admiraalit.nl Oct 31 '15 at 21:44

3 Answers3

2

Solution 3: Use AngularJS or some other framework that separates JS from HTML at the client side. Only send the data over the network. Benefits:

  1. Minimal data over the network, so shorter response times
  2. The server can serve multiple client apps with different HTML requirements
  3. Clear separation of business logic (server-side), view (HTML files) and presentation logic (JavaScript)

If no other JS framework than JQuery is allowed, then I would recommend solution 1 and still try to separate HTML construction logic from user interaction logic in different JS functions.

www.admiraalit.nl
  • 5,768
  • 1
  • 17
  • 32
2

There are another options:

  1. The most easy way given your case is ajax retrieve json data, store the html in template scripts, and use a template engine like mustache or handlebars , etc

  2. The best solution is learn a SPA framework. You can try ReactJs, AngularJs or Ember. I have been using Angular for 3 years and is a very solid tool (with his caveats but works very well). Currently i'm workin with ReactJS is a very powerfull tool.

I recommend the fourth solution. If you don't want to learn a new framework. The third solution is the best way using the old technologies.

Jesús Quintana
  • 1,803
  • 13
  • 18
1

In a very Simple Way as i seen come with this:

If you Want to replace a full portion of your page with what comes back from the Ajax request go with Solution 2 this is best approach in that case as you said your HTML is bigger than it work for you.

because dom manipulation by JavaScript is slow.

you defiantly need to generate json on server side for ajax response, adding html tage won't probably make issue in term of time and performance

but generating a portion of HTML using json data on client side is painfull you have to kept performance and time in your mind.

use caching during heavy html in ajax call may help you

think about what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page

hope this will help help you

Shailendra Sharma
  • 6,976
  • 2
  • 28
  • 48
  • 1 year later. I get the HTML, solution 2. For me that is much simpler and I can keep the HTML in my PHP-files, not in the JS files. I also don't use any framework, not even jQuery. Another benefit is that I can use the HTML from an Ajax request, but also as a PHP request because the HTML is already in the PHP files. Works really well and I have not run into any performance issues. Thanks! – Jens Törnell Dec 20 '16 at 09:40