Helo, So I have a web server that generates a PHP object, and I build the webpage depending on that object (I have a HTML builder that literally echo the commands) and it is going great as I am using OOP so I maintain my code easily.

I understand that load-wise, it is a choice between server-side and client-side load and this is not a concern for now. Please correct me if I am wrong, and let me know your thought about this if you have any.

I also have a JS code to work with the PHP-built HTML page, and I can recognize two types of pages now, one of them confuses me a bit:

Passive Webpage

It can only display data and does not send feedback to the server. These webpages can either be done via PHP or Javascript, I see no difference there.

Active Webpage

This type is for pages that sends and receive (AJAX and others) requests from the server. Now I have two options which I can not decide over:

Build a PHP object, and pass it to JS to build the HTML.

In this case, JS should be aware of the full object, and it can easily manipulate it and make feedbacks. But, that would be making both JS and PHP understand the object, which means double the work on that field.
In this case, exchanging updates should be swell.

Build an HTML completely using PHP

This option requires JS to be aware of few, and not all, parts of the object (the parts that need update). This requires less work on JS, as it postpones possible work for the future (i.e. each new part of the object that needs updating should be understood be JS).

Now, I am kinda sure the second option is better, but the first option is faster for now (as I would like to have a working DEMO soon). At the same time, I am not totally sure, and I do not want to go too deep that it becomes harder to make a change of heart later on. What do yous think?

In case this was not clear enough, I will explain with an example.

PHP

Class A {
  protected $_name;
  protected $_id;

  function Update( $aInstance ) {
    // Give it an object, and it updates it. In case JS exchanges the whole object
  }
  function UpdateName( $newName ) {
    // Updates the name only. Used in case JS updates parts of the object.
  }
  // Other setters, too.
  function Draw() {
    // Either returns the object as JSON or echos the HTML code.
  }
}
class B inherits {
  protected $_age;
  function Update( $bInstance ) {
    paret::Update( $bInstance );
    // Update yourself, too.
  }
  // Other setters, too
  function Draw() {
    // Special draw, call parent's, or add to it
  }
}

JS 1st option

var object;
function Draw( object ) {
  // Handle all parts of the object.
}
function UpdateName() {
  // Whatever happens when the name changes.
}

JS 2nd option

var header;
function DrawHeader() {
  // Display the header somehow
}
var DrawName() {
  // Display the name somehow
}
function UpdateName() {
  // Whatever happens when the name changes.
}