advertisement

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

50 %
50 %
advertisement
Information about Зачем нужен EmberJS, если мне хвататет jQuery
Technology

Published on March 14, 2014

Author: bolshchikov

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Презентация jQuery - Education

Наша презентация библиотеки jQuery 1.4 (январь 2010) Docslide.ru. Upload Login / Signup. Leadership; Technology; Education;
Read more