Sprout core and performance
Upcoming SlideShare
Loading in...5
×
 

Sprout core and performance

on

  • 1,511 views

 

Statistics

Views

Total Views
1,511
Views on SlideShare
1,510
Embed Views
1

Actions

Likes
4
Downloads
29
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Sprout core and performance Sprout core and performance Presentation Transcript

  • SproutCore and Performance
  • “ One should not pursue goals that are easily achieved. One must develop an instinct for what one can just barely achieve through one’s greatest efforts. Albert Einstein
  • "Fast ByDefault"
  • CoreConcepts
  • 1. JS is cheaperthan DOM
  • 2. KeepIntermediate State in JS
  • (and out of DOM)
  • 3. Events CannotCoalesce
  • (prefer cacheclearing)
  • 4. Materialize Objects When Used
  • (also, proxy, dont copy)
  • 5. Follow SpeedGuidelines
  • JS is Cheaperthan DOM
  • change name change DOM change title change DOMchange address change DOM
  • change name change title change DOMchange address
  • change name change title change DOMchange address
  • SC run loopbrowser event loop
  • handle eventnative sync handle eventevent bindings handle event
  • handle eventnative sync handle eventevent bindings handle event
  • handle eventnative sync handle eventevent bindings handle event
  • Event Handling JS Code JS Code JS Code ... DOM Code
  • KeepIntermediate State in JS
  • Case Study
  • “ I want to have a view that displays the total number of items that are marked done. I want to have a feature that can mark all remaining items done.
  • What do you want to do?4 items remaining Mark All Done Wash dishes Take out garbage Make bed Relax
  • What do you want to do?4 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
  • What do you want to do?3 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
  • What do you want to do?3 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
  • What do you want to do?3 items remaining✓ Mark All Done✓ Wash dishes Take out garbage Make bed Relax
  • What do you want to do?0 items remaining✓ Mark All Done✓ Wash dishes✓ Take out garbage✓ Make bed✓ Relax
  • "KVO"
  • item marked donere-render stats view
  • Backbonewindow.AppView = Backbone.View.extend({  initialize: function() {    _.bindAll(this, addOne, addAll, render);    this.input    = this.$("#new-todo");    Todos.bind(add,     this.addOne);    Todos.bind(refresh, this.addAll);    Todos.bind(all,     this.render);    Todos.fetch();  },   render: function() {    var done = Todos.done().length;    this.$(#todo-stats).html(this.statsTemplate({      total:      Todos.length,      done:       Todos.done().length,      remaining:  Todos.remaining().length    }));  }});
  • Backbonewindow.TodoList = Backbone.Collection.extend({  done: function() {    return this.filter(function(todo){      return todo.get(done);    });  },     remaining: function() {    return this.without.apply(this, this.done());  }}); window.Todos = new TodoList;
  • TogglingTodos.forEach(function(todo) {  todo.toggle();});
  • item marked donecompute remaining xN compute donerender stats view
  • This isfoundational
  • No notion ofintermediate state
  • PreferCoalescingOperations
  • SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }.property(@each.isDone)});
  • Superficially Similar
  • intermediate state item marked done xNclear remaining cache run loop compute remaining render stats view
  • Easy toOverlook
  • SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }.property(@each.isDone)});
  • Key:Declare Intent
  • "Coalesce"
  • Wrong
  • A B"hello" "hello"
  • A B"1" "1"
  • A B"12" "12"
  • A B"123" "123"
  • Right
  • A B"hello" "hello"
  • A B"1" "hello"
  • A B"12" "hello"
  • A B"123" "hello"
  • A B run loop"123" "hello"
  • A B"123" "123"
  • Not 3DeferredObservers
  • Materialize ObjectsWhen Used
  • Large JSON Structure{  contacts: [    { name: "Yehuda", ... },    ... x 10,000  ]}
  • Acre, JulieAppleseed, JohnnyArrow, BobAstels, DavidAtwood, MichaelAxelrod, PeterAzeroth, Roy
  • Contact Data Store on demand name title(JSON Hashes) address telephone
  • Ajax Response RecordArray Data Store live Contacts where(JSON Hashes) company = "GOOGLE"
  • { Contact name: "yehuda" title: "Chief Technologist"data address: "690 Spruce"status telephone: "718.877.1325" }
  • No Need to CopyProperties
  • Again,Foundational
  • One More Thing
  • Page Speed
  • Build Tools
  • Packed Files
  • CDN:Versioned URLs
  • ExpiresHeader: Same
  • Stylesheets at the Top
  • Scripts atthe Bottom
  • SimpleLayout
  • External JS and CSS
  • Minification
  • Easier saidthan done
  • SproutCore 2.0
  • Matters, but not as muchas you think. Overall File Size
  • Modules w/ Declared Deps
  • LazyLoadingModules
  • Thank you.
  • Questions