Paul Vincent Beigang // WordCamp Frankfurt 2016
Mehr als eine Zweckehe?!
WordPress und React
WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
Die Einladung1. 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
TWEETME
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 StateTransfer
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
JSXJavaScript 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/postswp/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