ThinkPHP #2: Введение в MVVM на примере Knockout для JavaScript разработчиков

Transcript

1. Введение в MVVM на примере
   Knockout для JavaScript разработчиков
   Докладчик:
   Андрей Найденко
   Senior .NET Software Engineer
   в компании EPAM Systems
   Twitter: Andrii_Naidenko
   Facebook: Andrii.Naidenko
   

   View Slide

2. Knockout – бесплатная JavaScript
   библиотека с открытым кодом для
   разработки богатых веб-приложений
   с отзывчивым интерфейсом и
   прозрачной моделью данных.
   

   View Slide

3. View Slide

4. $('.slider-range').slider({
   range: true,
   slide: function (event, ui)
   {
   $('#left-handle-position').val(ui.values[0]);
   $sliderValues.find('.left-handle-value').text(ui.values[0]);
   var $statistics = $('.statistics');
   $statistics.find('.min').text(MyMath.min(values, sliderValues));
   $statistics.find('.median').text(MyMath.median(values, sliderValues));
   // ...
   }
   });
   $('#left-handle-position').change(function (e)
   {
   var rightValue = $('.slider-range').slider('values', 1);
   var newLeftValue = Math.min($(this).val(), rightValue);
   $sliderRange.slider('values', 0, $(this).val());
   });
   $('#right-handle-position').change(function (e)
   {
   var leftValue = $('.slider-range').slider('values', 0);
   var newRightValue = Math.max($(this).val(), leftValue);
   $sliderRange.slider('values', 1, newRightValue);
   });
   

   View Slide

5. View Slide

6. Программист
   (устал, безнадежно
   фиксает баги,
   и днем, и ночью)
   Заказчик
   (недоволен качеством)
   Тестировщик
   (утомленный, скучает,
   ждет фиксов)
   Верстальщик
   (недоумевает,
   девелопер ломает
   верстку)
   Менеджер
   (думает, что делать и кто виноват)
   

   View Slide

7. 
   Min:
   Max:
   var ViewModel = function (chartData)
   {
   this.dataValues = ko.observableArray(chartData);
   this.leftHandleValue = ko.observable(0);
   this.rightHandleValue = ko.observable(chartData.length - 1);
   this.sliderRangeSelected = ko.computed(function () {
   return [this.leftHandleValue(), this.rightHandleValue()];
   }, this);
   this.min = ko.computed(function () {
   return MyMath.min(this.dataValues(), this.sliderRangeSelected());
   }, this);
   this.median = ko.computed(function () {
   return MyMath.median(this.dataValues(), this.sliderRangeSelected());
   }, this);
   };
   var chartData = loadChartData();
   var viewModel = new ViewModel(chartData);
   ko.applyBindings(viewModel);
   

   View Slide

8. http://code.google.com/p/knockoutjs-presentation-live-example/downloads
   

   View Slide

9. Ключевые концепции
   Декларативная привязка
   Ассоциация DOM элементов
   с view моделью в разметке
   Автоматическое обновление UI
   При изменении view модели,
   UI обновляется автоматически,
   и наоборот
   Отслеживание зависимостей
   Автоматически отслеживает цепочки
   зависимостей во view модели
   Шаблонизация
   Позволяет строить богатый интерфейс с
   использованием шаблонов,
   отслеживает вложенные шаблоны
   

   View Slide

10. Встроенные привязки
    (bindings):
    • Управления текстом и внешним видом:
    visible, text, html, css, style, attr
    • Управления логикой представления:
    foreach, if, ifnot, with
    • Работы с элементами формы:
    click, event, submit, enable, disable, value, hasfocus, checked,
    options, selectedOptions, uniqueName
    Декларативная
    привязка
    

    View Slide

11. Шаблон MVVM (Model-View-ViewModel)
    View: интерактивный UI, основанный на view модели.
    View Model: плоский объект, представляющий данные и операции на UI. Например,
    для реализации редактора списка, Ваша view модель будет представлена объектом
    со списком элементов и методов по их добавлению/удалению в список.
    Model: Прикладная логика, которая описывает объекты предметной области и
    операции над ними. Модель не зависит от UI.
    

    View Slide

12. Бесплатный, с открытыми исходниками
    MIT лицензия
    Чистый JavaScript
    Работает с любым веб-фреймворком
    Легковесный
    39кб сжатая, 13кб с HTTP сжатием
    Нет зависимостей
    Поддерживает все мейнстрим браузеры:
    IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
    Полная документация:
    API, живые примеры, интерактивные учебники
    Особенности
    

    View Slide

13. Преимущества:
    - Полная автономность
    - Автоматическое отслеживание зависимостей,
    обновление UI
    - Прозрачная архитектура
    - Гибкая расширяемость
    - Повышенная тестируемость
    - Очень низкий порог вхождения
    Недостатки:
    - Нет встроенной поддержки отладки зависимостей
    - Слабая пользовательских транзакций (есть workaround)
    - Нет поддержки SEO
    

    View Slide

14. Домашняя страница:
    http://knockoutjs.com/
    Исходный код:
    https://github.com/SteveSanderson/knockout
    Ресурсы:
    http://www.knockmeout.net/
    http://blog.stevesanderson.com
    http://groups.google.com/group/knockoutjs
    http://en.wikipedia.org/wiki/Model_View_ViewModel
    Материалы презентации:
    http://video.yandex.ua/users/andrii-naidenko/view/1/
    http://www.slideshare.net/Andrii_Naidenko/introduction-to-knockoutjs
    http://code.google.com/p/knockoutjs-presentation-live-example/downloads
    

    View Slide