Factorize HTML generation code between PHP and Javascript

Question

I have a website entirely coded with PHP. Let's consider the simple example in which a PHP script generates HTML/CSS code from data about a list of fruits, fetched in a MySQL data base :

<?php

function displayFruit( $fruit ) {
    echo('<div>');
    echo('<span class="fruit-color">Coulor : '.$fruit['color'].'</span>');
    ...
    // display some other parameters of the fruit, with maybe some complex styles, etc.
    ...
    echo('</div>');
}

// Get infos from dabase
$fruits = getAllFruitsFromDatabase();

// Display infos
foreach( $fruits as $fruit ) {
    displayFruit( $fruit );
}
?>

Now, I want to add interactivity and to allow the user to filter according to some fruits characteristics (color, etc.) so that only the corresponding fruits are displayed.

So I add some controls and link them to Javascript AJAX queries. These queries will return the same type of data (even though not the same format) as what getAllFruitsFromDatabase() returned, and I want this data to be displayed the same way displayFruit() displayed it.

However, the issue here is that the display/styling process will now have to occur on the client side and not anymore on the server side.

Is there a technical way to factorize the PHP code (the one of displayFruit() ) and the Javascript code that will have to be used, so that there only exists one place where the HTML display code is written (and not once in PHP, and once again in JS) ?

Answer 1

What you describe is a very common problem for interactive web apps and there is not really one 'correct' solution for it. : )

It really depends on what you want in terms of PHP-vs-JS balance, but here are two possible solutions that avoid duplication of the HTML rendering code:

1. Always create the mark-up in Javascript, even on the initial page load

This works well if you want the bulk of your code to be on the client-side. In this solution, you wouldn't have a displayFruit($fruit) function in PHP, but you'd have the equivalent in your Javascript. You would render your page 'frame' on page load, and then do your AJAX call on the document-ready event.

2. Always create the mark-up in PHP, even on the filter-AJAX calls

This is perhaps a more balanced approach and has the advantage that you could design your code such that it's possible to run even if the client has Javascript disabled. One way to do this is to pass an optional parameter to your page rendering function (in the PHP code) that will make it render only the data part, eg something like this:

function renderPage($filters = false, $dataOnly = false)
{
    if (!$dataOnly) {
        // Output the top of the page
    }

    // Output the data
    // If $filters is not false, the getFruitsFromDatabase call will return filtered data
    $fruits = getFruitsFromDatabase($filters);
    foreach( $fruits as $fruit ) {
        displayFruit($fruit);
    }

    if (!$dataOnly) {
        // Output the bottom of the page
    }
}

When your PHP script is called via AJAX, you pass your filters to the first argument of the renderPage function and true to the second argument.

---

Note on front-end frameworks :

exussum and Michael Chaney have mentioned Javascript frameworks. While I haven't used any of those myself, they look fantastic!

So If you're ready to invest time in re-writing your display logic in JS, then go for it. However, if you don't have much time and would like to re-use as much of your original PHP code as possible, then I would go for solution number 2. The decision probably also depends on the size and design of your existing code.

---

EDIT: had forgotten to add a $filters argument to the example function

EDIT 2: comment on front-end frameworks mentioned by others in comments