Как и зачем начинать работать с EmberJS вместо jQuery

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

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

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

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

5. 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

6. 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

7. 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

8. 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

9. 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

10. МНЕ ХВАТАЕТ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

34. <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

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

36. <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

37. А ЧТО ЕЩЕ?

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

39. EMBER против ANGULAR

40. А ЕЩЕ ЕСТЬ
EMBER DATA
39

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

42. СПАСИБО ЗА ВНИМАНИЕ
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