Production EmberBuilding production ember apps

whoamitwitter: @jason_madsen

github: knomedia

Why?

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

TopicsRequirements

PartsRequest Flow

Handlebars TemplatesEmber Build Tools

Ember RequirementsjQuery

HandlebarsEmber

Ember’s MVC ...PartsSame 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?)

ServerConvert url to route

and route to url

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Get appropriate modeland pass to controller

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Represent the databeing persisted

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Represent the data as it is displayed

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Display the controllerdata

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Handle low levelevents ontemplate

Ember’s MVC ...Parts

Router

Route

ControllerModel Template

ViewEmber-data (or?)

Server

Initial request

ConventionConfiguration

aka “prescriptive”

Naming conventions = Ember building boiler plate objects

Handlebars Templatesinline vs pre-compiled

<script  id="entry-­‐template"  type="text/x-­‐handlebars-­‐template">    template  content</script>

Precompiled TemplatesSmaller 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 OptionsManuallyBuild Tool

Manual Pre-Compile

Manual Pre-Compilehttps://github.com/gabrielgrant/node-ember-precompile

npm  install  -­‐g  ember-­‐precompileember-­‐precompile  template...  [-­‐f  OUTPUT_FILE]

Ember Build Tools*ember-railsember-tools

ember-app-kit

*totally not an exhaustive list, just the ones I’ve used

ember-toolsfile organization for sanity

scaffolding for learningprecompile templates

build to single file for deploygenerators

commonjs modules

ember-toolsnpm  install  -­‐g  ember-­‐toolsember  create  my-­‐appcd  my-­‐appember  generate  -­‐-­‐scaffold  person  name:string  age:numberember  buildopen  index.html#  visit  #/people

ember-toolsember  watch

ember-tools generatorshttps://github.com/rpflorence/ember-tools#generator-examples

ember-toolsIncludes it’s own pre-compiler

ember  precompile  -­‐d  src  -­‐f  output.js

Wrap UpUse a build system

Precompile templatesUse Ember Handlebars runtime only

Concat (minify?) your js

http://emberjs.com/guides/