Имеем:
-
API, наподобие
VK, которому посылаем запрос на
js, приходит ответ в
jsonp.
- При этом не всегда получается схема: пришел ответ - распарсил - вставил. Иногда нужно предварительно обработать данные, возможно сгруппировать, чуть отфильтровать по определенному признаку и т.д.
- Также расчет на то, что сайтом, использующим API будут пользоваться и на мобильных устройствах тоже (то есть типа они послабее стационарных)
Соответственно как быть?
Говорят, что до сих пор рендеринг силами серверной стороны быстрее, нежели средствами клиента. С другой стороны, если бы это было так, то всякие ангуляры и реакты не использовались бы...
Вот несколько вариантов вывода:
1) Ответ шлем в
php файл (контроллер->view) и там распихиваем что куда надо
<?php foreach ($users as $user): ?>
<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>
<?php endforeach; ?>
2) Похлеще. Также ответ шлем в
php и там:
<?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>';
?>
3) react
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')
);
где
{users} это данные, которые прилетят с запроса
4) гибрид react + php (еще что-то бессмысленное)
Еще не придумал как-тут осуществить
foreach в концепции реакта, чтоб в итоге получилось типа такого:
<?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; ?>
Но воспалённый мозг может в итоге на многое...
5) еще какой-нибудь вариант
------------------------------------
Если вы дочитали до конца, проявили силу воли, то вопрос: какой вариант с учетом требований хоть как-то уместнее? Будет ли чистый react быстрее с учетом требований или можно делать 1-ым вариантом и не париться? Или еще каким-либо вариантом, который тут не описан?
