WP REST API, And the REST is simple - Reuven Karasik

נדבר על שימת דגש לפריימווקרים של front end בסביבת וורדפרס – למשל, איך להשתמש בREST API של וורדפרס כדי ליצור תבנית one page באמצעות Angular.js. זה נושא מעניין שיכול לשפר מהירות טעינה ושימוש בהרבה אתרי וורדפרס, ומאפשר למפתחי פרונט אנד להמנע מהצורך ללמוד שפה חדשה (PHP) וללמוד פיתוח וורדפרס (על כל הפונקציות השונות, הוקים וכו') אלא להתמקד בפיתוח והעיצוב בתחומים שבהם הם טובים.

Transcript

1. WP REST API
   And the REST is simple*
   Reuven Karasik
   *This pun is good because it’s so bad.
   

   View Slide

2. Who am I?
   • Reuven Karasik
   • Learned HTML when I was 7
   • Using WordPress since version ~ 3
   • An entrepreneur, leading Made in Jerusalem’s Youth Community
   • Lead Front End developer for Chiprix and Crayze
   • Don’t really go to school
   • Just turned 16
   

   View Slide

3. Technologies
   

   View Slide

4. What is the WordPress RESTful API?
   

   View Slide

5. The WordPress Loop in PHP
   

   View Slide

6. The ng-repeat loop with Angular
   

   View Slide

7. Why REST and not the rest?*
   *I’m really sorry, I can’t help it.
   Maybe I need some rest.
   • Cleaner Code
   • Faster Page Loads
   • Automatic Filters
   • No PHP knowledge needed
   • Angular is awesome
   

   View Slide

8. What is the WordPress RESTful API?
   

   View Slide

9. What is the WordPress RESTful API?
   

   View Slide

10. What is the WordPress RESTful API?
    

    View Slide

11. When AngularJS kicks in
    

    View Slide

12. Let’s get coding!
    1. Simple WordPress theme with static HTML
    2. Include AngularJS and create the app
    3. Use $http.get() to get all the posts
    4. Turn the static HTML into ng-repeat loop
    5. Make some static content become dynamic
    6. Add a thumbnail with a PHP trick
    7. Add HTML Sanitization
    

    View Slide

13. Steps forward:
    1. Add navigation, different pages with ng-route
    2. URLs and permalinks
    3. 404 and other error pages
    4. Working with Custom Post Types, Custom Fields etc.
    5. Learn Angular 2.0!
    

    View Slide

14. Resources:
    • http://v2.wp-api.org/ - Official Documentation
    • https://1fix.io/angularjs-wp-rest-api/ - Amazing Tutorials
    • http://goo.gl/2y27I4 - Tuts+ Introduction Article
    • http://github.com/kinging123/tardis - Full Code From Today
    • https://github.com/1fixdotio/angularjs-demo-theme/ - Ready Theme
    

    View Slide

15. Thanks for listening!
    Any questions?
    

    View Slide

16. Reuven Karasik

    iThink@reuven.rocks

    Friend me on Facebook!
    

    View Slide