php – Should I use React.js to work with the API, or will it work?

Question:

We have:

  • API, like VK, to which we send a request for js, a response is received in the form of jsonp.
  • At the same time, the scheme does not always work out: the answer came – parsed – inserted. Sometimes you need to pre-process the data, it is possible to group it, slightly filter it according to a certain criterion, etc.
  • Also, the expectation that the site using the API will be used on mobile devices too (that is, they are weaker than stationary ones)

Accordingly, how to be?
It is said that rendering by the server-side is still faster than by the client. On the other hand, if this were so, then all sorts of angulars and reactants would not be used …

Here are some output options:

  1. The answer is sent to the php-file (controller-> view) and there we push whatever we need
<div id="users-wrap">
    <div class="user">
        Photo: <div class="user-photo"><?= $user['photo']; ?></div>
        Name: <div class="user-name"><?= $user['name']; ?></div>
        Age: <div class="user-age"><?= $user['age']; ?></div>
        
        favorite:
        Books: <div class="favorite-books"><?= $user['books']; ?></div>
        Videos: <div class="favorite-videos"><?= $user['videos']; ?></div>
    </div>  
</div>
  1. Better. Also the answer is posted in php and there:
<?php

echo '<div id="users-wrap">
    <div class="user">
        Photo: <div class="user-photo">'. $user['photo']; .'</div>
        Name: <div class="user-name">'. $user['name']; .'</div>
        Age: <div class="user-age">'. $user['age']; .'</div>
        
        favorite:
        Books: <div class="favorite-books">'. $user['books']; .'</div>
        Videos: <div class="favorite-videos">'. $user['videos']; .'</div>
    </div>  
</div>';

?>
  1. React.js
var User = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="user">
		Photo: <div class="user-photo">{this.props.photo}</div>
		Name: <div class="user-name">{this.props.name}</div>
        Age: <div class="user-age">{this.props.age}</div>
        
        favorite:
        Books: <div class="favorite-books">{this.props.books}</div>
        Videos: <div class="favorite-videos">{this.props.videos}</div>        
      </div>
    );
  }
});


var UserList = React.createClass({
  render: function() {
    var userNodes = this.props.data.map(function(user) {
      return (
        <User name={user.name} key={user.id} age={user.age} photo={user.photo} books={user.books} videos={user.videos}></User>
      );
    });
    return (
      <div>
        {userNodes}
      </div>
    );
  }
});

ReactDOM.render(
  <UserList data={users} />,
  document.getElementById('users-wrap')
);

where {users} is the data that will come from the request

  1. React + php hybrid (still something pointless). I have not yet figured out how to implement foreach in the concept of a react, so that in the end it turns out like this:
<?php foreach ($users as $user):  ?>

var User = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="user">
		Photo: <div class="user-photo"><?= $user['photo']; ?></div>
		Name: <div class="user-name"><?= $user['name']; ?></div>
        Age: <div class="user-age"><?= $user['age']; ?></div>
        
        favorite:
        Books: <div class="favorite-books"><?= $user['books']; ?></div>
        Videos: <div class="favorite-videos"><?= $user['videos']; ?></div>        
      </div>
    );
  }
});

ReactDOM.render(
  <User data={users} />
);

<?php endforeach; ?>

But an inflamed brain can do a lot …

  1. Any other option

If you read to the end, showed willpower, then the question is: which option, taking into account the requirements, is somehow more appropriate? Will pure react be faster, taking into account the requirements, or can I do it as the 1st option and not sweat it? Or some other option that is not described here?

Answer:

Depends on what resources you have. Throw away option 2 right away. Actually, if large loads are planned with the possibility of constraint by resources, then it is better to hang up the extra work on the client than to hang up the server with templating. So I personally vote for option 3.

Scroll to Top