Slide 1
Slide 1 text
JS Libraries &
Frameworks
with @zgordon
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 2
Slide 2 text
javascriptforwp.com
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 3
Slide 3 text
{ let library, framework; }
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 4
Slide 4 text
Library: Pre-written code you can
include and use in your app or project
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 5
Slide 5 text
Framework: Design decisions for
your code that include libraries
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 6
Slide 6 text
Breaking Down
Use Cases
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 7
Slide 7 text
Why We Start w
jQuery
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 8
Slide 8 text
jQuery
Today
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 9
Slide 9 text
youmightnotneedjquery.com
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 10
Slide 10 text
Rethinking
What We Need
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 11
Slide 11 text
Functional
Utility Libraries
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 12
Slide 12 text
Underscore
& Lo-Dash
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 13
Slide 13 text
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' }
Slide 14
Slide 14 text
Code
Organization
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 15
Slide 15 text
MVC
MV*
V
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 16
Slide 16 text
Model Examples
getPostById( id );
getPostBySlug( slug );
savePost( post );
savePostToLocal( posts );
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 17
Slide 17 text
View Example
page.html:
{{ post.title.rendered }}
{{ post.content.rendered }}
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 18
Slide 18 text
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' }
Slide 19
Slide 19 text
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' }
Slide 20
Slide 20 text
MVC
MV*
V*
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 21
Slide 21 text
YAFS
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 22
Slide 22 text
Backbone
Angular
React
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 23
Slide 23 text
Backbone
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 24
Slide 24 text
Backbone Features
MV*
Models & Collections
Views
Small
Least opinionated
Little verbose
Low learning curve
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 25
Slide 25 text
Backbone &
Marionette
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 26
Slide 26 text
Marionette Features
Better views
Auto handles rendering
Shadow DOMs
Abstracts controllers
Ships with Radio
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 27
Slide 27 text
Angular
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 28
Slide 28 text
Angular Features
MVC
Largest
Easy to start
Models & Collections
Bindings
Factories & Services
It's a Framework
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 29
Slide 29 text
React
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 30
Slide 30 text
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' }
Slide 31
Slide 31 text
Flux & Redux
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 32
Slide 32 text
What Do I
Choose?!*
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 33
Slide 33 text
What Did I
Choose? :)
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 34
Slide 34 text
It's Also Personal
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 35
Slide 35 text
It All Comes Back to
JavaScript
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }
Slide 36
Slide 36 text
Learn
JavaScript
javascriptforwp.com
let info = { twitter: '@zgordon', url: 'javascriptforwp.com' }