Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WP 4.7 & React — A perfect marriage?

807 views

Published on

Experiences in building a pure, feature-rich WordPress theme with React

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WP 4.7 & React — A perfect marriage?

  1. 1. Plastical Sagl Corso S. Gottardo 14, cp 1512 6830 Chiasso 1 Switzerland tel.: +41 (0) 91 9675780 info@plastical.com plastical.com WP 4.7 & React
 A perfect marriage? Ryan Vannin — 12.04.2017 FrontEnders Ticino @ DOS Group
  2. 2. Ryan Vannin MSc. com., PhD Informatics drop-out, soon-to-become lawyer. Owner at Plastical, organiser of Hack the City. Tech and innovation passionate. Below-the-average coder. Runner. Follow me: @ryanvannin
  3. 3. Agenda - Ideal vs. real world
 - All is not lost! WP 4.7 + React
 - Basic setup 
 - Data fetching with Redux + Ducks
 - Routing (React Router 4.0 alpha) + hacks
 - Multi-language with“intl”
 - Wrap-up
 - Q&A
  4. 4. Ideal vs. real world
  5. 5. In an ideal world I’m using the latest and fanciest technology available…
  6. 6. … running on great infrastructure or on customised self- owned “metal”!
  7. 7. In a few words… … Y’all know what? I’m a full-stack developer, you a**holes!
  8. 8. In the real world Crazy requirements
 (Does coffee heating?… And don’t forget cats’ gifs!) Tech constraints
 (LAMP stack, wtf!) Impossible deadlines and limited budget
 (Duh, was I supposed to pay you for the website? Visibility wasn’t enough?)
  9. 9. Let’s be honest here… … this stuff won’t go away anytime soon!
  10. 10. All is not lost!
 Wordpress 4.7 + React
  11. 11. Let’s put them together… +
  12. 12. Wordpress 4.7 WP Rest API made it to the core in the 4.7 update of WP… Good news:
 no need to install a plug-in… Bad news:
 to fully benefit of its endpoints, you have to build your own, custom theme!
  13. 13. Endpoints Some examples: …/wp-json/wp/v2/posts …/wp-json/wp/v2/pages …/wp-json/wp/v2/users …/wp-json/wp/v2/events
  14. 14. React … Seriously???
  15. 15. … Ok, not 100% true, but I had to use some cool marketing jargon “Build a pure, beautiful and feature-rich JS theme and never look back again to the legacy PHP spaghetti-code Wordpress throws in”
  16. 16. Example of a complex WP theme Posts and single pages (usual stuff) Multi-language (requires a plug-in, e.g. WPML) Events (+ management) via custom post types List users and custom author pages with details Contact form(s) with validation and file upload Beautiful, responsive and fast theme
  17. 17. Basic setup
  18. 18. Localhost Usual stuff to run WP locally,
 i.e. MAMP (PRO) or via Terminal with LAMP stack 
 … And, no, Webpack Dev Server won’t do the task!
  19. 19. Folder structure
 (usually in /wp-content/themes/your-theme) … footer.php functions.php header.php index.php package.json webpack.config.js … — bin/ (for additional PHP config files) — less/ (or sass, it’s up to you) — src/ (our main react folder)
 Yep! React stuff mixed up with PHP!!! However, on deploy these go away
  20. 20. functions.php (1) Let’s first configure WP to talk to React https://github.com/plastical/react-theme/blob/master/ functions.php
  21. 21. functions.php (2) function plastical_scripts() { $bundleDir = ($isWithinTemplate) ? get_template_directory_uri() : ‘/ assets'; wp_enqueue_style('plastical-style', $bundleDir . ‘/build/bundle.css'); wp_enqueue_script(PLASTICAL_VENDOR, $bundleDir . '/build/ vendor.bundle.js', array('jquery'), PLASTICAL_VERSION, true); wp_enqueue_script(PLASTICAL_APP, $bundleDir . '/build/bundle.js', array('jquery'), PLASTICAL_VERSION, true); … }
  22. 22. index.php <?php get_header(); ?> <div id="root"></div> <?php get_footer(); ?> No sidebar.php?
 No, unless you want to turn it into a nightmare…
  23. 23. package.json Usual stuff {
 ….
 “intl”: “ˆ1.2.5”
 …
 "react-intl": "^2.1.5", "react-intl-redux": "^0.2.0",
 …
 “react-router”: “4.0.0-alpha.6”
 …
 
 "wordpress-query-comments": "^1.1.0", "wordpress-query-custom-posts-events": "^0.2.0", "wordpress-query-menu": "^1.1.0", "wordpress-query-page": "^1.1.0", "wordpress-query-page-children": "^0.1.4", "wordpress-query-posts": "^1.1.1", "wordpress-query-term": "^1.1.0", "wordpress-query-users": "^0.2.0"
 } + Ducks!!!
 Back to this stuff later
  24. 24. Our app structure
 (/src) — components/ — data/ — i18n/ index.js (app entry point) reducer.js — routing/ structure.js — utils/ More about this folder later…
  25. 25. webpack.config.js (v 2.0) Again, usual stuff… module.exports = { entry: { assets: './src/index.js', vendor: ['react','react-dom','react-router','redux'] }, output: { path: path.join(__dirname, '../../../assets/build'), filename: 'bundle.js' }, resolve: { extensions: ['.js', '.jsx'], alias: { data: path.join(__dirname, 'src/data'), components: path.join(__dirname, 'src/components'), utils: path.resolve(__dirname, 'src/utils'), }, modules: ['node_modules', ‘src'] }, …. Remember? all the stuff goes under /assets/… +
  26. 26. Data fetching with Redux + Ducks
  27. 27. Redux Redux will hold the application state in its store, including data fetched from the WP Rest API endpoints
 
 https://github.com/plastical/react-theme/blob/master/ src/store.js PS.: nothing fancy here…
  28. 28. Ducks??? “Ducks” are redux modules containing single-purpose constants, actions and reducers.
 
 https://github.com/plastical/react-theme/blob/master/ src/reducer.js Ex.: https://github.com/plastical/wordpress-query- users
  29. 29. Fetching and data persistence
  30. 30. Routing (React Router 4.0 alpha) + hacks
  31. 31. React Router 4.0 alpha Component based, but unstable (e.g., Match vs. Route) Not working with “react-router-redux”, had to build my own sync… Huge mess with “intl", “react-intl” and “react-redux-intl”…
 
 https://github.com/plastical/react-theme/blob/master/ src/routing/index.js PS.: version > 4.0 beta? Need contributions!
  32. 32. Routing? Welcome some ugly hacks… index.js https://github.com/plastical/react-theme/blob/master/ src/index.js structure.js https://github.com/plastical/react-theme/blob/master/ src/structure.js External URLs + click capture… jQuery!!!
  33. 33. Multi-language with“intl”
  34. 34. Intl Needs i18n https://github.com/plastical/react-theme/tree/master/ src/i18n Import in component as decorator: import { injectIntl } from 'react-intl'; … { … <h1> {props.intl.formatMessage({ id: 'home.latest_news' })} </h1> … } export default injectIntl( connect((state, ownProps) => { … })(Home) ); Translations as messages: …
 {
 …
 ‘home.latest_news’: ‘Latest news’,
 …
 }
  35. 35. WP multi language with React? Needs WPML (or a similar plug-in) To fully recognise new locale a browser reload is needed (onClick) Translation strings are hardcoded, thus wasn’t easier an other solution (e.g. inject directly from PHP)?
  36. 36. Wrap-up
  37. 37. Some cool stuff… WP 4.7 + React: excellent combination to build an almost pure JS theme Blazing fast (once your bundles are in cache) Using endpoints opens up endless possibilities with a few specialised components, e.g. search and contact
  38. 38. Some less cool stuff… (1) You HAVE to know both JS and PHP in order to benefit of both words You have to configure WP to use the WP Rest APIs, otherwise it doesn’t work as expected (e.g. menus!!!) Overcomplicated, over bloated Simple out-of-the-box features do not work without tweaks (ex. active state on navigation)
  39. 39. Some less cool stuff… (2) Multi language is just a nightmare, as well as routing (you need to manipulate the DOM — not the virtual, but the real — to detect clicks or onEnters…) You are stuck with a LAMP stack, unless you fetch data from outside… In production, simplest changes (e.g., string translations or add/modify a className) require “npm run build”, while in PHP just edit the .php file
  40. 40. Some less cool stuff… (3) Bundle size ~1MB!!! (ok, can cache it and gzip it, but what’s the point?)
  41. 41. The result Site in production:
 http://dev.agire.ch Source code:
 https://github.com/plastical/react-theme
  42. 42. Q&As
  43. 43. Plastical Sagl Corso S. Gottardo 14, cp 1512 6830 Chiasso 1 Switzerland tel.: +41 (0) 91 9675780 info@plastical.com plastical.com Thanks
 @ryanvannin / ryan@plastical.com

×