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.

WordPress mit React – Mehr als eine Zweckehe?!

773 views

Published on

WordCamp Frankfurt 2016 Session:

WordPress mit REST API als "headless CMS" in Zusammenspiel mit React Frontend

Paul Vincent Beigang

Published in: Software
  • Be the first to comment

  • Be the first to like this

WordPress mit React – Mehr als eine Zweckehe?!

  1. 1. Paul Vincent Beigang // WordCamp Frankfurt 2016 Mehr als eine Zweckehe?! WordPress 
 und React
  2. 2. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Die Einladung 1. Das große Bild: 
 WP & React 2. Zeitgemäßes 
 JavaScript 3. konkreter 
 Einstieg
  3. 3. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Erstmal ihr…
  4. 4. Start with WHY WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  5. 5. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 State of the Word 2015
  6. 6. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 State of the Word 2015
  7. 7. Community ! WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 WordPress
  8. 8. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 WordPress Evolution Blog CMS App Plattform TWEET
 ME
  9. 9. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 /wp-content/
 themes
  10. 10. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Konzept API Client Daten
  11. 11. REST / API WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Application 
 Programming Interface Representational 
 State
 Transfer
  12. 12. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Konzept API Client Daten
  13. 13. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 [Mit-]Spieler
  14. 14. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Konzept API Client Daten
  15. 15. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Konkreter API Daten Client
  16. 16. Nochmal: Weil… WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 „können wir nicht einfach beim Alten bleiben“
  17. 17. JS & API =
 Zukunft WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  18. 18. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Weil • Performance (Reload!) • User Experience • Web, Mobile, Desktop, … als Client
  19. 19. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 What would it look like if we created a new interface to X from scratch?
  20. 20. Überzeugt WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Leg los!
  21. 21. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Frontend API Daten Client
  22. 22. ECMAScript 2015 vorher: ECMAScript 6 / ES6 WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  23. 23. React WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 UI Library „Change Agent“
  24. 24. Components WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 render() { return( HTML ); }
  25. 25. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Thinking in React
  26. 26. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 JSX JavaScript Extension
  27. 27. 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/
  28. 28. Node / JS Package Manager WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  29. 29. JS/X compiler => http://babeljs.io/repl WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  30. 30. Runs compiler, Minifies, lints…
 
 Bundler WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  31. 31. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 React Live Reload => Hot Module Reloading preserves state
  32. 32. Developer Experience WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  33. 33. Demo Time WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  34. 34. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Frontend API Daten Client
  35. 35. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Backend API Daten Client
  36. 36. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 API Terminologie Verbs Get Post Delete … Resources Posts Users Terms …
  37. 37. 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/posts
 wp/v2/posts/28 API base path
  38. 38. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 3 Schritte 
 ins API Paradies 3
  39. 39. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 WordPress Backend 1 2
  40. 40. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 There it is 3
  41. 41. Start the WParty WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 beispielhaft…
  42. 42. Demo Time WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  43. 43. 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
  44. 44. 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
  45. 45. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Mehr WP REST API https://petenelson.io/extending-the-wp-rest-api/
  46. 46. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 https://deliciousbrains.com/creating-mobile-app-wp-api-react-native Mehr React & WP REST API
  47. 47. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 • State Management -> Redux • Server Side Rendering • … What´s next
  48. 48. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Die wirklich wichtige Frage…
  49. 49. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 WordPress 
 und React Mehr als eine Zweckehe?!
  50. 50. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16
  51. 51. WP & React – Mehr als eine Zweckehe? @pauvince - #wcfra `16 Auf 
 Wiedersehen!
  52. 52. 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

×