Ember App Kit & The Ember Resolver

EMBER APP KIT &
THE EMBER RESOLVER
or, “magic isn’t just for wizards (and Rails users) anymore”

Thomas Boyt - Ember NYC 10.24.13

Ember App Kit is boilerplate
for ambitious web
applications

L

HTML
Ambitious web applications have
lots of assets
JavaScript
Emblem
CSS

lots of build tasks
• Compilation

• Concatenation

• Miniﬁcation

• Linting

• Server

• Watcher

structure
• app/
• components/
• controllers/
• helpers/

• public/
• tasks/
• options/
• tests/

• models/

• unit/

• routes/

• integration/

• styles/

• vendor/

• templates/

• Gruntfile.js

• utils/

• bower.json

• views/

• package.json

• app.js

• README.md

• router.js

modules

Why modules?
index.html
1 <html>
2
<head>
3
<title>My Super Awesome App</title>
4
5
<script src="vendor/jquery.js"></script>
6
<script src="vendor/handlebars.js"></script>
7
<script src="vendor/ember.js"></script>
8
</head>
9
<body>
10
<script type="text/handlebars" data-template-name="application">
11
<h2>Welcome to Ember.js</h2>
12
13
{{outlet}}
14
</script>
15
16
<script type="text/handlebars" data-template-name="index">
17
<ul>
18
{{#each}}
19
<li>{{this}}</li>
20
{{/each}}
21
</ul>
22
</script>
23
24
<script src="app.js"></script>
25
</body>
26 </html>

Why modules?
app.js
1 App = Ember.Application.create({});
2
3 App.IndexRoute = Ember.Route.extend({
4
model: function(){
5
return [
6
{firstName: 'Kris', lastName: 'Selden'},
7
{firstName: 'Luke', lastName: 'Melia'},
8
{firstName: 'Alex', lastName: 'Matchneer'}
9
];
10
}
11 });

Why modules?
1
2
3
4
5
6
7

<script
<script
<script
<script
<script
<script
<script

src="js/app.js"></script>
src="js/router.js"></script>
src="js/models/todo.js"></script>
src="js/models/store.js"></script>
src="js/controllers/todos_controller.js"></script>
src="js/controllers/todo_controller.js"></script>
src="js/views/edit_todo_view.js"></script>

global namespace means hard to test, reuse

(this is why angular developers make fun of us!)
1 Todos.TodoController = Ember.ObjectController.extend({
2
// ...
3 });

ES6 Modules: easy & futureproof
foo.js
1 export default = Ember.Object.create({
2
isAwesome: true
3 });

bar.js
1 import foo from "foo";
2
3 console.log(foo.get("isAwesome"))

// true

ES6 Module Transpiler
• https://github.com/square/es6-module-transpiler

• Created

by Yehuda Katz and Brian Donovan

• Already

used in Ember-related projects, including Handlebars,
RSVP.js, and the Ember debug extension

• Transpiles
• Output

runtime

to AMD (RequireJS) or CommonJS modules

is easy to read & debug, no extra obfuscation or

Import statements aren’t cool
• Modules
• Ember

are awesome, but manually wiring them up is not

is built on convention:

• App.PostController
• App.PostRoute
• App.PostView
• post.hbs
• How

can we use similar conventions in a module system?

Introducing the resolver, your
new best friend
• Remember

our awesome
new structure?

• app/
• components/
• controllers/
• post.js

• Each JS ﬁle is a module that
export defaults a Route,
View, Controller, or Model

• models/

• These

• templates/

ﬁles are resolved
through an extra dependency,
called the resolver

• post.js
• routes/
• post.js

• post.hbs
• utils/
• views/
• post.js

Demo time!

(and a disclaimer about syntax)

Things that are resolver-friendly
• Routes

• Models (this.modelFor)

• Controllers (this.controllerFor, needs, {{render}})

• Views ({{view}})

• Components
• Ember

and Helpers (Ember 1.2.0 beta)

Data: Adapters, Serializers, and Transforms

• Templates

Other things you should know
• Testing

is easier: just import what you need (see test
examples that come with Ember App Kit)

• Modules
• JSHint

updates in progress (?)

• Slower
• Work

can have source maps*

builds than rake-pipeline :(

continues!

Ember App Kit & The Ember Resolver

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ember App Kit & The Ember Resolver

Similar to Ember App Kit & The Ember Resolver (20)

Recently uploaded

Recently uploaded (20)

Ember App Kit & The Ember Resolver