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
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
160
CDK引数設計道場100本ノック
badmintoncryer
2
560
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
PHPカンファレンス関西2025 基調講演
sugimotokei
5
940
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
AI Ramen Fight
yusukebe
0
110
QA x AIエコシステム段階構築作戦
osu
0
140
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Site-Speed That Sticks
csswizardry
10
720
BBQ
matthewcrist
89
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing for Performance
lara
610
69k
We Have a Design System, Now What?
morganepeng
53
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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