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

Transcript

1. Введение в MVVM на примере Knockout для JavaScript разработчиков Докладчик: Андрей Найденко Senior .NET Software Engineer в компании EPAM Systems Twitter: Andrii_Naidenko Facebook: Andrii.Naidenko
2. Knockout – бесплатная JavaScript библиотека с открытым кодом для разработки богатых веб-приложений с отзывчивым интерфейсом и прозрачной моделью данных.
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); });
6. Программист (устал, безнадежно фиксает баги, и днем, и ночью) Заказчик (недоволен качеством) Тестировщик (утомленный, скучает, ждет фиксов) Верстальщик (недоумевает, девелопер ломает верстку) Менеджер (думает, что делать и кто виноват)
7. <div class="slider-range" data-bind="jqueryui: { widget: 'slider', options: { values: this.sliderRangeSelected() }}"></div> <div>Min: <span class="min" data-bind="text: min"></span></div> <div>Max: <span class="max" data-bind="text: max"></span></div> 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);
8. http://code.google.com/p/knockoutjs-presentation-live-example/downloads
9. Ключевые концепции Декларативная привязка Ассоциация DOM элементов с view моделью в разметке Автоматическое обновление UI При изменении view модели, UI обновляется автоматически, и наоборот Отслеживание зависимостей Автоматически отслеживает цепочки зависимостей во view модели Шаблонизация Позволяет строить богатый интерфейс с использованием шаблонов, отслеживает вложенные шаблоны
10. Встроенные привязки (bindings): • Управления текстом и внешним видом: visible, text, html, css, style, attr • Управления логикой представления: foreach, if, ifnot, with • Работы с элементами формы: click, event, submit, enable, disable, value, hasfocus, checked, options, selectedOptions, uniqueName Декларативная привязка
11. Шаблон MVVM (Model-View-ViewModel) View: интерактивный UI, основанный на view модели. View Model: плоский объект, представляющий данные и операции на UI. Например, для реализации редактора списка, Ваша view модель будет представлена объектом со списком элементов и методов по их добавлению/удалению в список. Model: Прикладная логика, которая описывает объекты предметной области и операции над ними. Модель не зависит от UI.
12. Бесплатный, с открытыми исходниками MIT лицензия Чистый JavaScript Работает с любым веб-фреймворком Легковесный 39кб сжатая, 13кб с HTTP сжатием Нет зависимостей Поддерживает все мейнстрим браузеры: IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile) Полная документация: API, живые примеры, интерактивные учебники Особенности
13. Преимущества: - Полная автономность - Автоматическое отслеживание зависимостей, обновление UI - Прозрачная архитектура - Гибкая расширяемость - Повышенная тестируемость - Очень низкий порог вхождения Недостатки: - Нет встроенной поддержки отладки зависимостей - Слабая пользовательских транзакций (есть workaround) - Нет поддержки SEO
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