SlideShare a Scribd company logo
1 of 22
Download to read offline
Author:RyanStout
Ember.jsWhyyou’rewritingtoomuchJavaScript
Date:May9th,2013
Wednesday, July 10, 13
•Movesawayfromtheevent->updatemodel
•Auto-UpdatingDOM
•ProvidesaMVCstructureforyourJS
•Stateserializationviaroutesandmodelserializers
•Conventionoverconfiguration
•Doingmorewithlesscode
Aframeworkforcreatingambitiouswebapplications
Ember.js
WhatisEmber.js?
Wednesday, July 10, 13
doesithavestreetcred?
Ember.js
Whoisusingit?
Wednesday, July 10, 13
Ember.js
Howdoesitcompare?
Wednesday, July 10, 13
•ClassesandInstances
•Bindings
•ComputedProperties
Ember.js
CoreConcepts
Wednesday, July 10, 13
ProvidesJSwithalittleobjectorientation
Ember.js
ClassesandInstances
Wednesday, July 10, 13
Bindingskeepthingsinsync
Ember.js
Bindings
Wednesday, July 10, 13
Combinemultiplepropertieswhilestayinginsync
Ember.js
ComputedProperties
Wednesday, July 10, 13
•Templates
•Models
•Controllers
•Views
•Router
Ember.js
PartstoanEmber.jsApplication
Wednesday, July 10, 13
•Templates-todo
•Models-Todo
•Views-TodoView
•Controllers-TodoController
•Router-TodoRoute
Ember.js
EmberNamingConventions
Wednesday, July 10, 13
Emberuseshandlebars.jsfortemplating
Ember.js
Templates
Wednesday, July 10, 13
Emberuseshandlebars.jsfortemplating
Ember.js
Templates
Wednesday, July 10, 13
Ember.js
Templates
Wednesday, July 10, 13
•Presentdataforviewlayertorender
•Proxyforthemodeldata
•Views“context”isusuallyacontroller
•ObjectController,ArrayController
Ember.js
Controllers
Wednesday, July 10, 13
usesthe‘content’propertytoproxyotherobjects
Ember.js
ObjectController
Wednesday, July 10, 13
usesthe‘content’proxytoproxyanarrayofobjects
Ember.js
ArrayController
Wednesday, July 10, 13
•Ember.Object.extend-ifyoudon’tneedtostoreitanywhere
•Ember-Data
Whereyoustoreyourdata
Ember.js
Models
Wednesday, July 10, 13
•SeparatefromEmber.js(sameauthorsthough)
•ProvidesaninterfacesimilartoRail’sActiveRecord
•find,save,associations,etc...
•Makesiteasytosyncwithbackenddata
•Railsember-railsgemprovideseasysync
https://github.com/emberjs/data
Ember.js
Ember-Data
Wednesday, July 10, 13
Viewsareusefulfor:
•Handlinguserevent/dispatchlogic
•Creatingreusablecomponents
•Computedinformationonlyrelevantinthistemplate
•templateNametooverridedefaulttemplate
Onelayerupfromtemplates,areauto-generatedwhennotcreated
Ember.js
Views
Wednesday, July 10, 13
•Responsibleforsettingupcontrollers
•Keepsthestatesyncedwiththeurl
•Canlinkviewsbasedonstate
Mapsapplicationstateintotheurl
Ember.js
TheRouter&Routes
Wednesday, July 10, 13
•emberjs.com-guides
•https://peepcode.com/products/emberjs
•http://net.tutsplus.com/tutorials/javascript-ajax/getting-
into-ember-js/
Ember.js
MoreInfo
Wednesday, July 10, 13
Author:JohnDoe
Thanks!Feelfreetoaskquestions
Date:NewYork,23May2010
Wednesday, July 10, 13

More Related Content

What's hot

Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js
gavinjoyce
 

What's hot (20)

NodeJS and what is actually does
NodeJS and what is actually doesNodeJS and what is actually does
NodeJS and what is actually does
 
Gatsby vs. Next.js
Gatsby vs. Next.jsGatsby vs. Next.js
Gatsby vs. Next.js
 
Azure functions and container instances
Azure functions and container instancesAzure functions and container instances
Azure functions and container instances
 
WebAssembly vs JavaScript: What is faster?
WebAssembly vs JavaScript: What is faster?WebAssembly vs JavaScript: What is faster?
WebAssembly vs JavaScript: What is faster?
 
WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?
 
The RAW stack
The RAW stackThe RAW stack
The RAW stack
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of us
 
Angular - a real world case study
Angular - a real world case studyAngular - a real world case study
Angular - a real world case study
 
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and ProgrammableThe Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
 
Kickstarter Your Node.JS Application
Kickstarter Your Node.JS ApplicationKickstarter Your Node.JS Application
Kickstarter Your Node.JS Application
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJS
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Will paginate and kaminari
Will paginate and kaminariWill paginate and kaminari
Will paginate and kaminari
 
12-2015-Meetup
12-2015-Meetup12-2015-Meetup
12-2015-Meetup
 
Horizontally Scaling Node.js and WebSockets
Horizontally Scaling Node.js and WebSocketsHorizontally Scaling Node.js and WebSockets
Horizontally Scaling Node.js and WebSockets
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
 
Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
Intro to Knockout.JS for Salesforce1
Intro to Knockout.JS for Salesforce1Intro to Knockout.JS for Salesforce1
Intro to Knockout.JS for Salesforce1
 
Performace optimizations and frontend happiness
Performace optimizations and frontend happinessPerformace optimizations and frontend happiness
Performace optimizations and frontend happiness
 

Viewers also liked (7)

Attribute actions
Attribute actionsAttribute actions
Attribute actions
 
Demi-PDF
Demi-PDFDemi-PDF
Demi-PDF
 
From 0 to Ember
From 0 to EmberFrom 0 to Ember
From 0 to Ember
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
 
An introduction to Ember.js
An introduction to Ember.jsAn introduction to Ember.js
An introduction to Ember.js
 
Choosing the Right Framework for Running Docker Containers in Prod
Choosing the Right Framework for Running Docker Containers in ProdChoosing the Right Framework for Running Docker Containers in Prod
Choosing the Right Framework for Running Docker Containers in Prod
 

Similar to EmberJS

General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
OdessaJS Conf
 

Similar to EmberJS (20)

Angularjs cascade
Angularjs cascadeAngularjs cascade
Angularjs cascade
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Intro to Sails.js
Intro to Sails.jsIntro to Sails.js
Intro to Sails.js
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
 
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.jsCome Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
 
Blazor
BlazorBlazor
Blazor
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
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
 
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
node.js in action
node.js in actionnode.js in action
node.js in action
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
 
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
 
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & BrowserifyJavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
 
Quick start with AngularJS
Quick start with AngularJSQuick start with AngularJS
Quick start with AngularJS
 
Decapitating Selenium with JavaScript
Decapitating Selenium with JavaScriptDecapitating Selenium with JavaScript
Decapitating Selenium with JavaScript
 
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
 

More from ryanstout (8)

Neural networks - BigSkyDevCon
Neural networks - BigSkyDevConNeural networks - BigSkyDevCon
Neural networks - BigSkyDevCon
 
Volt 2015
Volt 2015Volt 2015
Volt 2015
 
Isomorphic App Development with Ruby and Volt - Rubyconf2014
Isomorphic App Development with Ruby and Volt - Rubyconf2014Isomorphic App Development with Ruby and Volt - Rubyconf2014
Isomorphic App Development with Ruby and Volt - Rubyconf2014
 
Reactive programming
Reactive programmingReactive programming
Reactive programming
 
Concurrency Patterns
Concurrency PatternsConcurrency Patterns
Concurrency Patterns
 
Practical Machine Learning and Rails Part2
Practical Machine Learning and Rails Part2Practical Machine Learning and Rails Part2
Practical Machine Learning and Rails Part2
 
Practical Machine Learning and Rails Part1
Practical Machine Learning and Rails Part1Practical Machine Learning and Rails Part1
Practical Machine Learning and Rails Part1
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScript
 

Recently uploaded

Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 

EmberJS