1. Ember JS — назад в
будущее
Андрей Листочкин

2. @listochkin

4. A framework for creating
ambitious web applications

5. MVC

6. Поле боя
Backbone, Knockout, Angular, Ember, React

7. V + + + + +
C + + + +
M + + +
R + + +
+ + +

8. Ember умеет все то же, что
и Angular
и много чего еще

9. Посмотрим на него в деле

10. Data binding

11. <div>
<label>Name:</label>
{{input type="text" value=name
placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}}
and I want to learn Ember!</h1>
</div>

12. Пример 1

13. Компоненты

16. Пример 2

17. Приложение в целом

19. Пример 3

21. MVC

25. Ambitious applications —
url-driven applications

26. URL
Смена URLа - событие

27. URL
Смена URLа - событие
URL - модуль

28. URL
Смена URLа - событие
URL - модуль
URL - глобальное состояние

29. URL
https://myapp.com/posts/1
App.Router.map(function () {
this.resource('posts', function () {
this.resource('post', { path: ':post_id'});
});
});

30. URL
https://myapp.com/posts/1
PostsRoute
PostsController
<posts> {{outlet}}
PostRoute
PostController
<post>

31. URL
var Post = DS.Model.extend({
title: DS.attr('string')
body: DS.attr('string')
published: DS.attr('date')
});

32. URL
var PostsRoute = Ember.Router.extend({
model: function () {
return this.store.find('post');
}
});
var PostsController =
Ember.ArrayController.extend({ … });

33. URL
<ul> {{! posts.hbs }}
{{#each post in model}}
<li>
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul> {{outlet}}

34. URL
var PostRoute = Ember.Router.extend({
model: function (params) {
return this.store.find('post', params.post_id);
}
});
var PostController =
Ember.ObjectController.extend({ … });

35. URL
{{! post.hbs}}
<h2>{{title}}</h2>
<p>{{format-date published}}</p>
<div>
{{body}}
</div>

36. URL
https://myapp.com/posts/1
PostsRoute
PostsController
<posts> {{outlet}}
PostRoute
PostController
<post>

38. Convention over
Configuration

40. 80%

41. defaults + escape hatches

42. Tooling

43. Искать нерешенные проблемы

44. Меньше слов - больше дела

45. Принципы рельс
1. Если это нужно 80% приложений, это
должно быть частью фреймворка.
2. Для нескольких вариантов решения
задачи следует выбрать один по
умолчанию, но позволить его менять.
3. Tooling
4. Искать нерешенные проблемы.
5. Меньше слов - больше дела.

46. Принципы Ember
1. Если это нужно 80% приложений, это
должно быть частью фреймворка.
2. Для нескольких вариантов решения
задачи следует выбрать один по
умолчанию, но позволить его менять.
3. Tooling.
4. Искать нерешенные проблемы.
5. Меньше слов - больше дела.

51. Готовый фреймворк
vs
самописный фреймворк

53. Другие плюшки

54. 1. Кодогенерация
2. DI
3. Поддержка тестирования
4. Интеграция
5. Линейная сложность
6. Promises
7. ES6 Modules
8. Tooling (Broccoli, ESNext, etc.)

55. Performance

57. Tom Dale

60. Rails + Cocoa + Web

62. HTMLBars

63. Flows

64. https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows

66. Модель разработки -
PostgreSQL
Tilde, Yapp, Prototypal, Adepar, Instructure,
etc.

67. Релизы по расписанию

68. Компании
1. Apple
2. Google
3. Yahoo
4. Twitter
5. Microsoft
6. Groupon
7. Square
8. Zendesk
9. Ballanced
10. Nitrous.io
11. USPO
12. DoD
13. NBCNews
14. Netflix

69. Проекты
1. Discource
2. Ballanced
3. Travis CI
4. Ghost

71. Ember JS — назад в
будущее
Андрей Листочкин

72. Ember JS — назад в
будущее
@listochkin
http://tinyurl.com/nitro4andrey