Upload
andrey-listochkin
View
534
Download
2
Embed Size (px)
Citation preview
Ember JS — назад в будущее
Андрей Листочкин
@listochkin
A framework for creating ambitious web applications
MVC
Поле бояBackbone, Knockout, Angular, Ember, React
V + + + + +
C + + + +
M + + +
R + + +
+ + +
Ember умеет все то же, что и Angular
и много чего еще
Посмотрим на него в деле
Data binding
<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>
Пример 1
Компоненты
Пример 2
Приложение в целом
Пример 3
MVC
Ambitious applications — url-driven applications
URL
Смена URLа - событие
URL
Смена URLа - событие
URL - модуль
URL
Смена URLа - событие
URL - модуль
URL - глобальное состояние
URL
https://myapp.com/posts/1
App.Router.map(function () { this.resource('posts', function () { this.resource('post', { path: ':post_id'}); });});
URL
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
URL
var Post = DS.Model.extend({ title: DS.attr('string') body: DS.attr('string') published: DS.attr('date')});
URL
var PostsRoute = Ember.Router.extend({ model: function () { return this.store.find('post'); }});
var PostsController = Ember.ArrayController.extend({ … });
URL
<ul> {{! posts.hbs }}{{#each post in model}}
<li> {{#link-to 'post' post}} {{post.title}} {{/link-to}} </li>
{{/each}}</ul> {{outlet}}
URL
var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); }});
var PostController = Ember.ObjectController.extend({ … });
URL
{{! post.hbs}}<h2>{{title}}</h2>
<p>{{format-date published}}</p>
<div>{{body}}
</div>
URL
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
Convention over Configuration
80%
defaults + escape hatches
Tooling
Искать нерешенные проблемы
Меньше слов - больше дела
Принципы рельс
1. Если это нужно 80% приложений, это должно быть частью фреймворка.
2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять.
3. Tooling4. Искать нерешенные проблемы.5. Меньше слов - больше дела.
Принципы Ember
1. Если это нужно 80% приложений, это должно быть частью фреймворка.
2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять.
3. Tooling.4. Искать нерешенные проблемы.5. Меньше слов - больше дела.
Готовый фреймворкvs
самописный фреймворк
Другие плюшки
1. Кодогенерация2. DI3. Поддержка тестирования4. Интеграция5. Линейная сложность6. Promises7. ES6 Modules8. Tooling (Broccoli, ESNext, etc.)
Performance
Tom Dale
Rails + Cocoa + Web
HTMLBars
Flows
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
Модель разработки - PostgreSQL
Tilde, Yapp, Prototypal, Adepar, Instructure, etc.
Релизы по расписанию
Компании
1. Apple2. Google3. Yahoo4. Twitter5. Microsoft6. Groupon7. Square8. Zendesk
9. Ballanced10. Nitrous.io11. USPO12. DoD13. NBCNews14. Netflix
Проекты
1. Discource2. Ballanced3. Travis CI4. Ghost
Ember JS — назад в будущее
Андрей Листочкин
Ember JS — назад в будущее
@listochkin
http://tinyurl.com/nitro4andrey