ember.js - Назад в Будущее - odessa js 2014

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