Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Пример 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', { pa...
URL
https://myapp.com/posts/1
PostsRoute
PostsController
<posts> {{outlet}}
PostRoute
PostController
<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 ...
URL
<ul> {{! posts.hbs }}
{{#each post in model}}
<li>
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}...
URL
var PostRoute = Ember.Router.extend({
model: function (params) {
return this.store.find('post', params.post_id);
}
});...
URL
{{! post.hbs}}
<h2>{{title}}</h2>
<p>{{format-date published}}</p>
<div>
{{body}}
</div>
URL
https://myapp.com/posts/1
PostsRoute
PostsController
<posts> {{outlet}}
PostRoute
PostController
<post>
Convention over
Configuration
80%
defaults + escape hatches
Tooling
Искать нерешенные проблемы
Меньше слов - больше дела
Принципы рельс
1. Если это нужно 80% приложений, это
должно быть частью фреймворка.
2. Для нескольких вариантов решения
за...
Принципы Ember
1. Если это нужно 80% приложений, это
должно быть частью фреймворка.
2. Для нескольких вариантов решения
за...
Готовый фреймворк
vs
самописный фреймворк
Другие плюшки
1. Кодогенерация
2. DI
3. Поддержка тестирования
4. Интеграция
5. Линейная сложность
6. Promises
7. ES6 Modules
8. Tooling...
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. Apple
2. Google
3. Yahoo
4. Twitter
5. Microsoft
6. Groupon
7. Square
8. Zendesk
9. Ballanced
10. Nitrous.io
1...
Проекты
1. Discource
2. Ballanced
3. Travis CI
4. Ghost
Ember JS — назад в
будущее
Андрей Листочкин
Ember JS — назад в
будущее
@listochkin
http://tinyurl.com/nitro4andrey
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Ember.js - Назад в Будущее - Odessa JS 2014
Upcoming SlideShare
Loading in …5
×

Ember.js - Назад в Будущее - Odessa JS 2014

921 views

Published on

Published in: Technology
  • Be the first to comment

Ember.js - Назад в Будущее - Odessa JS 2014

  1. 1. Ember JS — назад в будущее Андрей Листочкин
  2. 2. @listochkin
  3. 3. A framework for creating ambitious web applications
  4. 4. MVC
  5. 5. Поле боя Backbone, Knockout, Angular, Ember, React
  6. 6. V + + + + + C + + + + M + + + R + + + + + +
  7. 7. Ember умеет все то же, что и Angular и много чего еще
  8. 8. Посмотрим на него в деле
  9. 9. Data binding
  10. 10. <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>
  11. 11. Пример 1
  12. 12. Компоненты
  13. 13. Пример 2
  14. 14. Приложение в целом
  15. 15. Пример 3
  16. 16. MVC
  17. 17. Ambitious applications — url-driven applications
  18. 18. URL Смена URLа - событие
  19. 19. URL Смена URLа - событие URL - модуль
  20. 20. URL Смена URLа - событие URL - модуль URL - глобальное состояние
  21. 21. URL https://myapp.com/posts/1 App.Router.map(function () { this.resource('posts', function () { this.resource('post', { path: ':post_id'}); }); });
  22. 22. URL https://myapp.com/posts/1 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>
  23. 23. URL var Post = DS.Model.extend({ title: DS.attr('string') body: DS.attr('string') published: DS.attr('date') });
  24. 24. URL var PostsRoute = Ember.Router.extend({ model: function () { return this.store.find('post'); } }); var PostsController = Ember.ArrayController.extend({ … });
  25. 25. URL <ul> {{! posts.hbs }} {{#each post in model}} <li> {{#link-to 'post' post}} {{post.title}} {{/link-to}} </li> {{/each}} </ul> {{outlet}}
  26. 26. URL var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); } }); var PostController = Ember.ObjectController.extend({ … });
  27. 27. URL {{! post.hbs}} <h2>{{title}}</h2> <p>{{format-date published}}</p> <div> {{body}} </div>
  28. 28. URL https://myapp.com/posts/1 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>
  29. 29. Convention over Configuration
  30. 30. 80%
  31. 31. defaults + escape hatches
  32. 32. Tooling
  33. 33. Искать нерешенные проблемы
  34. 34. Меньше слов - больше дела
  35. 35. Принципы рельс 1. Если это нужно 80% приложений, это должно быть частью фреймворка. 2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять. 3. Tooling 4. Искать нерешенные проблемы. 5. Меньше слов - больше дела.
  36. 36. Принципы Ember 1. Если это нужно 80% приложений, это должно быть частью фреймворка. 2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять. 3. Tooling. 4. Искать нерешенные проблемы. 5. Меньше слов - больше дела.
  37. 37. Готовый фреймворк vs самописный фреймворк
  38. 38. Другие плюшки
  39. 39. 1. Кодогенерация 2. DI 3. Поддержка тестирования 4. Интеграция 5. Линейная сложность 6. Promises 7. ES6 Modules 8. Tooling (Broccoli, ESNext, etc.)
  40. 40. Performance
  41. 41. Tom Dale
  42. 42. Rails + Cocoa + Web
  43. 43. HTMLBars
  44. 44. Flows
  45. 45. https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
  46. 46. Модель разработки - PostgreSQL Tilde, Yapp, Prototypal, Adepar, Instructure, etc.
  47. 47. Релизы по расписанию
  48. 48. Компании 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
  49. 49. Проекты 1. Discource 2. Ballanced 3. Travis CI 4. Ghost
  50. 50. Ember JS — назад в будущее Андрей Листочкин
  51. 51. Ember JS — назад в будущее @listochkin http://tinyurl.com/nitro4andrey

×