Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Ambitious Web Applications With Ember.js
Search
Christopher Meiklejohn
November 09, 2012
Programming
15
1.3k
Building Ambitious Web Applications With Ember.js
Web Unleashed 2012 Presentation
Christopher Meiklejohn
November 09, 2012
Tweet
Share
More Decks by Christopher Meiklejohn
See All by Christopher Meiklejohn
Towards a Solution to the Red Wedding Problem
cmeiklejohn
0
380
Language Support for Cloud-Scale Distributed Systems
cmeiklejohn
0
520
Towards a Systems Approach to Distributed Programming
cmeiklejohn
3
330
Scaling a Startup with a 21st Century Programming Language
cmeiklejohn
0
400
Practical Evaluation of the Lasp Programming Model at Scale
cmeiklejohn
4
2.7k
Just-Right Consistency - Closing the CAP Gap
cmeiklejohn
3
250
Declarative, Convergent, Edge Computation
cmeiklejohn
1
200
Just-Right Consistency - Closing the CAP Gap
cmeiklejohn
3
1.3k
A Certain Tendency of the Database Community
cmeiklejohn
0
450
Other Decks in Programming
See All in Programming
エンジニア未経験が最短で戦力になるためのTips
gokana
0
250
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.4k
Develop Faster With FrankenPHP
dunglas
2
3.1k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.3k
Unlock the Potential of Swift Code Generation
rockname
0
210
フロントエンドテストの育て方
quramy
11
2.9k
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
270
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
300
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
170
The Weight of Data: Rethinking Cloud-Native Systems for the Age of AI
hollycummins
0
250
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7.1k
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
2k
Featured
See All Featured
Building an army of robots
kneath
304
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Practical Orchestrator
shlominoach
186
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
630
KATA
mclloyd
29
14k
Done Done
chrislema
183
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
Building Ambitious Web Applications With Ember.js Christopher Meiklejohn @cmeik Friday,
November 9, 12
An Introduction To Ember.js Christopher Meiklejohn @cmeik Friday, November 9,
12
@cmeik Friday, November 9, 12
Basho Friday, November 9, 12
What is Ember.js? Friday, November 9, 12
MVC Structure Friday, November 9, 12
Data Bindings Friday, November 9, 12
Computed Properties Friday, November 9, 12
Data Bound Declarative Templates Friday, November 9, 12
State Managers Friday, November 9, 12
Declarative Router Friday, November 9, 12
Run Loop Friday, November 9, 12
Ember Data Friday, November 9, 12
Let’s get started! Friday, November 9, 12
Object Model Friday, November 9, 12
Objects and Classes Friday, November 9, 12
App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var
person = App.Person.create(); person.say("Hello Joe."); Friday, November 9, 12
Observers Friday, November 9, 12
App.Person = Ember.Object.extend({ fullNameChanged: function() { console.log('fullNameChanged!'); }.observes('fullName') }); Friday,
November 9, 12
App.Person = Ember.Object.extend({ childMarried: function() { console.log('ERMAHGERD!'); }.observes('children.@each.isMarried') }); Friday,
November 9, 12
Mixins Friday, November 9, 12
App.Editable = Ember.Mixin.create({ edit: function() { this.set('isEditing', true); }, isEditing:
false }); App.CommentView = Ember.View.extend( App.Editable, { template: Ember.Handlebars.compile('...') }); Friday, November 9, 12
Computed Properties Friday, November 9, 12
App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Friday, November 9, 12
Controllers Friday, November 9, 12
Controllers ObjectController ArrayController Controller Friday, November 9, 12
Ember.ArrayController.create({ content: [object1, object2] }); Ember.ObjectController.create({ content: object3 }); Friday,
November 9, 12
Controllers ObjectController ArrayController Controller Friday, November 9, 12
Controllers ObjectProxy ArrayProxy Friday, November 9, 12
App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Friday, November 9, 12
App.presidentController = Ember.ObjectController.create({ contentBinding: 'App.president' }); App.presidentController.get('fullName'); Friday, November 9,
12
Views Friday, November 9, 12
App.PresidentView = Ember.View.create({ templateName: 'president', contentBinding: 'App.president' }); <script type='text/x-handlebars'
data-template-name='president'> {{fullName}} </script> Friday, November 9, 12
Run Loop Deferred rendering; change propagation; coalescing. Friday, November 9,
12
App.president = Ember.Object.create({ firstName: "George W.", lastName: "Bush", fullName: function()
{ return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.set('firstName', 'Barack'); App.president.set('lastName', 'Obama'); Friday, November 9, 12
The Router and Application Structure Friday, November 9, 12
Application as a series of states Friday, November 9, 12
Application as a series of states hierarchy of views Friday,
November 9, 12
Friday, November 9, 12
Friday, November 9, 12
Friday, November 9, 12
Friday, November 9, 12
Nested Outlets Outlet as Controller/View Pair Friday, November 9, 12
<div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}}
</div> </div> {{outlet scorecards}} {{outlet testResults}} {{outlet scorecard}} Friday, November 9, 12
<div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}}
</div> </div> {{outlet scorecards}} {{outlet}} Friday, November 9, 12
State Machine Application as a series of states and transitions.
Friday, November 9, 12
GiddyUp.Router = Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', redirectsTo:
'projects.index' }), // next slide }) }); Friday, November 9, 12
projects: Ember.Route.extend({ route: '/projects', // next slide index: Ember.Route.extend({ route:
'/' }), show: Ember.Route.extend({ route: '/:project_id' }); }); Friday, November 9, 12
connectOutlets: function(router, context) { router.get('applicationController'). connectOutlet('projects', 'projects', GiddyUp.Project.find()); }, Friday,
November 9, 12
Serialization The URL as a serialization of application state. Friday,
November 9, 12
projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show:
Ember.Route.extend({ route: '/:project_id' }); }); /projects/ Friday, November 9, 12
projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show:
Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12
serialize: function(router, context) { return context.get('id'): } Friday, November 9,
12
Deserialization Deserialize the URL to a position in the state
chart. Friday, November 9, 12
projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show:
Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12
deserialize: function(router, params) { var projectId = params.project_id; return GiddyUp.Project.find(projectId);
} Friday, November 9, 12
Template Actions Target the router with actions. Friday, November 9,
12
projects: Ember.Route.extend({ route: '/projects', showProject: Ember.Router. transitionTo('projects.show'), index: Ember.Route.extend({ route:
'/' }), show: Ember.Route.extend({ index: '/:project_id' }) }); Friday, November 9, 12
<script type='text/x-handlebars' data-template-name='project'> <a {{action showProject this href=true}} >{{name}}</a> </script>
Friday, November 9, 12
Ember-Data And Persistence Friday, November 9, 12
Abstract Adapters REST, IndexedDb, etc. Friday, November 9, 12
Asynchronous Proxy; asynchronously populated; lazily loaded. Friday, November 9, 12
Identity Map Client side, in memory-cache. Friday, November 9, 12
Transactional Accumulate updates; commit and rollback. Friday, November 9, 12
State Managers Lifecycle management; isDirty, isClean, isSaving Friday, November 9,
12
App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), children:
DS.hasMany('App.Child'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var person = App.Person.find(1); Friday, November 9, 12
Tooling Friday, November 9, 12
QUnit https://github.com/emberjs/bootstrap Friday, November 9, 12
Ember-Rails https://github.com/emberjs/ember-rails Friday, November 9, 12
Iridium https://github.com/radiumsoftware/iridium Friday, November 9, 12
Rebar Plugins https://github.com/cmeiklejohn Friday, November 9, 12
Questions? Friday, November 9, 12