React for WordPress developers
-
Upload
borek-bernard-bernard -
Category
Software
-
view
1.465 -
download
1
Transcript of React for WordPress developers
![Page 1: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/1.jpg)
REACTWordCamp Prague 2016
Borek Bernard
![Page 2: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/2.jpg)
Typical WordPress developer,2016
JS?
![Page 3: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/3.jpg)
THE GOOD OLD DAYS
PHP MySQL
![Page 4: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/4.jpg)
THE GOOD OLD DAYS
PHP MySQL
jQuery
![Page 5: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/5.jpg)
THE GOOD OLD DAYS
PHP MySQL
jQueryBackbone
Underscore.js
![Page 6: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/6.jpg)
PHP MySQLReact API
![Page 7: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/7.jpg)
WHAT IS REACT
![Page 8: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/8.jpg)
• View library from Facebook• Short word for many things (remember “HTML5”?)
webpackBabel
Fluxredux
Relay
flow
GraphQL
npm
![Page 9: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/9.jpg)
POWERED BY REACT
• Parts of Facebook (Messenger, Groups App, …)• Instagram• Netflix• Airbnb• Uber.com• Twitter mobile• Calypso• …
![Page 10: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/10.jpg)
WHY REACT?I S I T J U S T FA S H I O N ?
![Page 11: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/11.jpg)
• Simple, focused•Universal• Backed by big players
![Page 12: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/12.jpg)
REACT NATIVE
![Page 13: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/13.jpg)
REACT FOR WORDPRESS DEVELOPERS
![Page 14: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/14.jpg)
TWO USE CASES
1. More pleasant admin experiences
2. Rich frontend UIs / apps
![Page 15: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/15.jpg)
ADMIN UI’S
• Calypso• VersionPress•MainWP / ManageWP / …
![Page 16: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/16.jpg)
RICH FRONTEND’S
•WordPress as an application platform
“Headless WordPress”• Examples:
–Nomadbase–Mobile apps
![Page 17: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/17.jpg)
DEMO
![Page 18: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/18.jpg)
DEMO RECAP
Source: https://facebook.github.io/react/docs/thinking-in-react.html
![Page 19: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/19.jpg)
OTHER NOTES
![Page 20: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/20.jpg)
CHALLENGES (WP)
1. Themes?1. SEO?2. First-time load?
2. Server-side rendering?“isomorphic apps”
![Page 21: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/21.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/23.jpg)
LEARN JAVASCRIPT, DEEPLY
Matt Mullenweg, State of the Word 2015
![Page 24: React for WordPress developers](https://reader036.fdocuments.in/reader036/viewer/2022062400/58729e1d1a28ab07208b524f/html5/thumbnails/24.jpg)
Thank you!@borekb + awesome guys @versionpress