JS Libraries and Frameworks for WordPress

A WordCamp Miami Talk comparing different JavaScript libraries and frameworks like jQuery, Underscore, Backbone, Angular, and React

Transcript

1. JS Libraries & Frameworks with @zgordon let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
2. javascriptforwp.com let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
3. { let library, framework; } let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
4. Library: Pre-written code you can include and use in your app or project let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
5. Framework: Design decisions for your code that include libraries let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
6. Breaking Down Use Cases let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
7. Why We Start w jQuery let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
8. jQuery Today let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
9. youmightnotneedjquery.com let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
10. Rethinking What We Need let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
11. Functional Utility Libraries let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
12. Underscore & Lo-Dash let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
13. Underscore Examples _.each( posts, p => console.log( item.id ) ); _.map( posts, p => p.title.rendered.toUpperCase() ); _.filter( posts, p => p.author == '1' ); _.pluck( posts, 'title.rendered'); _.sortBy( posts, 'title.renedered' ); _.isNaN(), _.isNull(), _.isUndefined() let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
14. Code Organization let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
15. MVC MV* V let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
16. Model Examples getPostById( id ); getPostBySlug( slug ); savePost( post ); savePostToLocal( posts ); let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
17. View Example page.html: <h1> <a href="/{{ post.slug }}"> {{ post.title.rendered }} </a> </h1> <div class="content"> {{ post.content.rendered }} </div> let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
18. Controller Examples let slug = window.location.pathname; if( 'about' === slug ) { let post = getPostBySlug( about ); displayPost( post, 'page.html' ); } // Event listeners here too.. let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
19. MVC Together - Find out what page we're on - CONTROLLER - Make call to get the page content - CONTROLLER - Get the page content - MODEL - Make the call to display the content - CONTROLLER - Display the page content - VIEW let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
20. MVC MV* V* let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
21. YAFS let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
22. Backbone Angular React let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
23. Backbone let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
24. Backbone Features MV* Models & Collections Views Small Least opinionated Little verbose Low learning curve let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
25. Backbone & Marionette let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
26. Marionette Features Better views Auto handles rendering Shadow DOMs Abstracts controllers Ships with Radio let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
27. Angular let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
28. Angular Features MVC Largest Easy to start Models & Collections Bindings Factories & Services It's a Framework let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
29. React let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
30. React Features Just the view Component based State and props Component lifecycle Shadow DOM Great performance Not a framework Learning curve stages let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
31. Flux & Redux let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
32. What Do I Choose?!* let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
33. What Did I Choose? :) let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
34. It's Also Personal let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
35. It All Comes Back to JavaScript let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
36. Learn JavaScript javascriptforwp.com let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }