Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducing Ember Engines
Search
Dan Gebhardt
January 14, 2016
Programming
4
3.5k
Introducing Ember Engines
An introduction to the ember-engines addon. Presented at the Boston Ember January 2016 meetup.
Dan Gebhardt
January 14, 2016
Tweet
Share
More Decks by Dan Gebhardt
See All by Dan Gebhardt
An Introduction to the JSON:API Specification
dgeb
5
770
Worker power!
dgeb
0
480
Modern Ember
dgeb
0
140
The Future of Data in Ember
dgeb
0
440
Give Apps Online Superpowers by Optimizing them for Offline
dgeb
2
200
Overview of Orbit.js
dgeb
0
110
Introducing JSON API
dgeb
5
710
Fault Tolerant UX
dgeb
4
940
Ambitious Data Flows with Ember.js and Orbit.js
dgeb
10
1.6k
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
310
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
480
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
750
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
150
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
36
13k
20250708_JAWS_opscdk
takuyay0ne
2
130
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
390
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
190
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
410
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Docker and Python
trallard
45
3.5k
Designing Experiences People Love
moore
142
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
Dan Gebhardt @dgeb INTRODUCING EMBER-ENGINES Boston Ember January 2016
None
None
A collaboration between:
None
None
None
Namespacing Isolation Dependency sharing Lazy loading Routing
None
KEY BENEFITS OF ENGINES • Distributed development • Integrated routing
• Ad hoc embedding • Clean boundaries • Lazy loading
ENGINES & ENGINE INSTANCES • Engine • extended by Application
• has a Registry and Initializers • EngineInstance • extended by ApplicationInstance • has a Registry, Container and InstanceInitializers
PRIMARY TYPES OF ENGINES • Routable • define their own
route map • can be mounted at any route • Route-less • can be mounted in any outlet
ENGINE PROJECTS • Standalone addons • In-repo addons
CREATING A STANDALONE ROUTABLE ENGINE
$ ember addon ember-blog-engine Coming soon: ember engine <engine-name>
$ rm -rf bower_components $ bower install --save ember#canary $
bower install
$ ember install ember-engines
import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default
Engine.extend({ modulePrefix: 'ember-blog-engine', Resolver }); addon/engine.js
export default function() { this.route('new'); this.route('post', { path: 'posts/:id' },
function() { this.route('comments'); } ); } addon/routes.js
<h2>Blog</h2> <div class="nav-bar"> {{#link-to "new"}}New Post{{/link-to}} </div> addon/templates/application.hbs
CONSUMING A STANDALONE ROUTABLE ENGINE
$ rm -rf bower_components $ bower install --save ember#canary $
bower install
$ ember install ember-blog-engine
import Ember from 'ember'; import Resolver from 'ember-engines/resolver'; import loadInitializers
from 'ember/load-initializers'; import config from './config/environment'; let App; Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver }); loadInitializers(App, config.modulePrefix); export default App; app/app.js
import Ember from 'ember'; import config from './config/environment'; const Router
= Ember.Router.extend({ location: config.locationType }); Router.map(function() { this.mount('ember-blog-engine', {as: 'blog'}); }); export default Router; app/router.js
<div class="nav-bar"> {{#link-to "blog.new"}}New Post{{/link-to}} </div> app/templates/application.hbs
CREATING A ROUTE-LESS ENGINE
ROUTE-LESS ENGINES • Define Engine (engine.js) • Don't define a
route map (routes.js) • Define an application template (addon/templates/application.hbs)
CONSUMING A ROUTE-LESS ENGINE
<div class="sidebar"> <h3>Chat app</h3> {{mount "ember-chat"}} </div> app/templates/application.hbs
import Ember from 'ember'; export default Ember.Route.extend({ renderTemplate() { this._super(...arguments);
// Mount the chat engine in the sidebar this.mount('ember-chat', { into: 'routeless-engine-demo', outlet: 'sidebar' }); } }); app/routes/application.js
CREATING AN IN-REPO ENGINE
$ ember g in-repo-addon ember-chat Coming soon: ember g in-repo-engine
<name>
DEPENDENCY SHARING
import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default
Engine.extend({ modulePrefix: 'ember-blog-engine', Resolver, dependencies: { services: [ 'store', 'session' ] } }); addon/engine.js
App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, engines: {
emberBlogEngine: { dependencies: { services: [ 'store', {'session': 'user-session'} ] } } } }); app/app.js
WHAT'S NEXT?
COMING SOON • Pushing work upstream • Lazy loading of
engines • Testing, testing, testing ...
TBD • Engine attributes • Namespaced access to engine from
parent • Expanded dependency sharing • Synergies with routable components
References Engines RFC: https://github.com/emberjs/rfcs/pull/10 ember-engines addon: https://github.com/dgeb/ember-engines ember-blog-engine simple demo:
https://github.com/dgeb/ember-blog-engine
Thanks! @dgeb Boston Ember January 2016