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
400
Language Support for Cloud-Scale Distributed Systems
cmeiklejohn
0
540
Towards a Systems Approach to Distributed Programming
cmeiklejohn
3
350
Scaling a Startup with a 21st Century Programming Language
cmeiklejohn
0
410
Practical Evaluation of the Lasp Programming Model at Scale
cmeiklejohn
4
2.8k
Just-Right Consistency - Closing the CAP Gap
cmeiklejohn
3
270
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
460
Other Decks in Programming
See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
testingを眺める
matumoto
1
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.4k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Code Review Best Practice
trishagee
70
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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