Add another afterContentPaint queue to render ads and schedule other non critical work
MODIFY
README.md
README.md
# ember-app-scheduler
-This addon provides a service to schedule work at different phases of app life cycle.
+Ember batches DOM updates and paints them after every run loop to prevent layout thrashing. This prevents a faster First Meaningful Paint (FMP) because all the content of the page is painted at once. For a large scale application though, some work done on the page like ads, analytics tracking, rendering non critical content, rendering content outside viewport etc. can be deferred to achieve a faster First Meaningful Paint (FMP). This work can be scheduled to run after the First Meaningful Paint and achieve incremental rendering of the page.
+
+This addon provides a service to schedule work in different paint phases of rendering process to get a faster First Meaningful Paint (FMP). It also helps to prioritize and coordinate when the paint happens for different parts of the page.
## Installation
@@ -13,15 +15,21 @@ This addon provides a service to schedule work at different phases of app life c
### Schedule work after the First Route Paint
-The `afterRoutePaint` queue can be used to schedule work after the route
-is painted.
+The `afterFirstRoutePaint` queue can be used to schedule work after the route is first painted. This is useful for scenarios like rendering content outside viewport, rendering non critical content etc.
```javascript
-this.get('scheduler').scheduleWork('afterRoutePaint', () => {
+this.get('scheduler').scheduleWork('afterFirstRoutePaint', () => {
// schedule work
});
```
+The `afterContentPaint` queue can be used to schedule work after all the important content of the page has been painted. This is useful for scenarios like rendering ads, scheduling tracking work, rendering of popup overlays etc.
+
+```javascript
+this.get('scheduler').scheduleWork('afterContentPaint', () => {
+ // schedule work
+});
+```
## Running
* `ember serve`

MODIFY
addon/services/scheduler.js
addon/services/scheduler.js
@@ -23,11 +23,13 @@ class Queue {
reset() {
this.tasks = [];
this.isActive = false;
+ this.afterPaintDeferred = Ember.RSVP.defer();
+ this.afterPaintPromise = this.afterPaintDeferred.promise;
}
}
export default Ember.Service.extend({
- queueNames: ['afterRoutePaint'],
+ queueNames: ['afterFirstRoutePaint', 'afterContentPaint'],
init() {
this._super(...arguments);
@@ -65,6 +67,10 @@ export default Ember.Service.extend({
callback();
}
}
+ this._afterNextPaint()
+ .then(() => {
+ queue.afterPaintDeferred.resolve();
+ });
},
_initQueues() {
@@ -115,7 +121,11 @@ export default Ember.Service.extend({
router.on('didTransition', () => {
this._afterNextPaint()
.then(() => {
- this.flushQueue('afterRoutePaint');
+ this.flushQueue('afterFirstRoutePaint');
+ this._afterNextPaint()
+ .then(() => {
+ this.flushQueue('afterContentPaint');
+ });
});
});
},

ADD
tests/acceptance/deferred-render-test.js
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('Acceptance | deferred render', {
+ beforeEach() {
+ this.scheduler = this.application.__container__.lookup('service:scheduler');
+ this.router = this.application.__container__.lookup('router:main');
+ },
+});
+
+test('visiting /demo', function(assert) {
+ assert.expect(5);
+
+ this.router.on('didTransition', () => {
+ this.scheduler.queues['afterFirstRoutePaint'].afterPaintPromise.then(() => {
+ const deferredElement = find('.deferred-container ul');
+ assert.ok(deferredElement.is(':visible'), 'Deferred content should be visible.');
+ const adElement = find('.ad-container h3');
+ assert.notOk(adElement.is(':visible'), 'Overlay should not be visible.');
+ });
+
+ this.scheduler.queues['afterContentPaint'].afterPaintPromise.then(() => {
+ const deferredElement = find('.deferred-container ul');
+ assert.ok(deferredElement.is(':visible'), 'Deferred content should be visible.');
+ const adElement = find('.ad-container h3');
+ assert.ok(adElement.is(':visible'), 'Overlay should be visible.');
+ });
+ });
+
+ visit('/demo');
+
+ andThen(function() {
+ const adElement = find('.ad-container h3');
+ assert.ok(adElement.is(':visible'), 'Overlay should be visible.');
+ });
+});

MODIFY
tests/dummy/app/components/defer-render.js
tests/dummy/app/components/defer-render.js
@@ -3,14 +3,22 @@ import Ember from 'ember';
export default Ember.Component.extend({
shouldRender: false,
scheduler: Ember.inject.service(),
+ classNames: ['deferred-container'],
init() {
this._super();
- this.get('scheduler').scheduleWork('afterRoutePaint', () => {
+ this._token = this.get('scheduler').scheduleWork('afterFirstRoutePaint', () => {
Ember.run.join(() => {
this.set('shouldRender', true);
this.isRendered = true;
});
});
},
+
+ willDestroyElement() {
+ this._super(...arguments);
+ if (this._token) {
+ this.get('scheduler').cancelWork(this._token);
+ }
+ }
});

ADD
tests/dummy/app/components/right-rail-ad.js
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+ shouldRender: false,
+ scheduler: Ember.inject.service(),
+ classNames: ['ad-container'],
+
+ init() {
+ this._super();
+ this._token = this.get('scheduler').scheduleWork('afterContentPaint', () => {
+ Ember.run.join(() => {
+ this.set('shouldRender', true);
+ this.isRendered = true;
+ });
+ });
+ },
+
+ willDestroyElement() {
+ this._super(...arguments);
+ if (this._token) {
+ this.get('scheduler').cancelWork(this._token);
+ }
+ }
+});

MODIFY
tests/dummy/app/router.js
tests/dummy/app/router.js
@@ -7,7 +7,7 @@ const Router = Ember.Router.extend({
});
Router.map(function() {
- this.route('deferred-content');
+ this.route('demo');
});
export default Router;

RENAME
tests/dummy/app/routes/deferred-content.js
tests/dummy/app/routes/demo.js
@@ -3,18 +3,22 @@ import Ember from 'ember';
export default Ember.Route.extend({
model() {
let people = [];
- for (let i = 1; i <= 10000; i++) {
+ for (let i = 1; i <= 10; i++) {
people.push({
'name': 'Person ' + i
});
}
- return Ember.RSVP.hash({
- people: people
+
+ let cats = [];
+ for (let i = 1; i <= 5; i++) {
+ cats.push({
+ 'name': 'Cat ' + i
});
- },
- actions: {
- didTransition() {
- return true;
}
+
+ return Ember.RSVP.hash({
+ people: people,
+ cats: cats
+ });
}
});

MODIFY
tests/dummy/app/styles/app.css
tests/dummy/app/styles/app.css
+

MODIFY
tests/dummy/app/templates/application.hbs
tests/dummy/app/templates/application.hbs
<h2 id="title">Welcome to app scheduler dummy app</h2>
-
+{{#link-to "index"}}Home{{/link-to}}
+{{#link-to "demo"}}Demo{{/link-to}}
{{outlet}}

ADD
tests/dummy/app/templates/components/right-rail-ad.hbs
+{{#if shouldRender}}
+ {{yield}}
+{{/if}}

RENAME
tests/dummy/app/templates/deferred-content.hbs
tests/dummy/app/templates/demo.hbs
<div class="content">
- <div style="width:50%;float:left">
+ <div style="width:70%;float:left">
<h3>Primary content</h3>
<ul>
{{#each model.people as |person index|}}
<li>Hello, {{person.name}}!</li>
{{/each}}
</ul>
- </div>
- <div style="width:50%;float:left">
- <h3>Deferred content</h3>
+
+ <h3>Secondary content</h3>
{{#defer-render}}
<ul>
- {{#each model.people as |person index|}}
- <li>Hello, {{person.name}}!</li>
+ {{#each model.cats as |cat index|}}
+ <li>Hello, {{cat.name}}!</li>
{{/each}}
</ul>
{{/defer-render}}
</div>
+
+ <div style="width:30%;float:left">
+ {{#right-rail-ad}}
+ <h3>Sample Ads Content</h3>
+ {{/right-rail-ad}}
+ </div>
</div>

Add another afterContentPaint queue to render ads and schedule other non critical work