ЗАЧЕМ НУЖЕН
EMBERJS,
ЕСЛИ МНЕ
ХВАТАЕТ JQUERY
DUMP Conference, 2014
brought by Sergey N. Bolshchikov

● Ведущий front end разработчик
в New ProImage
● Со-организатор
EmberJS Tel-Aviv Meetup
● Со-организатор
EmberFest Europe
Я!
1

ВЫ!
● Кто пишет front end?
● Кто знает JavaScript?
● Кто использует какой-либо JavaScript MVC
фреймворк?
● Кто использует EmberJS?
2

- КАКОЙ MVC ФРЕЙМВОРК ТЫ
БУДЕШЬ ИСПОЛЬЗОВАТЬ
- НИКАКОЙ, JQUERY ХВАТИТ
3

1. <div id="form">
2. <div>
3. <label>First Name:</label> <input id="firstName"
placeholder="your first name" />
4. </div>
5. <div>
6. <label>Last Name:</label> <input id="lastName"
placeholder="your last name" />
7. </div>
8. <div>
9. <label>Full Name:</label> <input id="fullName"
placeholder="your full name" readonly/>
10. </div>
11. </div>
JQUERY HTML
4

JQUERY JS
1. var App = {
2. user: {}
3. },
4. firstNameInput = $('#firstName'),
5. lastNameInput = $('#lastName'),
6. fullNameInput = $('#fullName');
7. // set initial values
8. fullNameInput.val(App.user.firstName + ' ' + App.user.lastName);
9. // bind events
10. firstNameInput.on('keyup', function () {
11. App.user.firstName = firstNameInput.val();
12. fullNameInput.val(firstNameInput.val() + ' ' + lastNameInput.
val());
13. });
14. lastNameInput.on('keyup', function () {
15. App.user.lastName = lastNameInput.val();
16. fullNameInput.val(firstNameInput.val() + ' ' + lastNameInput.
val());
17. });
18. window.App = App;
5

EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label> {{input value=App.
user.firstName placeholder="your first name"}}
5. </div>
6. <div>
7. <label>Last Name:</label> {{input value=App.user.
lastName placeholder="your last name"}}
8. </div>
9. <div>
10. <label>Full Name:</label> {{input value=App.user.
fullName placeholder="your full name" readonly="
readonly"}}
11. </div>
12. </div>
13. </script>
6

EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label> {{input value=App.
user.firstName placeholder="your first name"}}
5. </div>
6. <div>
7. <label>Last Name:</label> {{input value=App.user.
lastName placeholder="your last name"}}
8. </div>
9. <div>
10. <label>Full Name:</label> {{input value=App.user.
fullName placeholder="your full name" readonly="
readonly"}}
11. </div>
12. </div>
13. </script>
7

EMBER JS
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins({
3. fullName: function () {
4. return this.get('firstName') + ' ' + this.get
('lastName');
5. }.property('firstName', 'lastName')
6. })
7. });
8

МНЕ ХВАТАЕТ JQUERY
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins
({
3. fullName: function () {
4. return this.get('firstName') + '
' + this.get('lastName');
5. }.property('firstName',
'lastName')
6. })
7. });
1. var App = {
2. user: {}
3. },
4. firstNameInput = $('#firstName'),
5. lastNameInput = $('#lastName'),
6. fullNameInput = $('#fullName');
7. // set initial values
8. fullNameInput.val(App.user.firstName +
' ' + App.user.lastName);
9. // bind events
10. firstNameInput.on('keyup', function ()
{
11. App.user.firstName = firstNameInput.
val();
12. fullNameInput.val(firstNameInput.
val() + ' ' + lastNameInput.val());
13. });
14. lastNameInput.on('keyup', function () {
15. App.user.lastName = lastNameInput.
val();
16. fullNameInput.val(firstNameInput.
val() + ' ' + lastNameInput.val());
17. });
18. window.App = App;
9

ЗАЧЕМ
НУЖЕН
EMBERJS
source: http://www.flickr.com/photos/24589924@N04/3426111251/
1. Структура
приложения

ЗАЧЕМ
НУЖЕН
EMBERJS
source: http://blog.discoverymachine.com/2013/01/24/is-a-designed-framework-required-for-knowledge-flow/
1. Структура
приложения

ЗАЧЕМ
НУЖЕН
EMBERJS
source: http://binatani.com/1957-hudson-wiring-diagram-of-complete-internal-electrical-system/1957-hudson-internal-electrical-components-wiring-diagram/
1. Структура
приложения
2. Связка
компонентов

АРХИТЕКТУРА
ПРИЛОЖЕНИЯ

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
14

MODEL-VIEW-CONTROLLER (MVC)
MODEL
CONTROLLERVIEW
USER
source: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
изменяетобновляет
используетвидит
15

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
16

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UIзапуск
приложения
18

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
состояние
приложения
запуск
приложения
19

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
иерархия
вьюшек
состояние
приложения
запуск
приложения
20

РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
иерархия
вьюшек
состояние
приложения
запуск
приложения
URL
21

MVC от EMBERJS
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
использует
обновляет
активирует
обновляет
уведомляет
22

MVC от EMBERJS
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
использует
обновляет
активирует
обновляет
уведомляет
23

СВЯЗКА
КОМПОНЕНТОВ

СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
использует
обновляет
активирует
обновляет
создает
определяет
25

СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
использует
обновляет
активирует
обновляет
создает
определяет
26

СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
использует
обновляет
активирует
обновляет
создает
определяет
27

КОНВЕНЦИИ
Route Name Controller Route Template
modules ModulesController ModulesRoute modules
sessions SessionsController SessionsRoute sessions
sessions/session SessionController SessionRoute session
28

ПФФФ…
АРХИТЕКТУРУ МОЖНО
ПОСТРОИТЬ И С BACKBONE,
КОТОРЫЙ В 10 РАЗ ЛЕГЧЕ

А КАК НА СЧЕТ
СИНХРОНИЗАЦИИ МЕЖДУ
МОДЕЛЬЮ И UI?

ДАННЫЕ ГРАФИКА
31

ДАННЫЕ ГРАФИКА
32

TWO-WAY BINDINGS
ДВУСТОРОННИЕ СВЯЗИ

<div id="form">
<div>
<label>First Name:</label>
{{input value=App.user.firstName placeholder="your first name"}}
</div>
<div>
<label>Last Name:</label>
{{input value=App.user.lastName placeholder="your last name"}}
</div>
<div>
<label>Full Name:</label>
{{input value=App.user.fullName placeholder="your full name"}}
</div>
</div>
HBS
var App = Ember.Application.create({
user: {}
});
JS
34

COMPUTED PROPERTIES
ВЫЧИСЛЯЕМЫЕ ЗНАЧЕНИЯ

<div id="form">
<div>
<label>First Name:</label>
{{input value=App.user.firstName placeholder="your first name"}}
</div>
<div>
<label>Last Name:</label>
{{input value=App.user.lastName placeholder="your last name"}}
</div>
<div>
<label>Full Name:</label>
{{input value=App.user.fullName placeholder="your full name"}}
</div>
</div>
HBS
var App = Ember.Application.create({
user: Ember.Object.createWithMixins({
fullName: function () {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
})
});
JS
36

А ЧТО ЕЩЕ?

EMBER и БОЛЬШИЕ СПИСКИ

EMBER против ANGULAR

А ЕЩЕ ЕСТЬ
EMBER DATA
39

ЧТО ДАЛЬШЕ?
1. EmberJS
2. Ember Watch
3. Начинаем работать с Ember.js
4. Анатомия Ember.js
40

СПАСИБО ЗА ВНИМАНИЕ
mail: sergey@bolshchikov.net
site: http://bolshchikov.net
blog: http://blog.bolshchikov.net
linkedin: http://www.linkedin.com/in/bolshchikov
github: http://github.com/bolshchikov