Presentation from our first Ember.js SLC meetup. Getting started with a production ember app.

1. Production Ember
Building production ember apps

2. whoami
twitter: @jason_madsen
github: knomedia

3. Why?

4. Why?
http://emberjs.com/guides/

5. Topics
Requirements
Parts
Request Flow
Handlebars Templates
Ember Build Tools

6. Ember Requirements
jQuery
Handlebars
Ember

7. Ember’s MVC ...Parts
Same letters, different responsibilities

8. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server

9. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Initial request

10. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Convert url to route
and route to url

11. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Get appropriate model
and pass to controller

12. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Represent the data
being persisted

13. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Represent the data
as it is displayed

14. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Display the controller
data

15. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Handle low level
events on
template

16. Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Initial request

17. Convention
Configuration
aka “prescriptive”
Naming conventions = Ember building boiler plate objects

18. Handlebars Templates
inline vs pre-compiled
<script
id="entry-­‐template"
type="text/x-­‐handlebars-­‐template">
template
content
</script>

19. Precompiled Templates
Smaller runtime required
no browser compile (faster)

20. Precompiled Templates
... will significantly speed up boot time, as compilation is
the most expensive part of Handlebars.

21. Pre-Compile Options
Manually
Build Tool

22. Manual Pre-Compile

23. Manual Pre-Compile
https://github.com/gabrielgrant/node-ember-precompile
npm
install
-­‐g
ember-­‐precompile
ember-­‐precompile
template...
[-­‐f
OUTPUT_FILE]

24. Ember Build Tools*
ember-rails
ember-tools
ember-app-kit
*totally not an exhaustive list, just the ones I’ve used

25. ember-tools
file organization for sanity
scaffolding for learning
precompile templates
build to single file for deploy
generators
commonjs modules

26. ember-tools
npm
install
-­‐g
ember-­‐tools
ember
create
my-­‐app
cd
my-­‐app
ember
generate
-­‐-­‐scaffold
person
name:string
age:number
ember
build
open
index.html
#
visit
#/people

27. ember-tools
ember
watch

28. ember-tools generators
https://github.com/rpflorence/ember-tools#generator-examples

29. ember-tools
Includes it’s own pre-compiler
ember
precompile
-­‐d
src
-­‐f
output.js

30. Wrap Up
Use a build system
Precompile templates
Use Ember Handlebars runtime only
Concat (minify?) your js
http://emberjs.com/guides/