Successfully reported this slideshow.
Your SlideShare is downloading. ×

Production ember getting started

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Brief Introduction to Ember
Brief Introduction to Ember
Loading in …3
×

Check these out next

1 of 30 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Production ember getting started (20)

Advertisement

Recently uploaded (20)

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/

×