Production Ember
Building production ember apps
whoami
twitter: @jason_madsen
github: knomedia
Why?
Why?
http://emberjs.com/guides/
Topics
Requirements
Parts
Request Flow
Handlebars Templates
Ember Build Tools
Ember Requirements
jQuery
Handlebars
Ember
Ember’s MVC ...Parts
Same letters, different responsibilities
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Initial request
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Convert url to route
and route to u...
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Get appropriate model
and pass to c...
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Represent the data
being persisted
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Represent the data
as it is display...
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Display the controller
data
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Handle low level
events on
template
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Initial request
Convention
Configuration
aka “prescriptive”
Naming conventions = Ember building boiler plate objects
Handlebars Templates
inline vs pre-compiled
<script	
  id="entry-­‐template"	
  type="text/x-­‐handlebars-­‐template">
	
 ...
Precompiled Templates
Smaller runtime required
no browser compile (faster)
Precompiled Templates
... will significantly speed up boot time, as compilation is
the most expensive part of Handlebars.
Pre-Compile Options
Manually
Build Tool
Manual Pre-Compile
Manual Pre-Compile
https://github.com/gabrielgrant/node-ember-precompile
npm	
  install	
  -­‐g	
  ember-­‐precompile
embe...
Ember Build Tools*
ember-rails
ember-tools
ember-app-kit
*totally not an exhaustive list, just the ones I’ve used
ember-tools
file organization for sanity
scaffolding for learning
precompile templates
build to single file for deploy
gene...
ember-tools
npm	
  install	
  -­‐g	
  ember-­‐tools
ember	
  create	
  my-­‐app
cd	
  my-­‐app
ember	
  generate	
  -­‐-­‐...
ember-tools
ember	
  watch
ember-tools generators
https://github.com/rpflorence/ember-tools#generator-examples
ember-tools
Includes it’s own pre-compiler
ember	
  precompile	
  -­‐d	
  src	
  -­‐f	
  output.js
Wrap Up
Use a build system
Precompile templates
Use Ember Handlebars runtime only
Concat (minify?) your js
http://emberjs....
Upcoming SlideShare
Loading in …5
×

Production ember getting started

1,102 views
912 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,102
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Production ember getting started

  1. 1. Production Ember Building production ember apps
  2. 2. whoami twitter: @jason_madsen github: knomedia
  3. 3. Why?
  4. 4. Why? http://emberjs.com/guides/
  5. 5. Topics Requirements Parts Request Flow Handlebars Templates Ember Build Tools
  6. 6. Ember Requirements jQuery Handlebars Ember
  7. 7. Ember’s MVC ...Parts Same letters, different responsibilities
  8. 8. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server
  9. 9. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Initial request
  10. 10. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Convert url to route and route to url
  11. 11. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Get appropriate model and pass to controller
  12. 12. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Represent the data being persisted
  13. 13. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Represent the data as it is displayed
  14. 14. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Display the controller data
  15. 15. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Handle low level events on template
  16. 16. Ember’s MVC ...Parts Router Route ControllerModel Template ViewEmber-data (or?) Server Initial request
  17. 17. Convention Configuration aka “prescriptive” Naming conventions = Ember building boiler plate objects
  18. 18. Handlebars Templates inline vs pre-compiled <script  id="entry-­‐template"  type="text/x-­‐handlebars-­‐template">    template  content </script>
  19. 19. Precompiled Templates Smaller runtime required no browser compile (faster)
  20. 20. Precompiled Templates ... will significantly speed up boot time, as compilation is the most expensive part of Handlebars.
  21. 21. Pre-Compile Options Manually Build Tool
  22. 22. Manual Pre-Compile
  23. 23. Manual Pre-Compile https://github.com/gabrielgrant/node-ember-precompile npm  install  -­‐g  ember-­‐precompile ember-­‐precompile  template...  [-­‐f  OUTPUT_FILE]
  24. 24. Ember Build Tools* ember-rails ember-tools ember-app-kit *totally not an exhaustive list, just the ones I’ve used
  25. 25. ember-tools file organization for sanity scaffolding for learning precompile templates build to single file for deploy generators commonjs modules
  26. 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. 27. ember-tools ember  watch
  28. 28. ember-tools generators https://github.com/rpflorence/ember-tools#generator-examples
  29. 29. ember-tools Includes it’s own pre-compiler ember  precompile  -­‐d  src  -­‐f  output.js
  30. 30. Wrap Up Use a build system Precompile templates Use Ember Handlebars runtime only Concat (minify?) your js http://emberjs.com/guides/

×