Successfully reported this slideshow.
Your SlideShare is downloading. ×

WordPress mit React – Mehr als eine Zweckehe?!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 52 Ad

More Related Content

Viewers also liked (20)

Advertisement

Recently uploaded (20)

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

×