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.
BuildingJavascriptApps
withtheWordPressJSONAPI
JakeSpurlock
@whyisjake
Hi
WP JSON API
Node.js
Wait,what?
FAST
NODE IS
.
php.JS
WordPress.JS
Chipotle.JS
// Let’s get this burrito bowl going…
chipotlejs.create({
type: 'bowl',
options: {
rice: 'white',
beans: 'pinto',
meat: 'c...
Build an “App”
PHP/Javascript Apps
• PHP
• Javascript
• CSS
• SQL
• MEMCACHED
• CDN - FASTLY
• Mongo
• Express
• Jade
• REACT
• Backbone
...
Front-End
Back-End
Developer
Theconventionalseamsbetweendisciplinesare
fraying,andthesetofskillsnecessaryto
succeedarebroaderandmorenebulousthan
they’v...
Developer
Employee
SHOUTOUTTOTHECLASSICSTOKINGOFFEAR
ABOUTBEINGLEFTBEHINDSOMEARBITRARY
SOCIOTECHNOLOGICALCURVEDEFINEDBYA
BUNCHOF35YEAROLDPETE...
Polymath
Apolymath(Greek:πολυμαθής,polymathēs,"having
learnedmuch")isapersonwhoseexpertisespansa
significantnumberofdifferentsubjec...
Apolymath(Greek:πολυμαθής,polymathēs,"having
learnedmuch")isapersonwhoseexpertisespansa
significantnumberofdifferentsubjec...
Apolymath(Greek:πολυμαθής,polymathēs,"having
learnedmuch")isapersonwhoseexpertisespansa
significantnumberofdifferentsubjec...
10K+
CONCURRENT VIEWERS
WIRED.COM LIVEBLOGS
What about
Tumblr?
RE-EVALUATE LIVEBLOGS
Complexity.
Simple
// Let's loop through each one, and add the response to post meta.
// As we get posts, also push those to the main $posts ...
Caching
header( 'Cache-Control: max-age=15, s-maxage=15, stale-while-revalidate=60' );
REACT
FRONT-END
In addition to taking input data, a
component can maintain internal
state data.
When a component's state data
changes, the...
Is this simple?
Complexity.
EASY WINS
AM I AN IMPOSTER?
Make code modular.
Make code simple.
Sober writers love to use fancy
shit like semicolons. Nobody likes
to see a semicolon. I see sobriety
stains all over writ...
1. Use Short Sentences
2. Use Short first Paragraphs
3. Use Vigorous English
4. Be Positive, Not Negative
5. Never have on...
Code is Poetry
JakeSpurlock
@whyisjake
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Upcoming SlideShare
Loading in …5
×

Building Javascript Apps with the WordPress JSON API – LoopConf 2015

945 views

Published on

In this session you'll learn some of the cool things that we are doing at Wired with Node.js and WordPress. Our editors love the custom admin tools that we have built for writing, and WordPress is an easy gateway for adding content. On the front-end, we want Wired to represent what is both fast, and tech forward. With that goal in mind, we are building a beautiful new Node.js front-end/back-end to deliver the site to our users.

I want to share some of the lessons that we have learned using the WP JSON API as the middleware between WordPress, and Node, and how others can build fast, responsive apps that blend WordPress and Javascript.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Building Javascript Apps with the WordPress JSON API – LoopConf 2015

  1. 1. BuildingJavascriptApps withtheWordPressJSONAPI
  2. 2. JakeSpurlock @whyisjake
  3. 3. Hi
  4. 4. WP JSON API
  5. 5. Node.js
  6. 6. Wait,what?
  7. 7. FAST NODE IS .
  8. 8. php.JS
  9. 9. WordPress.JS
  10. 10. Chipotle.JS
  11. 11. // Let’s get this burrito bowl going… chipotlejs.create({ type: 'bowl', options: { rice: 'white', beans: 'pinto', meat: 'chicken', salsa: [ 'green', 'corn' ], cream: true, cheese: true, guacamole: true, notes: 'Extra guac please!' });
  12. 12. Build an “App”
  13. 13. PHP/Javascript Apps • PHP • Javascript • CSS • SQL • MEMCACHED • CDN - FASTLY • Mongo • Express • Jade • REACT • Backbone • Jquery
  14. 14. Front-End Back-End
  15. 15. Developer
  16. 16. Theconventionalseamsbetweendisciplinesare fraying,andthesetofskillsnecessaryto succeedarebroaderandmorenebulousthan they’vebeenbefore.Thesedays,you’vegotta bearealpolymathtogetahead;you’vegotto beafull-stackemployee. CHRIS MESSINA
  17. 17. Developer
  18. 18. Employee
  19. 19. SHOUTOUTTOTHECLASSICSTOKINGOFFEAR ABOUTBEINGLEFTBEHINDSOMEARBITRARY SOCIOTECHNOLOGICALCURVEDEFINEDBYA BUNCHOF35YEAROLDPETERPANSINSAN FRANCISCO — THISONEHASEXCELLENT CONVERSIONRATES @PHPCEO
  20. 20. Polymath
  21. 21. Apolymath(Greek:πολυμαθής,polymathēs,"having learnedmuch")isapersonwhoseexpertisespansa significantnumberofdifferentsubjectareas;sucha personisknowntodrawoncomplexbodiesof knowledgetosolvespecificproblems. POLYMATH
  22. 22. Apolymath(Greek:πολυμαθής,polymathēs,"having learnedmuch")isapersonwhoseexpertisespansa significantnumberofdifferentsubjectareas;sucha personisknowntodrawoncomplexbodiesof knowledgetosolvespecificproblems. POLYMATH
  23. 23. Apolymath(Greek:πολυμαθής,polymathēs,"having learnedmuch")isapersonwhoseexpertisespansa significantnumberofdifferentsubjectareas;sucha personisknowntodrawoncomplexbodiesof knowledgetosolvespecificproblemscomplexly. POLYMATH DEVELOPERS
  24. 24. 10K+ CONCURRENT VIEWERS WIRED.COM LIVEBLOGS
  25. 25. What about Tumblr? RE-EVALUATE LIVEBLOGS
  26. 26. Complexity.
  27. 27. Simple
  28. 28. // Let's loop through each one, and add the response to post meta. // As we get posts, also push those to the main $posts array. // Reversing this so that we have some better logic for updating posts. // Ideally, you don't need to loop through every page, you could just // update the most recent page or two. for ( $i = 0; $i < $times; $i++ ) { // Fetch a batch of posts $response = $this->fetch_and_parse( $url, $i ); $more_posts = $response['response']['posts']; $more_posts = $this->clean_tumblr_response( $more_posts ); if ( ! empty( $more_posts ) ) { update_post_meta( $post_id, 'liveblog_posts_page_' . $i, $more_posts ); } // Add each of the posts to the main post array. foreach ( $more_posts as $post ) { $posts[] = $post; } }
  29. 29. Caching
  30. 30. header( 'Cache-Control: max-age=15, s-maxage=15, stale-while-revalidate=60' );
  31. 31. REACT FRONT-END
  32. 32. In addition to taking input data, a component can maintain internal state data. When a component's state data changes, the rendered markup will be updated by re-invoking render. REACT IS STATEFUL
  33. 33. Is this simple?
  34. 34. Complexity.
  35. 35. EASY WINS AM I AN IMPOSTER?
  36. 36. Make code modular.
  37. 37. Make code simple.
  38. 38. Sober writers love to use fancy shit like semicolons. Nobody likes to see a semicolon. I see sobriety stains all over writing these days. I think, “Damn, this piece has a chance to be good but the author is too busy looking at their pompous smile in the mirror.” Write under the influence https://medium.com/@3solarmasses/write-under-the-influence-1f6bcb600140
  39. 39. 1. Use Short Sentences 2. Use Short first Paragraphs 3. Use Vigorous English 4. Be Positive, Not Negative 5. Never have only four rules Hemingway’s 4 Rules Ernest Hemingway’s Top 5 Tips for Writing Well http://www.copyblogger.com/ernest-hemingway-top-5-tips-for-writing-well/
  40. 40. Code is Poetry
  41. 41. JakeSpurlock @whyisjake

×