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