image credits:
http://www.themarketingsage.com/wp-content/uploads/2015/08/about-me-leon-severan-we-buy-houses.jpg
suchitadoshi
suchitadoshi1987
suchita009
suchita009#4368
Gardening
Cricket
Mechanical
Keyboards ❤️
image credits:
https://i.gifer.com/CVU.gif
My recent career journey
My recent career journey
Highlight my work project
Community contributions
Q&A
Know the team their requirements
Server side rendering powered by FastBoot
Build time optimization with Embroider
Roadmap for FastBoot
An enthusiastic Ember developer.
An awesome company that uses Ember JS
Recently upgraded to Ember Octane
image credits:
https://media.slid.es/uploads/1278854/images/8238706/PinClipart.com_company-clipart_11891.png
Faster content to the end user
image credits:
https://i.gifer.com/41C.gif
Faster content to the end user
Improved user engagement
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
Faster content to the end user
Improved user engagement
Improved search indexing
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
https://images.squarespace-cdn.com/content/v1/sign.gif
(SSR)
SSR Solution for Ember JS
ember install ember-cli-fastboot
image credits:
web.dev/vitals/
image credits:
web.dev/vitals/
LCP
app js
api requests
vendor js
HTML + CSS
HTML + CSS
LCP
vendor js
app js
📦
ember install ember-cli-fastboot
ember s
ember install ember-cli-fastboot
EXPERIMENTAL_RENDER_MODE_SERIALIZE=true ember s
"devDependencies": {
"ember-cli": "~3.24.0",
"ember-cli-app-version": "^4.0.0",
"ember-cli-babel": "^7.23.0",
"ember-cli-terser": "^4.0.1",
"ember-concurrency": "^2.0.1",
"ember-data": "~3.25.0",
"ember-data-storefront": "^0.18.0",
"ember-fetch": "^8.0.2",
"ember-load-initializers": "^2.1.2",
}
import RESTAdapter from '@ember-data/adapter/rest';
import FastbootAdapter from 'ember-data-storefront/mixins/fastboot-adapter';
export default class AppAdapter extends RESTAdapter.extend(FastbootAdapter) {
handleResponse(status, headers, payload) {
if (this.isInvalid(...arguments)) {
if (typeof payload === 'string') {
payload = JSON.parse(payload);
}
}
return super.handleResponse(status, headers, payload);
}
}
package.json
adapters/appAdapter.js
Faster content to the end user
Improved user engagement
Improved search indexing
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
https://images.squarespace-cdn.com/content/v1/sign.gif
Faster content to the end user
Improved user engagement
Improved search indexing
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
https://images.squarespace-cdn.com/content/v1/sign.gif
Faster content to the end user
Improved user engagement
Improved search indexing
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
https://images.squarespace-cdn.com/content/v1/sign.gif
Faster content to the end user
Improved user engagement
Improved search indexing
image credits:
https://i.gifer.com/41C.gif
https://qph.fs.quoracdn.net/main-qimg-e980c1173022b1e27482699556c1afce
https://images.squarespace-cdn.com/content/v1/sign.gif
image credits:
https://media2.giphy.com/media/3o6Mbl0kpk4i9G2GCQ/source.gif
media credits:
https://www.nick.com/
a modern build system for EmberJS apps
yarn add --dev @embroider/core @embroider/compat @embroider/webpack @embroider/router
// ember-cli-build.js
const { Webpack } = require('@embroider/webpack');
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function (defaults) {
let app = new EmberApp(defaults, {});
return require('@embroider/compat').compatBuild(app, Webpack, {
staticAddonTestSupportTrees: true,
staticAddonTrees: true,
staticHelpers: true,
staticComponents: true,
splitAtRoutes: [
'editor',
'settings',
'register',
'login',
'articles',
'profile'
],
});
};
// app/router.js
import EmberRouter from '@embroider/router';
import config from 'ember-realworld/config/environment';
export default class Router extends EmberRouter {
location = config.locationType;
rootURL = config.rootURL;
}
Router.map(function () {
this.route('editor', function () {
this.route('edit', { path: ':id' });
});
this.route('settings');
this.route('register');
this.route('login');
this.route('articles', function () {
this.route('article', { path: ':id' });
});
this.route('profile', { path: 'profile/:id' }, function () {
this.route('favorites');
});
});
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { htmlSafe } from '@ember/template';
export default class ArticleContentComponent extends Component {
@tracked marked = null;
constructor() {
super(...arguments);
import('marked').then((module) => {
this.marked = module.default;
});
}
get safeMarkup() {
return htmlSafe(this.marked?.(this.args.article.body));
}
}
Impact of enabling Embroider on a LinkedIn application
Impact of enabling Embroider on a LinkedIn application
Initial JavaScript | Transferred Size | Parsed Size |
---|---|---|
Classic (baseline) | 1.77MB | 9.25MB |
Embroider | 1.15MB(-35%) | 5.03MB(-46%) |
Loading Time | Estimated improvement | Percentage |
---|---|---|
Total page load time | -256ms [-400ms to -140ms] | -6.89% [-10.75% to -3.77%] |
Time to JS execution | -258ms [-342ms to -197ms] | -12.69% [-16.83% to -9.72%] |
cpuThrottleRate: 4, network: fast-3g
Impact of enabling Embroider on a LinkedIn application
Build Time | Cold Start | Warm Start | Live Reload |
---|---|---|---|
Classic (baseline) | 139s | 80s | 3.5s |
Embroider | 59s (-58%) | 58s (-28%) | 0.7s(-80%) |
✂️ Less code shipped to users
🚀 Faster page load time
⚡ Faster build speed
image credits:
https://media2.giphy.com/media/3o6Mbl0kpk4i9G2GCQ/source.gif
image credits:
https://i1.wp.com/www.smartprix.com/bytes/wp-content/uploads/2020/11/ShrillWildFruitfly-size_restricted.gif
image credits:
https://media3.giphy.com/media/IeXz4ljIbZHS1BUkR3/giphy.gif