wordpress: react way by oleksandr strikha
TRANSCRIPT
WordPress: React way
New WEB
New WEB
New WEB
React?
WordPress?
WordPress
• Простота разработки
• Готовые решения
• Проверенные временем технологии
Native
WordPress
• Это круто!
• Можно создать качественный продукт
React
REST API
REST API
/admin-ajax.php /wp-json/…
React: Blog
Packages
• react https://github.com/facebook/react
• react-router https://github.com/reactjs/react-router
• react-redux https://github.com/reactjs/react-redux
• redux-thunk https://github.com/gaearon/redux-thunk
• aja https://github.com/krampstudio/aja.js
Store
let store = {
posts: [
{
id: 1,
status: 'loading'
},
{
id: 2,
status: 'full-loaded',
title: 'Some Post',
content: '...'
}
],
pages: [],
navigation: {}
};
React: innerHTML
<h1>Some Super Post Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla quam velit...
<img src="http://site.com/image.png" alt="" />
</p>
[
{
"node": "h1",
"children": [
{
"node": "text",
"content": "Some Super Post Title"
}
]
},
{
"node": "p",
"children": [
{
"node": "text",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
quam velit..."
},
{
"node": "img",
"attr": {
"src": "http://site.com/image.png",
"alt": ""
}
}
]
}
]
HTML to JSON
HTML
JSON
new DOMDocument()
Response Time
GET /home
<body></body>
ajax
<body>content</body>
TIM
E
Response Time
GET /home
<body>content</body>
TIM
E
Solution 1: pre set Store
window.__INITIAL_STATE__ = {
posts: [
{
id: 2,
status: 'full-loaded',
title: 'Some Post',
content: '...'
}
]
};
Solution 2: server rendering
Solution 2: server rendering
HTML
Solution 2: server rendering
new DOMDocument()
HTML
Solution 2: server rendering
new DOMDocument()
HTML
JSON
Solution 2: server rendering
new DOMDocument()
HTML
JSON JavaScript
Solution 2: server rendering
new DOMDocument()
HTML
JSON JavaScript
React App
Solution 2: server rendering
new DOMDocument()
HTML
JSON JavaScript
React App
HTML=
Сonclusion
• Это круто!
• Больше возможностей сделать лучше\хуже
• Все приходится писать самому
• Легко адаптировать к большой нагрузке
The end.