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
500
Towards a Systems Approach to Distributed Programming
cmeiklejohn
3
320
Scaling a Startup with a 21st Century Programming Language
cmeiklejohn
0
390
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
190
Just-Right Consistency - Closing the CAP Gap
cmeiklejohn
3
1.3k
A Certain Tendency of the Database Community
cmeiklejohn
0
440
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
SwiftUI Viewの責務分離
elmetal
PRO
0
150
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Immutable ActiveRecord
megane42
0
130
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
WebDriver BiDiとは何なのか
yotahada3
1
140
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
GitHub's CSS Performance
jonrohan
1030
460k
Adopting Sorbet at Scale
ufuk
74
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Done Done
chrislema
182
16k
Documentation Writing (for coders)
carmenintech
67
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Invisible Side of Design
smashingmag
299
50k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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('
[email protected]
') }); 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