ЗАЧЕМ НУЖЕН 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 values8. 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

МНЕ ХВАТАЕТ JQUERY1. 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 values8. 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. EmberJS2. Ember Watch3. Начинаем работать с Ember.js4. Анатомия Ember.js

40

СПАСИБО ЗА ВНИМАНИЕ

mail: sergey@bolshchikov.netsite: http://bolshchikov.netblog: http://blog.bolshchikov.netlinkedin: http://www.linkedin.com/in/bolshchikovgithub: http://github.com/bolshchikov