Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Ruby is designed to
make programmers
happy
Slide 3
Slide 3 text
Rails is optimized
for programmer
happiness and
beautiful code
Slide 4
Slide 4 text
Happiness
Slide 5
Slide 5 text
Ambitious Web Apps
Developer Happiness
is for
and optimized for
Slide 6
Slide 6 text
• What is an ambitious web app?
• Live Demo!
• Where are we going?
Slide 7
Slide 7 text
Ambitious App
Slide 8
Slide 8 text
What's the Difference?
Slide 9
Slide 9 text
What's the Difference?
It's certainly not the
amount of JavaScript...
Slide 10
Slide 10 text
What's the Difference?
It's certainly not the
amount of JavaScript...
Slide 11
Slide 11 text
What's the Difference?
350 KB 284 KB
It's certainly not the
amount of JavaScript...
Slide 12
Slide 12 text
‟Long Lived Apps”
Slide 13
Slide 13 text
Server Cache Session State
Control State
DOM
Server
Slide 14
Slide 14 text
Model Controller
View
DOM
Server
Slide 15
Slide 15 text
Model
Controller
View
All sessions
Just this session
What is currently visible
Deals with data for:
This
Slide 16
Slide 16 text
Model
Controller
View
All sessions
Just this session
What is currently visible
Deals with data for:
This
I'm not embarassed to use the term
MVC, and I won't reduce it to MV
"Whatever".
Ember focuses heavily on giving you
an architecture that works for
ambitious applications.
We try to keep the conceptual space
as small as possible, but we don't
pretend that your models are "the
JSON you get back from your server"
or that you should just dump all the
code that you call from your templates
on a simple, disorganized object.
Ember embraces OO and inheritance
as a way of sharing and organizing your
code. If you believe that OO is a
mistake, you probably won't like Ember,
and might want to try Angular.
Slide 17
Slide 17 text
Ambitious Web App
Slide 18
Slide 18 text
HTML and CSS
We don't abstract HTML or CSS. We
want people to use the tools they
already know.
Slide 19
Slide 19 text
By making data-bound HTML
templates front-and-center, new
HTML features "just" work with
Ember.
Slide 20
Slide 20 text
≈
By making data-bound HTML
templates front-and-center, new
HTML features "just" work with
Ember.
Slide 21
Slide 21 text
Adding to HTML
We don't want to replace HTML. We
want to add to it. Handlebars
templates are just HTML augmented
with new features.
Slide 22
Slide 22 text
First
Last
{{#each person in people}}
{{person.first}}
{{person.last}}
{{person.signature}}
{{/each}}
We added block syntax to HTML that
works anywhere in HTML, including
tables, so conditionals and loops are
consistent across the board.
Slide 23
Slide 23 text
First
Last
{{person.first}}
{{person.last}}
{{#if person.isTopSalesperson}}
{{person.totalSales}}
{{/if}}
Here's another example, using
conditionals inside a table.
Slide 24
Slide 24 text
URLs
And what's a web
application without
URLs?
Slide 25
Slide 25 text
When people start writing JS apps for the
first time, they're focused on UI and client-
side caching. Even TodoMVC didn't include
routing in its original release!
Slide 26
Slide 26 text
But when you look at polished
applications like Discourse...
Slide 27
Slide 27 text
Or Facebook...
Slide 28
Slide 28 text
Or Twitter...
Slide 29
Slide 29 text
Or even rdio,
these applications have very good URL
support. That's because people expect
web applications to have shareable,
bookmarkable links.
Slide 30
Slide 30 text
People love sharing what they're
looking at, and the URL bar is the
universal way to do that.
Slide 31
Slide 31 text
People love sharing what they're
looking at, and the URL bar is the
universal way to do that.
Slide 32
Slide 32 text
The URL is the UI
of the Web
Slide 33
Slide 33 text
• Bookmarking
• Sharing
• Emailing
• Cmd-Tab
80% of the first 50 emails I
looked at in my inbox
contain URLs.
Slide 34
Slide 34 text
If your app doesn't
have URLs, it's not a
web app
Slide 35
Slide 35 text
Unusual Places
* IMing your friend a link to join you in an FPS game
* Sending someone else who was CCed to an email
a link to the email
* chrome://settings/startup
Don't think about whether to add a URL. You should
have a good reason not to add it.
Slide 36
Slide 36 text
Ambitious Web App
Slide 37
Slide 37 text
Ambitious Web App
MVC
Slide 38
Slide 38 text
Ambitious Web App
Slide 39
Slide 39 text
Ambitious Web App
HTML
URLs
Slide 40
Slide 40 text
We can build it
DEMO TIME
Slide 41
Slide 41 text
The Future
Slide 42
Slide 42 text
Polymer
Slide 43
Slide 43 text
class View extends HTMLElement {
// Ember implementation
}
Slide 44
Slide 44 text
class View extends HTMLElement {
// Ember implementation
}
Subclass HTMLElement
Classes
Slide 45
Slide 45 text
import { View } from "ember/views";
class MyButton extends View {
click() {
alert(`${this.title} was clicked`);
}
hide() {
this.isVisible = false;
}
}
document.register('my-button', MyButton);
Slide 46
Slide 46 text
import { View } from "ember/views";
class MyButton extends View {
click() {
alert(`${this.title} was clicked`);
}
hide() {
this.isVisible = false;
}
}
document.register('my-button', MyButton);
Modules
Classes
Web Components
Object.observe
Slide 47
Slide 47 text
Submit
Slide 48
Slide 48 text
Submit
MDV
Web Component
Slide 49
Slide 49 text
import { hasMany, belongsTo, Model } from "ember/model";
import { property } from "ember/object";
class Article extends Model {
+ hasMany('comments')
+ belongsTo('author')
- property('author.name', 'publishedAt')
get byline() {
return `by ${this.author.name} on
${this.publishedAt}`;
}
}
Slide 50
Slide 50 text
import { hasMany, belongsTo, Model } from "ember/model";
import { property } from "ember/object";
class Article extends Model {
+ hasMany('comments')
+ belongsTo('author')
- property('author.name', 'publishedAt')
get byline() {
return `by ${this.author.name} on
${this.publishedAt}`;
}
}
Annotations (ES7?)
Slide 51
Slide 51 text
Future Proof
We plan to be around for a long time,
so we're making sure that the overall
architecture of Ember fits in with the
direction of the web.
Slide 52
Slide 52 text
Thanks!