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
EmberJS Introduction - T3CON12
Search
tomdale
October 05, 2012
Technology
7
1.3k
EmberJS Introduction - T3CON12
Introduction to Ember.js, presented at the TYPO3 conference in Stuttgart, Germany.
tomdale
October 05, 2012
Tweet
Share
More Decks by tomdale
See All by tomdale
EmberConf 2019 Keynote
tomdale
1
730
EmberConf 2018 Keynote
tomdale
4
1.8k
Secrets of the DOM Virtual Machine
tomdale
1
1k
EmberCamp London Keynote 2016
tomdale
11
4.8k
Hella Good Ember
tomdale
7
1.2k
EmberConf 2016 Keynote
tomdale
12
2.4k
Introduction to FastBoot - Global Ember Meetup
tomdale
1
160
An Update on FastBoot
tomdale
2
950
Progressive Enhancement is Dead, Long Live Progressive Enhancement
tomdale
1
820
Other Decks in Technology
See All in Technology
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
130
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
E2Eテスト自動化入門
devops_vtj
1
100
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
240
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.5k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
290
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
140
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
510
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.4k
Featured
See All Featured
RailsConf 2023
tenderlove
29
1k
Six Lessons from altMBA
skipperchong
27
3.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Practical Orchestrator
shlominoach
186
10k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Fireside Chat
paigeccino
35
3.2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Making Projects Easy
brettharned
116
6k
Docker and Python
trallard
44
3.3k
Transcript
None
Building Ambitious Web Apps
jQuery
None
Great for manipulating pages. Not so great for building large
apps.
None
None
None
None
You can simulate an application by having the logic run
on the server, and serving a series of pages
None
500ms The problem with this is that your user interface
can only respond as fast as your server—especially bad on flaky 3G connections
Fix this by moving *all* of the logic to the
client. The client has all of the application logic and HTML templates to render in the browser.
{ name: "Christian", occupation: "Engineer" } Instead of sending HTML,
send JSON. Only request data that the client has not yet loaded. Instant response when showing data that has already been fetched.
By decoupling the user interface from the typical HTTP request/
response cycle, you can completely modify how updates are communicated to the client. WebSocket
None
Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web ?
Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web
What do client-side frameworks provide?
User Interface Data Persistence Application Architecture
User Interface HTML+CSS Data Persistence ? Application Architecture ?
User Interface HTML+CSS Data Persistence Application Architecture
User Interface View Data Persistence Model Application Architecture Controller
MVC
Enhance JavaScript
Classes Person = Ember.Object.extend({ firstName: null, lastName: null });
Mixins Speaker = Ember.Mixin.create({ hello: function() { var first =
this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello();
Mixins Speaker = Ember.Mixin.create({ hello: function() { var first =
this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello();
Mixins + super Speaker = Ember.Mixin.create({ hello: function() { var
first = this.get('firstName'), last = this.get('lastName'); return first + " " + last + ": HELLO"; } }); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; } }); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; } }); alert(phil.hello());
Computed Properties Person = Ember.Object.extend({ fullName: function() { return this.get('firstName')
+ ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz" }); alert(yehuda.get('fullName'));
Uniform Access
“ Bertrand Meyer Uniform Access All services offered by a
module should be available through a uniform notation, which does not betray whether they are implemented through storage or through computation.
Namespaces >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >>
Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> No more [object Object]!
Names in Conventions App.Post = DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string')
}); // vs. App.Post = DS.Model.extend({ collectionURL: "/posts", singleURL: "/post", title: DS.attr('string'), body: DS.attr('string') });
Application Structure
Model View Controller
Model View Controller Router
Router •ORMs model persistent state as objects •The router models
application state as objects •Maps the browser‘s URL to app state
Router Private Blog Not Logged In Logged In Index Show
Post Edit Post
Router Private Blog Not Logged In Logged In Index Show
Post Edit Post
Router Private Blog Not Logged In Logged In Index Show
Post Edit Post /login
Router /posts Private Blog Not Logged In Logged In Index
Show Post Edit Post
Router /post/123 Private Blog Not Logged In Logged In Index
Show Post Edit Post
Advantages •Never be in an unknown state •Find errors faster
•Create a map of user actions
TypeError: Cannot call method 'showPhoto' of undefined
Entered state "notLoggedIn" Sent event "enterCredentials" Entered state "loggedIn" Entered
state "loggedIn.index" Sent event "showPost" Entered state "loggedIn.showPost" Could not respond to event "editPost" in state "loggedIn.showPost"
Why Ember?
Ember is not a throwaway weekend project or a corporate-sponsored
project. It is built by and for the Ember community, an open source project first and only.
100% Open Source Built by the Community Ember is not
a throwaway weekend project or a corporate-sponsored project. It is built by and for the Ember community, an open source project first and only.
•Manages complexity •MIT-licensed •More productive •Aggressively rolls in best practices
•Built for the long haul
As patterns solidify, we roll them in.
Sometimes we give them a little push.
Thank you. Questions? http://plus.tomdale.net http://emberjs.com