Die Präsentation von Paul Vincent bei WordCamp Frankfurt 2016 thematisiert die Synergie zwischen WordPress und React. Sie behandelt zeitgemäßes JavaScript und die Verwendung von APIs, um die Benutzererfahrung zu verbessern, sowie die technische Evolution dieser Plattformen. Zudem werden die Möglichkeiten der Integration von React in die WordPress-Umgebung und die künftige Entwicklung von Anwendungen vorgestellt.

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