Ember.js : Lessons from the trenches

Régis Hanol @ZogStriP

CODING HORROR

Ember.js Lessons from the trenches

Browser Application Framework

Long-lived

Handlebars

<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>

Convention Conﬁguration

this.route('user');

this.route('user'); UserRoute /user

this.route('user'); UserRoute User LOADS /user

this.route('user'); UserRoute User LOADS UserController SETS MODEL  ON /user

this.route('user'); UserRoute User LOADS UserController UserView SETS MODEL  ON RENDERS
/user

this.route('user'); UserRoute User LOADS UserController UserView user.handlebars SETS MODEL  ON
RENDERS BASED ON /user

this.route('user'); UserRoute User LOADS UserController UserView user.handlebars SETS MODEL  ON
RENDERS GETS STATE FROM BASED ON /user

Web Components

{{!-- components/awesome-button —-}} <button class="btn"> <i {{bind-attr class="fa icon"}} />
{{text}} </button>

{{!-- post.handlebars --}} {{awesome-button text="Reply" icon="fa-plus"}} {{!-- components/awesome-button —-}} <button
class="btn"> <i {{bind-attr class="fa icon"}} /> {{text}} </button>

PRELOAD STORE

Browser Server

Browser Server GET /t/awesome-topic/42

Browser Server GET /t/awesome-topic/42 <html>...</html>

Browser Server GET /t/awesome-topic/42 <html>...</html> HTML PARSING

Browser Server GET /t/awesome-topic/42 <html>...</html> GET /styles.css GET /app.js HTML
PARSING

Browser Server GET /t/awesome-topic/42 <html>...</html> GET /styles.css GET /app.js HTML
PARSING BOOT STRAP

Browser Server GET /t/awesome-topic/42 <html>...</html> GET /styles.css GET /app.js GET
/topics/42.json { topic: ... } HTML PARSING BOOT STRAP

Browser Server GET /t/awesome-topic/42 <html>...</html> GET /styles.css GET /app.js GET
/topics/42.json { topic: ... }

# application_controller.rb def store_preloaded(key, json) @preloaded ||= {} @preloaded[key] =
json end

# topics_controller.rb ! @topic = ... ! respond_to do |format|
format.html do store_preloaded("topic", @topic.to_json) render "topic" end ... end

<%- if @preloaded.present? %> <script> <%- @preloaded.each
do |key, json| %> PreloadStore.store("<%= key %>", <%= json %>); <% end %> </script> <%- end %>

model: function() { // try the preload store first return
PreloadStore.get("topic", function() { // hit the API return $.ajax("/topics/" + id + ".json"); }).then(function(result) { // instanciate a Topic return Discourse.Topic.create(result); }); }

COMPUTED PROPERTY MACROS

App.User = Ember.Object.extend({});

var user = App.User.create({ name: “Régis Hanol” }); App.User =
Ember.Object.extend({});

console.log(user.get(“name”)); // Régis Hanol App.User = Ember.Object.extend({}); var user =
App.User.create({ name: “Régis Hanol” });

COMPUTED PROPERTIES

App.User = Ember.Object.extend({ ! staff: function() { return this.get("moderator") ||
this.get("admin"); }.property("moderator", "admin") ! });

App.User = Ember.Object.extend({ ! staff: function() { return this.get("moderator") ||
this.get("admin"); }.property("moderator", "admin") ! }); var mod = App.User.create({ moderator: true });

console.log(mod.get("staff")); // true App.User = Ember.Object.extend({ ! staff: function() {
return this.get("moderator") || this.get("admin"); }.property("moderator", "admin") ! }); var mod = App.User.create({ moderator: true });

CACHED

App.User = Ember.Object.extend({ ! validUsername: function() { return this.get(‘username’).match(/^[a-z0-9]+$/); }.property(‘username’);
! adult: function() { return this.get(‘age’) >= 18; }.property(‘age’); ! french: function() { return this.get(‘country’) === ‘FR'; }.property(‘country’); ! });

App.User = Ember.Object.extend({ ! validUsername: Ember.computed.match('username', /^[a-z0-9]+$/), ! adult: Ember.computed.gte('age',
18), ! french: Ember.computed.equal('country', ‘FR'), ! });

alias and any bool collect defaultTo empty equal filter filterBy
gt gte intersect lt lte map mapBy match max min none not notEmpty oneWay or setDiff sort union uniq

COMPOSABLE

App.User = Ember.Object.extend({ ! adult: Ember.computed.gte('age', 18), ! french: Ember.computed.equal('country',
‘FR’), ! canVote: Ember.computed.and(‘adult’, ‘french’) ! });

RUN LOOP

this.set('productId', 1234); ! this.get('productId'); // new value ! $('#product-id').html() //
still old value!

WTFWHY?

UPDATES are COALESCED

this.set('productId', 1); this.set('productId', 2); this.set('productId', 3); this.set('productId', 4); ! //
DOM is only updated once!

EVENT QUEUE

setTimeout(function () { // do something later! }, 1);

RUN LOOP

sync actions

sync actions render

sync actions render afterRender

sync actions render afterRender destroy

sync actions render afterRender destroy 5 3 4 2 1

this.set('productId', 1234); ! this.get('productId'); // new value ! Ember.run.schedule(‘afterRender’, function()
{ $('#product-id').html() // new value \0/ });

YAGNI*

YAGNI* *usually

App.PostView = Ember.View.extend({ ! // right after it was inserted
in the DOM didInsertElement: function() { var h = this.$().height(); // reflow this.$().height(h * 2); // reflow } ! });

PostView x 50 Read/Write/Read/Write…

100 REFLOWS

DE-INTERLACE

App.PostView = Ember.View.extend({ ! didInsertElement: function() { var element =
this.$(); h = element.height(); // reads ! Ember.run.schedule('afterRender', function() { element.height(h * 2); // writes }); } ! });

2 REFLOWS 50 Reads/50 Writes

VIEW CLOAKING

VIEW HIERARCHY

PERFORMANCE

PERFORMANCE More Views = Slower Rendering

INFINITE SCROLLING

UNLOAD OFF-SCREEN VIEWS

VIEWPORT JUMPING

CLOAKING

- Create a `CloakedView` instance ! - Listen for Window
Scroll events ! = When off-screen # Record and fix height of parent view # Detach child instance ! = When on-screen # Re-attach child instance

github.com/eviltrout/ember-cloaking EMBER-CLOAKING

{{cloaked-collection content=posts cloakView="post"}}  {{collection content=posts itemViewClass=“Discourse.PostView"}}

30% less RAM Running in Production

SEO easiest ﬁrst

PRELOAD all the things!!!

CP MACROS (ab)use them

RUN LOOP schedule/coalesce

CLOAKED VIEWS faster, less RAM

THANKS! emberjs.com discourse.org

Ember.js : Lessons from the trenches

Ember.js : Lessons from the trenches

More Decks by Régis Hanol

Other Decks in Programming

Featured

Transcript