Production ember getting started

  • 650 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
650
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/