How to merge WordPress with React for building modern content websites

1. WordPress: React Way
How to merge WordPress with React for building modern content websites

2. About Me
GitHub https://github.com/shtrihstr
Blog
Email
https://www.strikha.com
alex@strikha.com

3. Plan
Current situation in WEB
Single page application
React JS
Use case: Blog on WordPress
Best practices
Examples of features

4. Current situation in WEB
Application Content

12. Single Page Application

13. Classic WEB

14. Classic WEB

15. Classic WEB

16. Classic WEB

17. Single Page App

18. Single Page App

19. Architecture
Data Logic Interface
Backend Frontend

20. Architecture
Data Interface
Backend Frontend
LogicLogic
API

21. ReactJS
Fast and Convenient

22. Fast Rendering

23. Fast Rendering

24. Fast Rendering

25. Fast Rendering

26. Components
Button

27. Components
Button
Form

28. Components
Button
Form
Comments

29. Components
<Button /> <Form /> <Comments />
Render Render Render
Make Requests
Access to Store

30. Components
JSHTML CSS
JSX

31. Use Case: Blog
Code Example
Live Demo
https://github.com/shtrihstr/wp-react-example
https://wp-react-example.strikha.com/

32. JavaScript Libs
Rendering Routing
StoreRequests

33. JavaScript Libs
Rendering:
Routing:
Store:
Requests:
ReactJS
React Router
Redux
Any Ajax lib

34. Store

35. Store

36. Store

37. Store
Component
Store

38. Store
Component
Store
API
Ajax

39. Redux Thunk
Component
Store
API
Thunk

40. WordPress REST API
REST API Plugin
Simple REST API
http://v2.wp-api.org/
https://github.com/shtrihstr/simple-rest-api

41. React + WordPress Tricks

42. Routing
WordPress /2016/01/02/hello-world

43. Routing
WordPress /2016/01/02/hello-world
React App /blog/post/1

44. Routing
React App
WordPress /2016/01/02/hello-world
/2016/01/02/hello-world
React App /blog/post/1

45. Content
ApplicationContent Site

46. ~ 80% is a Content

47. the_content();

48. the_content();
[
{
node: 'h3',
text: 'Hello World!',
},
{
node: 'img',
attr: {
src: 'img.png'
}
}
[

49. Response Time
GET /home Ajax

50. Preset Store
window._initialState = {
posts: [
<?= json_encode( $post ) ?>
]
}
/2016/01/02/hello-world

51. Server Side Rendering

52. Server Side Rendering
WordPress Client
HTML

53. Server Side Rendering
WordPress Client
HTML
NodeJS/V8
HTMLJSON

54. Server Side Rendering
NodeJS locally
PHP V8js
AWS Lambda
https://nodejs.org
https://github.com/phpv8/v8js
https://aws.amazon.com/lambda/details/

55. Features

56. Data Reuse

57. Data Reuse

58. Data Reuse
< 200ms

59. Data Reuse
~ 3ms

60. Data Preloading
Read More

61. Load Next

62. Responsive
Header
Article Aside
Header
Article
Aside

63. Responsive
Header
Article Aside
Header
Article
Aside
Slider

64. Minuses
No possibility to use most of plugins
Time consuming

65. Pluses
Fast
Better user experience

66. Questions?