react for wordpress developers

24
REACT WordCamp Prague 2016 Borek Bernard

Upload: borek-bernard-bernard

Post on 09-Jan-2017

1.467 views

Category:

Software


1 download

TRANSCRIPT

Page 1: React for WordPress developers

REACTWordCamp Prague 2016

Borek Bernard

Page 2: React for WordPress developers

Typical WordPress developer,2016

JS?

Page 3: React for WordPress developers

THE GOOD OLD DAYS

PHP MySQL

Page 4: React for WordPress developers

THE GOOD OLD DAYS

PHP MySQL

jQuery

Page 5: React for WordPress developers

THE GOOD OLD DAYS

PHP MySQL

jQueryBackbone

Underscore.js

Page 6: React for WordPress developers

PHP MySQLReact API

Page 7: React for WordPress developers

WHAT IS REACT

Page 8: React for WordPress developers

• View library from Facebook• Short word for many things (remember “HTML5”?)

webpackBabel

Fluxredux

Relay

flow

GraphQL

npm

Page 9: React for WordPress developers

POWERED BY REACT

• Parts of Facebook (Messenger, Groups App, …)• Instagram• Netflix• Airbnb• Uber.com• Twitter mobile• Calypso• …

Page 10: React for WordPress developers

WHY REACT?I S I T J U S T FA S H I O N ?

Page 11: React for WordPress developers

• Simple, focused•Universal• Backed by big players

Page 12: React for WordPress developers

REACT NATIVE

Page 13: React for WordPress developers

REACT FOR WORDPRESS DEVELOPERS

Page 14: React for WordPress developers

TWO USE CASES

1. More pleasant admin experiences

2. Rich frontend UIs / apps

Page 15: React for WordPress developers

ADMIN UI’S

• Calypso• VersionPress•MainWP / ManageWP / …

Page 16: React for WordPress developers

RICH FRONTEND’S

•WordPress as an application platform

“Headless WordPress”• Examples:

–Nomadbase–Mobile apps

Page 17: React for WordPress developers

DEMO

Page 18: React for WordPress developers

DEMO RECAP

Source: https://facebook.github.io/react/docs/thinking-in-react.html

Page 19: React for WordPress developers

OTHER NOTES

Page 20: React for WordPress developers

CHALLENGES (WP)

1. Themes?1. SEO?2. First-time load?

2. Server-side rendering?“isomorphic apps”

Page 21: React for WordPress developers

CHALLENGES (REACT)• Things are changing•Data flows not entirely solved yet (Flux, redux, relay, …)

but still:It’s a safe bet

Page 22: React for WordPress developers

OPPORTUNITY FOR YOU• 2016:

–React getting stable–WP REST API getting stable and into

core (hopefully)•Opportunity:

–Not many WP devs know JS yet–Kick-ass UIs– Innovative ways to interact with WP

Page 23: React for WordPress developers

LEARN JAVASCRIPT, DEEPLY

Matt Mullenweg, State of the Word 2015

Page 24: React for WordPress developers

Thank you!@borekb + awesome guys @versionpress