SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Destaque (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
 

Semelhante a 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
 

Semelhante a 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?
 

Mais de 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
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
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
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
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
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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...
 
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
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"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 ...
 
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
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
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
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 

EmberJS