SlideShare una empresa de Scribd logo
1 de 30
Descargar para leer sin conexión
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 url
Ember’s MVC ...Parts
Router
Route
ControllerModel Template
ViewEmber-data (or?)
Server
Get appropriate model
and pass to controller
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 displayed
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">
	
  	
  template	
  content
</script>
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
ember-­‐precompile	
  template...	
  [-­‐f	
  OUTPUT_FILE]
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
generators
commonjs modules
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
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.com/guides/

Más contenido relacionado

La actualidad más candente

Rails engines in large apps
Rails engines in large appsRails engines in large apps
Rails engines in large apps
Enrico Teotti
 

La actualidad más candente (20)

Rails Engine :: modularize you app
Rails Engine :: modularize you appRails Engine :: modularize you app
Rails Engine :: modularize you app
 
RoR 101: Session 5
RoR 101: Session 5RoR 101: Session 5
RoR 101: Session 5
 
Web application with mule
Web application with muleWeb application with mule
Web application with mule
 
Ember CLI & Ember Tooling
Ember CLI & Ember ToolingEmber CLI & Ember Tooling
Ember CLI & Ember Tooling
 
Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012
 
RoR 101: Session 3
RoR 101: Session 3RoR 101: Session 3
RoR 101: Session 3
 
Active Admin: Create Your Admin Interface the Easy Way
Active Admin: Create Your Admin Interface the Easy WayActive Admin: Create Your Admin Interface the Easy Way
Active Admin: Create Your Admin Interface the Easy Way
 
Mule with velocity
Mule with velocityMule with velocity
Mule with velocity
 
Rails Engine | Modular application
Rails Engine | Modular applicationRails Engine | Modular application
Rails Engine | Modular application
 
Mulesoft Calling Flow of Other Applications
Mulesoft Calling Flow of Other ApplicationsMulesoft Calling Flow of Other Applications
Mulesoft Calling Flow of Other Applications
 
Namespace less engine
Namespace less engineNamespace less engine
Namespace less engine
 
Client Side MVC with Backbone and Rails
Client Side MVC with Backbone and RailsClient Side MVC with Backbone and Rails
Client Side MVC with Backbone and Rails
 
Rails Engines as a way to Micro services
Rails Engines as a way to Micro servicesRails Engines as a way to Micro services
Rails Engines as a way to Micro services
 
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine Patterns
 
Rails engines in large apps
Rails engines in large appsRails engines in large apps
Rails engines in large apps
 
How to – rest api proxy to soap webservice
How to – rest api proxy to soap webserviceHow to – rest api proxy to soap webservice
How to – rest api proxy to soap webservice
 
Rails Engines
Rails EnginesRails Engines
Rails Engines
 
Introduction to ember js
Introduction to ember jsIntroduction to ember js
Introduction to ember js
 
AMT: Getting Started
AMT: Getting StartedAMT: Getting Started
AMT: Getting Started
 
Cocoa on-rails-3rd
Cocoa on-rails-3rdCocoa on-rails-3rd
Cocoa on-rails-3rd
 

Similar a Production ember getting started

Mvc 4 0_jayant_jindal_28082010
Mvc 4 0_jayant_jindal_28082010Mvc 4 0_jayant_jindal_28082010
Mvc 4 0_jayant_jindal_28082010
Rishu Mehra
 
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
Refresh Events
 
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe
 
ASPNet MVC series for beginers part 1
ASPNet MVC series for beginers part 1ASPNet MVC series for beginers part 1
ASPNet MVC series for beginers part 1
Gaurav Arora
 
Model View Controller
Model View ControllerModel View Controller
Model View Controller
urs_tush
 
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
Kevin Griffin
 

Similar a Production ember getting started (20)

Mvc 4 0_jayant_jindal_28082010
Mvc 4 0_jayant_jindal_28082010Mvc 4 0_jayant_jindal_28082010
Mvc 4 0_jayant_jindal_28082010
 
Ember.js 101 - JSChannel NCR
Ember.js 101 - JSChannel NCREmber.js 101 - JSChannel NCR
Ember.js 101 - JSChannel NCR
 
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
Colin Bowern - The Not So Scary Side Of Asp.Net – Model View Controller In Th...
 
CTTDNUG ASP.NET MVC
CTTDNUG ASP.NET MVCCTTDNUG ASP.NET MVC
CTTDNUG ASP.NET MVC
 
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
 
ASPNet MVC series for beginers part 1
ASPNet MVC series for beginers part 1ASPNet MVC series for beginers part 1
ASPNet MVC series for beginers part 1
 
Asp net mvc series for beginers part 1
Asp net mvc series for beginers part 1Asp net mvc series for beginers part 1
Asp net mvc series for beginers part 1
 
Model View Madness
Model View MadnessModel View Madness
Model View Madness
 
Technoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development servicesTechnoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development services
 
Introduction and Starting ASP.NET MVC
Introduction and Starting ASP.NET MVCIntroduction and Starting ASP.NET MVC
Introduction and Starting ASP.NET MVC
 
RoR 101: Session 4
RoR 101: Session 4RoR 101: Session 4
RoR 101: Session 4
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Model View Controller
Model View ControllerModel View Controller
Model View Controller
 
MVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - IndiandotnetMVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - Indiandotnet
 
L10 Web Programming
L10 Web ProgrammingL10 Web Programming
L10 Web Programming
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
MVC 6 Introduction
MVC 6 IntroductionMVC 6 Introduction
MVC 6 Introduction
 
Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0
 
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
 
A4 from rad to mvc
A4 from rad to mvcA4 from rad to mvc
A4 from rad to mvc
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Production ember getting started