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
Rancher と Terraform
fufuhu
2
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
130
RDoc meets YARD
okuramasafumi
4
160
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
私の後悔をAWS DMSで解決した話
hiramax
4
180
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
TDD 実践ミニトーク
contour_gara
1
270
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
300
OSS開発者という働き方
andpad
5
1.6k
AHC051解法紹介
eijirou
0
640
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
200
コンテキストエンジニアリング Cursor編
kinopeee
1
740
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for humans not robots
tammielis
253
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Language of Interfaces
destraynor
160
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Done Done
chrislema
185
16k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Documentation Writing (for coders)
carmenintech
73
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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