Ember.js at the East Bay Ruby Meetup

Transcript

2. Ruby is designed to make programmers happy
3. Rails is optimized for programmer happiness and beautiful code
4. Happiness
5. Ambitious Web Apps Developer Happiness is for and optimized for
6. • What is an ambitious web app? • Live Demo! • Where are we going?
7. Ambitious App
8. What's the Difference?
9. What's the Difference? It's certainly not the amount of JavaScript...
10. What's the Difference? It's certainly not the amount of JavaScript...
11. What's the Difference? 350 KB 284 KB It's certainly not the amount of JavaScript...
12. ‟Long Lived Apps”
13. Server Cache Session State Control State DOM Server
14. Model Controller View DOM Server
15. Model Controller View All sessions Just this session What is currently visible Deals with data for: This
16. 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.
17. Ambitious Web App
18. HTML and CSS We don't abstract HTML or CSS. We want people to use the tools they already know.
19. <img src="picture.png"> <audio src="song.mp3"></audio> By making data-bound HTML templates front-and-center, new HTML features "just" work with Ember.
20. <img src="picture.png"> <audio src="song.mp3"></audio> ≈ By making data-bound HTML templates front-and-center, new HTML features "just" work with Ember.
21. 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.
22. <table> <tr> <th>First</tr> <th>Last</th> </tr> {{#each person in people}} <tr> <td>{{person.first}}</td> <td>{{person.last}}</td> </tr> <tr><td colspan=2> {{person.signature}} </td></tr> {{/each}} </table> We added block syntax to HTML that works anywhere in HTML, including tables, so conditionals and loops are consistent across the board.
23. <table> <tr> <th>First</tr> <th>Last</th> </tr> <tr> <td>{{person.first}}</td> <td>{{person.last}}</td> </tr> {{#if person.isTopSalesperson}} <tr><td colspan=2> {{person.totalSales}} </td></tr> {{/if}} </table> Here's another example, using conditionals inside a table.
24. URLs And what's a web application without URLs?
25. 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!
26. But when you look at polished applications like Discourse...
27. Or Facebook...
28. Or Twitter...
29. Or even rdio, these applications have very good URL support. That's because people expect web applications to have shareable, bookmarkable links.
30. People love sharing what they're looking at, and the URL bar is the universal way to do that.
31. People love sharing what they're looking at, and the URL bar is the universal way to do that.
32. The URL is the UI of the Web
33. • Bookmarking • Sharing • Emailing • Cmd-Tab 80% of the first 50 emails I looked at in my inbox contain URLs.
34. If your app doesn't have URLs, it's not a web app
35. 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.
36. Ambitious Web App
37. Ambitious Web App MVC
38. Ambitious Web App
39. Ambitious Web App HTML URLs
40. We can build it DEMO TIME
41. The Future
42. Polymer
43. class View extends HTMLElement { // Ember implementation }
44. class View extends HTMLElement { // Ember implementation } Subclass HTMLElement Classes
45. import { View } from "ember/views"; class MyButton extends View { click() { alert(`${this.title} was clicked`); } hide() { this.isVisible = false; } } document.register('my-button', MyButton);
46. 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
47. <my-button title="{{author.name}}"> Submit </my-button>
48. <my-button title="{{author.name}}"> Submit </my-button> MDV Web Component
49. 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}`; } }
50. 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?)
51. 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.
52. Thanks!