Paul Vincent Beigang // WordCamp Frankfurt 2016
Mehr als eine
Zweckehe?!
WordPress 

und React
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
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Erstmal ihr…
Start with
WHY
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
State of the Word 2015
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
State of the Word 2015
Community !
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress Evolution
Blog CMS App Plattform
TWEET

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

themes
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten
REST / API
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Application 

Programming
Interface
Representational 

State

Transfer
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
[Mit-]Spieler
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konzept
API Client
Daten
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Konkreter
API
Daten
Client
Nochmal: Weil…
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
„können wir nicht einfach beim Alten bleiben“
JS & API
=

Zukunft
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Weil
• Performance (Reload!)
• User Experience
• Web, Mobile, Desktop, … als Client
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
What would it look like
if we created a new
interface to X from scratch?
Überzeugt
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Leg los!
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Frontend
API
Daten
Client
ECMAScript 2015
vorher: ECMAScript 6 / ES6
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
React
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
UI Library
„Change Agent“
Components
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
render() { return( HTML ); }
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Thinking in React
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
JSX
JavaScript Extension
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/
Node / JS
Package Manager
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
JS/X compiler
=> http://babeljs.io/repl
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Runs compiler,
Minifies, lints…



Bundler
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
React
Live Reload => Hot Module Reloading
preserves state
Developer
Experience
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Demo Time
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Frontend
API
Daten
Client
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Backend
API
Daten
Client
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
API Terminologie
Verbs
Get
Post
Delete
…
Resources
Posts
Users
Terms
…
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
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
3 Schritte 

ins API Paradies
3
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress Backend
1
2
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
There it is
3
Start the WParty
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
beispielhaft…
Demo Time
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
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
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
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Mehr WP REST API
https://petenelson.io/extending-the-wp-rest-api/
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
https://deliciousbrains.com/creating-mobile-app-wp-api-react-native
Mehr React & WP REST API
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
• State Management -> Redux
• Server Side Rendering
• …
What´s next
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Die wirklich
wichtige Frage…
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
WordPress 

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

Wiedersehen!
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

WordPress mit React – Mehr als eine Zweckehe?!

  • 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: ECMAScript6 / 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 PackageManager 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