Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Libraries and Frameworks for WordPress

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
February 21, 2016

JS Libraries and Frameworks for WordPress

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

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

February 21, 2016
Tweet

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' }