Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introducing Ember Engines
Dan Gebhardt
January 14, 2016
Programming
4
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
510
Worker power!
dgeb
0
340
Modern Ember
dgeb
0
110
The Future of Data in Ember
dgeb
0
270
Give Apps Online Superpowers by Optimizing them for Offline
dgeb
2
150
Overview of Orbit.js
dgeb
0
54
Introducing JSON API
dgeb
5
550
Fault Tolerant UX
dgeb
4
660
Ambitious Data Flows with Ember.js and Orbit.js
dgeb
10
1.4k
Other Decks in Programming
See All in Programming
Overview of The Modern Data Stack / モダンデータスタック概論
satoshihirose
6
3.2k
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
280
Independently together: better developer experience & App performance
bcinarli
0
160
Amazon ECSのネットワーク関連コストの話
msato
0
620
Node-RED 3.0 新機能紹介
utaani
0
130
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
800
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
110
シェーダー氷山発掘記
logilabo
0
140
GitHub Actions を導入した経緯
tamago3keran
1
420
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
410
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.6k
言語処理ライブラリ開発における失敗談 / NLPHacks
taishii
1
430
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
14
36k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Rails Girls Zürich Keynote
gr2m
86
12k
Gamification - CAS2011
davidbonilla
75
3.9k
Why Our Code Smells
bkeepers
PRO
324
55k
Bootstrapping a Software Product
garrettdimon
296
110k
Designing for Performance
lara
597
63k
A Tale of Four Properties
chriscoyier
149
21k
Docker and Python
trallard
27
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
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