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. 1.

    JS Libraries & Frameworks with @zgordon let info = {

    twitter: '@zgordon', url: 'javascriptforwp.com' }
  2. 3.

    { let library, framework; } let info = { twitter:

    '@zgordon', url: 'javascriptforwp.com' }
  3. 4.

    Library: Pre-written code you can include and use in your

    app or project let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  4. 5.

    Framework: Design decisions for your code that include libraries let

    info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  5. 7.

    Why We Start w jQuery let info = { twitter:

    '@zgordon', url: 'javascriptforwp.com' }
  6. 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' }
  7. 16.

    Model Examples getPostById( id ); getPostBySlug( slug ); savePost( post

    ); savePostToLocal( posts ); let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  8. 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' }
  9. 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' }
  10. 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' }
  11. 24.

    Backbone Features MV* Models & Collections Views Small Least opinionated

    Little verbose Low learning curve let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  12. 26.

    Marionette Features Better views Auto handles rendering Shadow DOMs Abstracts

    controllers Ships with Radio let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  13. 28.

    Angular Features MVC Largest Easy to start Models & Collections

    Bindings Factories & Services It's a Framework let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
  14. 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' }
  15. 33.

    What Did I Choose? :) let info = { twitter:

    '@zgordon', url: 'javascriptforwp.com' }
  16. 35.

    It All Comes Back to JavaScript let info = {

    twitter: '@zgordon', url: 'javascriptforwp.com' }