0
ЗАЧЕМ НУЖЕН
EMBERJS,
ЕСЛИ МНЕ
ХВАТАЕТ JQUERY
DUMP Conference, 2014
brought by Sergey N. Bolshchikov
● Ведущий front end разработчик
в New ProImage
● Со-организатор
EmberJS Tel-Aviv Meetup
● Со-организатор
EmberFest Europe
...
ВЫ!
● Кто пишет front end?
● Кто знает JavaScript?
● Кто использует какой-либо JavaScript MVC
фреймворк?
● Кто использует ...
- КАКОЙ MVC ФРЕЙМВОРК ТЫ
БУДЕШЬ ИСПОЛЬЗОВАТЬ
- НИКАКОЙ, JQUERY ХВАТИТ
3
1. <div id="form">
2. <div>
3. <label>First Name:</label> <input id="firstName"
placeholder="your first name" />
4. </div>...
JQUERY JS
1. var App = {
2. user: {}
3. },
4. firstNameInput = $('#firstName'),
5. lastNameInput = $('#lastName'),
6. full...
EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label>...
EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label>...
EMBER JS
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins({
3. fullName: function () {
4. re...
МНЕ ХВАТАЕТ JQUERY
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins
({
3. fullName: function...
ЗАЧЕМ
НУЖЕН
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-flo...
ЗАЧЕМ
НУЖЕН
EMBERJS
source: http://binatani.com/1957-hudson-wiring-diagram-of-complete-internal-electrical-system/1957-hud...
АРХИТЕКТУРА
ПРИЛОЖЕНИЯ
РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
UI
14
MODEL-VIEW-CONTROLLER (MVC)
MODEL
CONTROLLERVIEW
USER
source: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93cont...
РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ
ДАННЫЕ ЛОГИКА
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видит
ис...
MVC от EMBERJS
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвидит
ис...
СВЯЗКА
КОМПОНЕНТОВ
СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвиди...
СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвиди...
СВЯЗКА КОМПОНЕНТОВ
MODEL
CONTROLLER
VIEW
USER
source: http://www.youtube.com/watch?v=s1dhXamEAKQ
ROUTE
ROUTER
TEMPLATEвиди...
КОНВЕНЦИИ
Route Name Controller Route Template
modules ModulesController ModulesRoute modules
sessions SessionsController ...
ПФФФ…
АРХИТЕКТУРУ МОЖНО
ПОСТРОИТЬ И С 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>
<...
COMPUTED PROPERTIES
ВЫЧИСЛЯЕМЫЕ ЗНАЧЕНИЯ
<div id="form">
<div>
<label>First Name:</label>
{{input value=App.user.firstName placeholder="your first name"}}
</div>
<...
А ЧТО ЕЩЕ?
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: ...
Upcoming SlideShare
Loading in...5
×

Зачем нужен EmberJS, если мне хвататет jQuery

524

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
524
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Зачем нужен EmberJS, если мне хвататет jQuery"

  1. 1. ЗАЧЕМ НУЖЕН EMBERJS, ЕСЛИ МНЕ ХВАТАЕТ JQUERY DUMP Conference, 2014 brought by Sergey N. Bolshchikov
  2. 2. ● Ведущий front end разработчик в New ProImage ● Со-организатор EmberJS Tel-Aviv Meetup ● Со-организатор EmberFest Europe Я! 1
  3. 3. ВЫ! ● Кто пишет front end? ● Кто знает JavaScript? ● Кто использует какой-либо JavaScript MVC фреймворк? ● Кто использует EmberJS? 2
  4. 4. - КАКОЙ MVC ФРЕЙМВОРК ТЫ БУДЕШЬ ИСПОЛЬЗОВАТЬ - НИКАКОЙ, JQUERY ХВАТИТ 3
  5. 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. 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. 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. 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. 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. 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. 11. ЗАЧЕМ НУЖЕН EMBERJS source: http://www.flickr.com/photos/24589924@N04/3426111251/ 1. Структура приложения
  12. 12. ЗАЧЕМ НУЖЕН EMBERJS source: http://blog.discoverymachine.com/2013/01/24/is-a-designed-framework-required-for-knowledge-flow/ 1. Структура приложения
  13. 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. 14. АРХИТЕКТУРА ПРИЛОЖЕНИЯ
  15. 15. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UI 14
  16. 16. MODEL-VIEW-CONTROLLER (MVC) MODEL CONTROLLERVIEW USER source: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller изменяетобновляет используетвидит 15
  17. 17. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UI 16
  18. 18. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UIзапуск приложения 18
  19. 19. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UI состояние приложения запуск приложения 19
  20. 20. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UI иерархия вьюшек состояние приложения запуск приложения 20
  21. 21. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТЕЙ ДАННЫЕ ЛОГИКА UI иерархия вьюшек состояние приложения запуск приложения URL 21
  22. 22. MVC от EMBERJS MODEL CONTROLLER VIEW USER source: http://www.youtube.com/watch?v=s1dhXamEAKQ ROUTE ROUTER TEMPLATEвидит использует обновляет активирует обновляет уведомляет 22
  23. 23. MVC от EMBERJS MODEL CONTROLLER VIEW USER source: http://www.youtube.com/watch?v=s1dhXamEAKQ ROUTE ROUTER TEMPLATEвидит использует обновляет активирует обновляет уведомляет 23
  24. 24. СВЯЗКА КОМПОНЕНТОВ
  25. 25. СВЯЗКА КОМПОНЕНТОВ MODEL CONTROLLER VIEW USER source: http://www.youtube.com/watch?v=s1dhXamEAKQ ROUTE ROUTER TEMPLATEвидит использует обновляет активирует обновляет создает определяет 25
  26. 26. СВЯЗКА КОМПОНЕНТОВ MODEL CONTROLLER VIEW USER source: http://www.youtube.com/watch?v=s1dhXamEAKQ ROUTE ROUTER TEMPLATEвидит использует обновляет активирует обновляет создает определяет 26
  27. 27. СВЯЗКА КОМПОНЕНТОВ MODEL CONTROLLER VIEW USER source: http://www.youtube.com/watch?v=s1dhXamEAKQ ROUTE ROUTER TEMPLATEвидит использует обновляет активирует обновляет создает определяет 27
  28. 28. КОНВЕНЦИИ Route Name Controller Route Template modules ModulesController ModulesRoute modules sessions SessionsController SessionsRoute sessions sessions/session SessionController SessionRoute session 28
  29. 29. ПФФФ… АРХИТЕКТУРУ МОЖНО ПОСТРОИТЬ И С BACKBONE, КОТОРЫЙ В 10 РАЗ ЛЕГЧЕ
  30. 30. А КАК НА СЧЕТ СИНХРОНИЗАЦИИ МЕЖДУ МОДЕЛЬЮ И UI?
  31. 31. ДАННЫЕ ГРАФИКА 31
  32. 32. ДАННЫЕ ГРАФИКА 32
  33. 33. TWO-WAY BINDINGS ДВУСТОРОННИЕ СВЯЗИ
  34. 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. 35. COMPUTED PROPERTIES ВЫЧИСЛЯЕМЫЕ ЗНАЧЕНИЯ
  36. 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. 37. А ЧТО ЕЩЕ?
  38. 38. EMBER и БОЛЬШИЕ СПИСКИ
  39. 39. EMBER против ANGULAR
  40. 40. А ЕЩЕ ЕСТЬ EMBER DATA 39
  41. 41. ЧТО ДАЛЬШЕ? 1. EmberJS 2. Ember Watch 3. Начинаем работать с Ember.js 4. Анатомия Ember.js 40
  42. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×