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
780
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
210
Overview of Orbit.js
dgeb
0
110
Introducing JSON API
dgeb
5
710
Fault Tolerant UX
dgeb
4
950
Ambitious Data Flows with Ember.js and Orbit.js
dgeb
10
1.6k
Other Decks in Programming
See All in Programming
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
ProxyによるWindow間RPC機構の構築
syumai
3
1k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
700
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
TDD 実践ミニトーク
contour_gara
1
290
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
RDoc meets YARD
okuramasafumi
4
160
為你自己學 Python - 冷知識篇
eddie
1
340
旅行プランAIエージェント開発の裏側
ippo012
2
850
AI時代のUIはどこへ行く?
yusukebe
13
7.8k
AIコーディングAgentとの向き合い方
eycjur
0
250
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
It's Worth the Effort
3n
187
28k
Embracing the Ebb and Flow
colly
87
4.8k
Into the Great Unknown - MozCon
thekraken
40
2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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