WordCamp Frankfurt 2016 Session: WordPress mit REST API als "headless CMS" in Zusammenspiel mit React Frontend Paul Vincent Beigang

1. Paul Vincent Beigang // WordCamp Frankfurt 2016
Mehr als eine
Zweckehe?!
WordPress
und React

2. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Die Einladung
1. Das große Bild:
WP & React
2. Zeitgemäßes
JavaScript
3. konkreter
Einstieg

3. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Erstmal ihr…

4. Start with
WHY
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

5. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
State of the Word 2015

6. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
State of the Word 2015

7. Community !
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress

8. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress Evolution
Blog CMS App Plattform
TWEET
ME

9. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
/wp-content/
themes

10. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten

11. REST / API
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Application
Programming
Interface
Representational
State
Transfer

12. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten

13. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
[Mit-]Spieler

14. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten

15. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konkreter
API
Daten
Client

16. Nochmal: Weil…
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
„können wir nicht einfach beim Alten bleiben“

17. JS & API
=
Zukunft
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

18. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Weil
• Performance (Reload!)
• User Experience
• Web, Mobile, Desktop, … als Client

19. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
What would it look like
if we created a new
interface to X from scratch?

20. Überzeugt
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Leg los!

21. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Frontend
API
Daten
Client

22. ECMAScript 2015
vorher: ECMAScript 6 / ES6
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

23. React
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
UI Library
„Change Agent“

24. Components
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
render() { return( HTML ); }

25. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Thinking in React

26. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
JSX
JavaScript Extension

27. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Mehr React
http://wordpress.tv/2016/05/12/nikolay-bachiyski-react-for-wordpress-developers/
http://wordpress.tv/tag/react/

28. Node / JS
Package Manager
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

29. JS/X compiler
=> http://babeljs.io/repl
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

30. Runs compiler,
Minifies, lints…
Bundler
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

31. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
React
Live Reload => Hot Module Reloading
preserves state

32. Developer
Experience
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

33. Demo Time
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

34. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Frontend
API
Daten
Client

35. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Backend
API
Daten
Client

36. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
API Terminologie
Verbs
Get
Post
Delete
…
Resources
Posts
Users
Terms
…

37. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
API Terminologie 2
Endpoints
/wp-json/wp/v2/posts
/wp-json/wp/v2/posts/28
Routes
wp/v2/posts
wp/v2/posts/28
API base path

38. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
3 Schritte
ins API Paradies
3

39. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress Backend
1
2

40. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
There it is
3

41. Start the WParty
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
beispielhaft…

42. Demo Time
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

43. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
„It's all very simple. But
maybe because it's so
simple, it's also hard.”
–Natsuki Takaya

44. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Mehr WP REST API
http://hs.wpengine.com/torque-wordpress-rest-api-ebook-torque
https://hmn.md/wordpress-rest-api-white-paper

45. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Mehr WP REST API
https://petenelson.io/extending-the-wp-rest-api/

46. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
https://deliciousbrains.com/creating-mobile-app-wp-api-react-native
Mehr React & WP REST API

47. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
• State Management -> Redux
• Server Side Rendering
• …
What´s next

48. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Die wirklich
wichtige Frage…

49. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress
und React
Mehr als eine
Zweckehe?!

50. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16

51. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Auf
Wiedersehen!

52. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Attributions
• Simon Sinek Press Photo https://www.startwithwhy.com/
PressKit.aspx
• Ring Icon by Tammy Chew https://www.iconfinder.com/
tammychew
• Ape evolution https://pixabay.com/de/entwicklung-affe-
mann-%C3%BCbergang-296400/
• State of the Word 2015 Video https://www.slideshare.net/
photomatt/state-of-the-word-2015-wordcamp-us