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