ember.js - Назад в Будущее - odessa js 2014
TRANSCRIPT
![Page 1: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/1.jpg)
Ember JS — назад в будущее
Андрей Листочкин
![Page 2: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/2.jpg)
@listochkin
![Page 3: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/3.jpg)
![Page 4: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/4.jpg)
A framework for creating ambitious web applications
![Page 5: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/5.jpg)
MVC
![Page 6: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/6.jpg)
Поле бояBackbone, Knockout, Angular, Ember, React
![Page 7: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/7.jpg)
V + + + + +
C + + + +
M + + +
R + + +
+ + +
![Page 8: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/8.jpg)
Ember умеет все то же, что и Angular
и много чего еще
![Page 9: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/9.jpg)
Посмотрим на него в деле
![Page 10: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/10.jpg)
Data binding
![Page 11: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/11.jpg)
<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>
![Page 12: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/12.jpg)
Пример 1
![Page 13: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/13.jpg)
Компоненты
![Page 14: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/14.jpg)
![Page 15: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/15.jpg)
![Page 16: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/16.jpg)
Пример 2
![Page 17: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/17.jpg)
Приложение в целом
![Page 18: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/18.jpg)
![Page 19: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/19.jpg)
Пример 3
![Page 20: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/20.jpg)
![Page 21: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/21.jpg)
MVC
![Page 22: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/22.jpg)
![Page 23: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/23.jpg)
![Page 24: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/24.jpg)
![Page 25: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/25.jpg)
Ambitious applications — url-driven applications
![Page 26: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/26.jpg)
URL
Смена URLа - событие
![Page 27: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/27.jpg)
URL
Смена URLа - событие
URL - модуль
![Page 28: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/28.jpg)
URL
Смена URLа - событие
URL - модуль
URL - глобальное состояние
![Page 29: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/29.jpg)
URL
https://myapp.com/posts/1
App.Router.map(function () { this.resource('posts', function () { this.resource('post', { path: ':post_id'}); });});
![Page 30: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/30.jpg)
URL
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
![Page 31: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/31.jpg)
URL
var Post = DS.Model.extend({ title: DS.attr('string') body: DS.attr('string') published: DS.attr('date')});
![Page 32: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/32.jpg)
URL
var PostsRoute = Ember.Router.extend({ model: function () { return this.store.find('post'); }});
var PostsController = Ember.ArrayController.extend({ … });
![Page 33: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/33.jpg)
URL
<ul> {{! posts.hbs }}{{#each post in model}}
<li> {{#link-to 'post' post}} {{post.title}} {{/link-to}} </li>
{{/each}}</ul> {{outlet}}
![Page 34: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/34.jpg)
URL
var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); }});
var PostController = Ember.ObjectController.extend({ … });
![Page 35: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/35.jpg)
URL
{{! post.hbs}}<h2>{{title}}</h2>
<p>{{format-date published}}</p>
<div>{{body}}
</div>
![Page 36: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/36.jpg)
URL
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
![Page 37: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/37.jpg)
![Page 38: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/38.jpg)
Convention over Configuration
![Page 39: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/39.jpg)
![Page 40: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/40.jpg)
80%
![Page 41: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/41.jpg)
defaults + escape hatches
![Page 42: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/42.jpg)
Tooling
![Page 43: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/43.jpg)
Искать нерешенные проблемы
![Page 44: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/44.jpg)
Меньше слов - больше дела
![Page 45: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/45.jpg)
Принципы рельс
1. Если это нужно 80% приложений, это должно быть частью фреймворка.
2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять.
3. Tooling4. Искать нерешенные проблемы.5. Меньше слов - больше дела.
![Page 46: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/46.jpg)
Принципы Ember
1. Если это нужно 80% приложений, это должно быть частью фреймворка.
2. Для нескольких вариантов решения задачи следует выбрать один по умолчанию, но позволить его менять.
3. Tooling.4. Искать нерешенные проблемы.5. Меньше слов - больше дела.
![Page 47: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/47.jpg)
![Page 48: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/48.jpg)
![Page 49: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/49.jpg)
![Page 50: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/50.jpg)
![Page 51: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/51.jpg)
Готовый фреймворкvs
самописный фреймворк
![Page 52: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/52.jpg)
![Page 53: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/53.jpg)
Другие плюшки
![Page 54: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/54.jpg)
1. Кодогенерация2. DI3. Поддержка тестирования4. Интеграция5. Линейная сложность6. Promises7. ES6 Modules8. Tooling (Broccoli, ESNext, etc.)
![Page 55: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/55.jpg)
Performance
![Page 56: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/56.jpg)
![Page 57: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/57.jpg)
Tom Dale
![Page 58: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/58.jpg)
![Page 59: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/59.jpg)
![Page 60: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/60.jpg)
Rails + Cocoa + Web
![Page 61: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/61.jpg)
![Page 62: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/62.jpg)
HTMLBars
![Page 63: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/63.jpg)
Flows
![Page 64: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/64.jpg)
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
![Page 65: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/65.jpg)
![Page 66: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/66.jpg)
Модель разработки - PostgreSQL
Tilde, Yapp, Prototypal, Adepar, Instructure, etc.
![Page 67: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/67.jpg)
Релизы по расписанию
![Page 68: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/68.jpg)
Компании
1. Apple2. Google3. Yahoo4. Twitter5. Microsoft6. Groupon7. Square8. Zendesk
9. Ballanced10. Nitrous.io11. USPO12. DoD13. NBCNews14. Netflix
![Page 69: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/69.jpg)
Проекты
1. Discource2. Ballanced3. Travis CI4. Ghost
![Page 70: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/70.jpg)
![Page 71: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/71.jpg)
Ember JS — назад в будущее
Андрей Листочкин
![Page 72: Ember.js - Назад в Будущее - Odessa JS 2014](https://reader034.vdocuments.site/reader034/viewer/2022051413/55846c10d8b42aca538b4624/html5/thumbnails/72.jpg)
Ember JS — назад в будущее
@listochkin
http://tinyurl.com/nitro4andrey