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.3k
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
640
Worker power!
dgeb
0
430
Modern Ember
dgeb
0
130
The Future of Data in Ember
dgeb
0
380
Give Apps Online Superpowers by Optimizing them for Offline
dgeb
2
180
Overview of Orbit.js
dgeb
0
76
Introducing JSON API
dgeb
5
650
Fault Tolerant UX
dgeb
4
850
Ambitious Data Flows with Ember.js and Orbit.js
dgeb
10
1.5k
Other Decks in Programming
See All in Programming
Module Harmony について
yosuke_furukawa
PRO
3
1.2k
A Sighting of filterA in Typelevel Rite of Passage
philipschwarz
PRO
0
170
GoのWasmでWebRTC P2Pで通信する
ponyo877
0
270
record4s --- Extensible Records for Scala 3, and Domain Modeling with Structural Types
tarao
2
11k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
150
My favorite script, "dsl.rb"
yui_knk
2
560
Make CPU #3 dalance
dalance
1
440
DroidKnights 2024 - Compose UI 컴포넌트 설계와 테스트
wisemuji
0
540
俺の PHP プロファイラの話 PHP スクリプトで PHP 処理系のメモリをのぞき込む
infiniteloop_inc
0
110
OpenAPI 3.1 and Spring-Boot 3 What's New?
bnasslahsen
0
170
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jaguar_imo
1
270
RubyKaigi First Effects 〜はじめてのRubyKaigi〜
satoseri
0
240
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
122
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Scaling GitHub
holman
457
140k
Designing the Hi-DPI Web
ddemaree
276
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
How to train your dragon (web standard)
notwaldorf
77
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
240
The Art of Programming - Codeland 2020
erikaheidi
46
12k
The Cult of Friendly URLs
andyhume
74
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
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