Зачем нужен emberjs, если мне хвататет jquery
DESCRIPTION
Как и зачем начинать работать с EmberJS вместо jQueryTRANSCRIPT
ЗАЧЕМ НУЖЕН 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 DATA
39
ЧТО ДАЛЬШЕ?
1. EmberJS2. Ember Watch3. Начинаем работать с Ember.js4. Анатомия Ember.js
40
СПАСИБО ЗА ВНИМАНИЕ
mail: [email protected]: http://bolshchikov.netblog: http://blog.bolshchikov.netlinkedin: http://www.linkedin.com/in/bolshchikovgithub: http://github.com/bolshchikov