Writing Fast Client-Side Code: Lessons Learned from SproutCore

SproutCore and Performance

Wednesday, June 29, 2011

“Albert Einstein

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.

"Fast By Default"

Core Concepts

1. JS is cheaper

than DOMWednesday, June 29, 2011

2. Keep Intermediate State in JS

(and out of DOM)

3. Events Cannot

CoalesceWednesday, June 29, 2011

(prefer cache

clearing)Wednesday, June 29, 2011

4. Materialize Objects

When UsedWednesday, June 29, 2011

(also, proxy, don't copy)

5. Follow Speed

GuidelinesWednesday, June 29, 2011

JS is Cheaper

than DOMWednesday, June 29, 2011

change title

change name

change address

change DOM

change title

change name

change address

change DOM

change title

change name

change address

change DOM

browsereventloop

SCrunloop

nativeevent

handle event

sync bindings

nativeevent

handle event

sync bindings

nativeevent

handle event

sync bindings

JS Code

Event Handling

DOM Code

Keep Intermediate 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

4 items remaining

Mark All Done

Wash dishes

Take out garbage

Make bed

3 items remaining

Mark All Done

Wash dishes

Take out garbage

Make bed

3 items remaining

Mark All Done

Wash dishes

Take out garbage

Make bed

3 items remaining

Mark All Done

Wash dishes

Take out garbage

Make bed

✓✓

0 items remaining

Mark All Done

Wash dishes

Take out garbage

Make bed

✓✓✓✓

item marked done

re-render stats view

Backbone

Backbone

Toggling

Todos.forEach(function(todo) { todo.toggle();});

item marked done

compute remaining

compute done

render stats view

This is foundational

No notion of intermediate

stateWednesday, June 29, 2011

Prefer Coalescing Operations

SproutCore

ArrayController.create({ content: [],

remaining: function() { return this.filterProperty('isDone', false); }.property('@each.isDone')});

Superficially Similar

item marked done

clear remaining cache

compute remaining

render stats view

run loop

intermediate state

Easy to Overlook

SproutCore

ArrayController.create({ content: [],

remaining: function() { return this.filterProperty('isDone', false); }.property('@each.isDone')});

Key:Declare Intent

"Coalesce"

"hello"

"hello"run loop

Not 3 Deferred

ObserversWednesday, June 29, 2011

Materialize Objects

When UsedWednesday, June 29, 2011

Large JSON Structure

{ contacts: [ { name: "Yehuda", ... }, ... x 10,000 ]}

Acre, Julie

Appleseed, Johnny

Arrow, Bob

Astels, David

Atwood, Michael

Axelrod, Peter

Azeroth, Roy

Data Store

(JSON Hashes)

Contact

nametitleaddresstelephone

on demand

Data Store

(JSON Hashes)

Contacts

where company = "GOOGLE"

RecordArray

Ajax Response

Contact

datastatus

{ name: "yehuda" title: "Chief Technologist" address: "690 Spruce" telephone: "718.877.1325"}

No Need to Copy

PropertiesWednesday, June 29, 2011

Again, Foundational

One More Thing

Page Speed

Build Tools

Packed Files

CDN: Versioned

URLsWednesday, June 29, 2011

Expires Header: Same

Stylesheets at the Top

Scripts at the Bottom

Simple Layout

External JS and CSS

Minification

Easier said than done

SproutCore 2.0

OverallFile Size

Matters, but not as much as you think.

Modules w/ Declared

DepsWednesday, June 29, 2011

Lazy Loading Modules

Thank you.

Questions

Writing Fast Client-Side Code: Lessons Learned from SproutCore

Technology

Transcript of Writing Fast Client-Side Code: Lessons Learned from SproutCore

Client Information Client Information

SproutCore - A Next Gen JavaScript Framework

Chapter 4 Communicating with the Juvenile Client … · As you are considering taking on a new case, ask yourself if you have learned anything from any previous or current client

Client Feedback Program - Client Opinions

Client Sales Brochure-Email 1 - naaip.org · with your loved ones your historical information, the lessons you've learned, and the family values you hope they keep. This planning

SproutCore Web Application Development

Lessons Learned from a Client-Focused BD Initiative · 2018. 11. 2. · Lessons Learned from a Client-Focused BD Initiative By Diane Ditzel, CPSM With the stress of billable targets,

SproutCore and Performance

2 TRANSFORMING NURSING THROUGH 3 … · providing data about client/patient outcomes; providing data about the barriers and supports ... first-hand accounts of lessons-learned. After

Communicating With Your Client: Informal Client-Advice ... · PDF fileCommunicating With Your Client: Informal Client-Advice ... Sample closing paragraph in client-advice letter ...

Lessons learned from accident investigation Seminar/IHS - Day 2... · LESSONS LEARNED FROM OTHERS LESSONS LEARNED FROM UAE ... Lessons Learned . ... Dealing with survivors and bereaved

ERM- A Case Study. AGENDA ERM- Business Drivers ERM- Implemented ERM - Approaches Lessons Learned Introduction Client Background.

Lessons Learned From Shifting Waterfall Corporates to Agile · Meet The Players Client A • Large Scope ERP System • Well established team • Culture dependent on department •

ANNUAL REPORT WE’RE CONNECTED - District Energy · District Energy started out simply as a client and provider relationship. As time progressed, and we learned that both organizations

Essential Skills for Ontario’s Trades · Managing client expectations and clarifying course objectives 18 Financial accessibility 19 Enabling Factors 19. 5. Lessons Learned 21 ...

Good Client vs. Bad Client

How to Help Your Client Beat ‘Learned Helplessness’

ANNUAL REPORT WE’RE CONNECTED - District Energy, St ...District Energy started out simply as a client and provider relationship. As time progressed, and we learned that both organizations

Cloud web applications: the new perspective of sproutcore

SproutCore: Amber