Javascript – Web Application: Combining View Layer Between PHP and Javascript-AJAX

ajaxjavascriptmvcPHPweb-development

I'm developing web application using PHP with CodeIgniter MVC framework with a huge real time client-side functionality needs. This is my first time to build large scale of client-side app. So I combine the PHP with a large scale of Javascript modules in one project.

As you already know, MVC framework seperate application modules into Model-View-Controller.

My concern is about View layer.

I could be display the data on the DOM by PHP built-in script tag by load some data on the Controller. Otherwise I could use AJAX to pulled the data — treat the Controller like a service only — and display the them by Javascript.

Here is some visualization

I could put the data directly from Controller:

<label>Username</label> <input type="text" id="username" value="<?=$userData['username'];?>"><br />
<label>Date of birth</label> <input type="text" id="dob" value="<?=$userData['dob'];?>"><br />
<label>Address</label> <input type="text" id="address" value="<?=$userData['address'];?>">

Or pull them using AJAX:

$.ajax({
  type: "POST",
  url: config.indexURL + "user",                
  dataType: "json",
  success: function(data) { 
    $('#username').val(data.username);
    $('#dateOfBirth').val(data.dob);
    $('#address').val(data.address);
  }
});

So, which approach is better regarding my application has a complex client-side functionality?

In the other hand, PHP-CI has a default mechanism to put the data directly from Controller, so why using AJAX?

Best Answer

If you're going to have a significant amount of logic written client-side, then consider using MV[C]-style "separation of concerns" in your client-side JS code. For example, you might have some JS "view" logic which handles rendering:

<script type="text/javascript">
function renderUser(user) {
  $('#username').val(user.username);
  $('#dateOfBirth').val(user.dob);
  $('#address').val(user.address);
}
</script>

Then define some JS "controller" logic to pass the data into the view. The design of this depends on expected usage of the application -- e.g. if "user" is only rarely displayed, then the JS controller logic might look like:

<script type="text/javascript">
function showUser() {
  $.ajax({
    type: "POST",
    url: config.indexURL + "user",                
    dataType: "json",
    success: function(data) {
      renderUser(data);
    }
  });
}
</script>

On the other hand, if the user is displayed on every page-request, then it's non-performant to fetch the user via AJAX -- better to include the user data as part of the initial page request. You can still use the same rendering function:

<script type="text/javascript">
renderUser(<?php echo json_encode($userdata); ?>);
</script>

Or if your web-application provides a real-time list of new user-accounts via web-sockets, you could draw them on-demand:

<script type="text/javascript">
var ws = new WebSocket("ws://localhost:9998/users");
ws.onmessage = function (evt) { 
    renderUser(evt.data);
};
</script>

The examples above are a crude but hopefully demonstrate the flexibility that comes with separating MVC in JS. For a better discussion of that topic, check out a tutorial on one of the popular JS MV* frameworks (Backbone, Angular, Ember, etc).

Related Topic