![MVVM в JavaScript. На ринге KnockoutJS Гомолко Роман, UserReport [email_address] @romanych](https://image.slidesharecdn.com/kievalt-net-111029083028-phpapp01/85/introduction-to-mvvm-and-knockout-1-320.jpg)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Introduction to MVVM and Knockout
- 1. MVVM в JavaScript. На ринге KnockoutJS Гомолко Роман, UserReport [email_address] @romanych
- 2. r color
- 3. r color
- 10. MVVM Model View View Model A ViewModel is basically a value converter on steroids. Josh Smith
- 15. Спасибо
Hinweis der Redaktion
- Добрый вечер уважаемые коллеги. Меня зовут Гомолко Роман. Я работаю .NET разработчиком в Днепропетровском Ciklum'е в проекте UserReport. Для меня большая честь быть приглашённым сюда что-нибудь вам рассказать. И перед тем как мы перейдём к сути доклада я хочу что бы мы с вами немного понастольгировали. Давайте мысленно перенесёмся в то время, когда мы были начинающими программистами. У нас было божество - программа. Мы её разрабатывали исходя из тех задач, которые мы хотели решить. Я думаю, большинство из нас по началу даже не знали, что в нашей программе скрывается логика отображение и логика приложение, ибо для нас это было едино. По нажатию на кнопку надо посчитать 2+2 и вывести на экран. Мы делали именно это и ничего более.
- Теперь давайте представим, что прочитав книгу об ООП мы воодушивились примерами наследования в виде геометрических фигур. И перед тем, как осваивать полиморфизм решили просто научится отображать на экране окружность. Окружность описывается двумя характеристиками: радиус и цвет. Теперь давайте ещё представим, что наше программерское детство было счастливым. Оно не было омрачено нынешним зоопарком браузеров. Браузер был один и это был, скажем, Хром.
- Итак, давайте поставим перед собой задачу научиться отображать окружность заданного радиуса и размера и предоставить пользователю возможность менять эти характеристики. В нашем щастливом детстве эта задача решается чуть проще, чем элементарно.
- Вот у нас SVG контрол для векторной графики. И код нашей простейшей формы. Управление тоже тривиально. Получили все контролы, по изменению значения в поле радиуса – изменяем радиус окружности. Аналогичным образом поступаем с полем цвета. Безусловно мы получили вполне работоспособное приложение. Однако для прикладных программистов есть достаточно печальная новость: или их программа должна изменяться, или - не используется. Мы рассматриваем саццесс-стори, по этому
- Задача есть, сложностей на горизонте не видно – можно начинать писать код. Вообразим семе идеальный мир состоящий из одного браузера поддерживающего html5 и начнём. Вот у нас SVG контрол для векторной графики. И код нашей простейшей формы. Управление тоже тривиально. Получили все контролы, по изменению значения в поле радиуса – изменяем радиус окружности. Аналогичным образом поступаем с полем цвета. В мире разработчиков понятие «финальные требования» – является недостижимым идеалом. Так вот и в нашем примере у нас появился дополнительный функционал. По нажатию на окружность – она должна принимать случайный цвет, также её можно ресайзить мышкой, а радиус окружности должен быть написан в левом нижнем углу. Посмотрим на типичное решение этой задачи. При решении задачи в лоб мы добавляем необходимые обработчики событий, обновляем нужные элементы. И наблюдаем печальную картину – у нас появляются дубликаты кода и код становится взаимосвязанным. Давайте попробуем оптимизировать наше решение
- Задача есть, сложностей на горизонте не видно – можно начинать писать код. Вообразим семе идеальный мир состоящий из одного браузера поддерживающего html5 и начнём. Вот у нас SVG контрол для векторной графики. И код нашей простейшей формы. Управление тоже тривиально. Получили все контролы, по изменению значения в поле радиуса – изменяем радиус окружности. Аналогичным образом поступаем с полем цвета. В мире разработчиков понятие «финальные требования» – является недостижимым идеалом. Так вот и в нашем примере у нас появился дополнительный функционал. По нажатию на окружность – она должна принимать случайный цвет, также её можно ресайзить мышкой, а радиус окружности должен быть написан в левом нижнем углу. Посмотрим на типичное решение этой задачи. При решении задачи в лоб мы добавляем необходимые обработчики событий, обновляем нужные элементы. И наблюдаем печальную картину – у нас появляются дубликаты кода и код становится взаимосвязанным. Давайте попробуем оптимизировать наше решение
- Шаблон MVVM был разработан в 2005 году Джоном Госсманом, как модификация шаблона Presentation Model господина Фаулера. Изначально MVVM был ориентирован на молодые технологии от Microsoft – WPF и Silverlight. Давайте ознакомимся с теоретическими данными по этому шаблону. Паттерн MVVM делится на три части: Модель (Model), так же, как в классическом паттерне MVC , Модель представляет собой фундаментальные данные, необходимые для работы приложения. Вид/Представление (View) так же, как в классическом паттерне MVC , Вид — это графический интерфейс, то есть окно, кнопки и.т.п. Модель вида (ViewModel, что означает «Model of View» [1] ) является с одной стороны абстракцией Вида, а с другой предоставляет обертку данных из Модели, которые подлежат связыванию. То есть она содержит Модель, которая преобразована к Виду, а так же содержит в себе команды, которыми может пользоваться Вид, чтобы влиять на Модель. Для успешной реализации паттерна MVVM нам необходимы эффективные средства для организации связи между Моделью вида и самим - Data binding. Основная цель любого реализации MVVM – создание эффективного и расширяемого механизма для data binding’а.
- Если взгянуть на нашу задачу с точки зрения MVVM, то у нас всё достаточно просто. Для отображения окружности нам небходимо знать всё те же 2 характеристики и один метод. Метод
- На слайде вы видите весь код, который нужен для реализации последней версии задачи. Вы обрадованы результату? Хотите знать, почему так произошло? Если посмотреть на эту задачу под углом MVVM то модель у нас – Окружность. Представление модели – параметры окружности и действия доступные пользователю: Задать случайный цвет Изменить размер Действительно, для ViewModel это всё. Нам не интересно кто и как использует эти значения – ведь это задача представления. Зачем коду об этом знать. Обратим наш взор в сторону представления. Тут уже начинает играть основную роль магический атрибут data-bind. Он позволяет нам описать как соотносятся свойства того или иного поля во viewModel с HTML элементом. Не знаю как красноречивее описать, давайте просто разберём его на косточки. Для элемента circle нам нужно связать аттрибуты stroke и r с полями color и radius. Также при возникновении событий click и resize – должны вызываться соответствующие методы у viewModel. Я постоянно говорю слово «связать» и ещё ниразу не удосужился пояснить, что это значит. При изменении значений во viewModel – UI должен обновляться автоматически. Аналогично если пользователь изменил значение в UI – значение во viewModel должно поменяться. Читаем дельше. У елмента text его текст, простите за тавтологию, должен браться из поля radius, но при этом должен добавляться литерал px. Это были пример однонапрваленного связывания. Теперь 2 примера обоюдного. input’ы связываются с соответствующими полями viewModel. При изменении пользователем значениях в полях – изменения придут во viewModel, а от туда по цепочки придут в другие зависимые элементы. Пользователь изменил значение радиуса – изменится как окружность так и текст с её радиусом. Я даже не знаю, какие выводы из этого можно сделать. MVVM действительно делает жизнь UI разработчиком проще. Теперь надо фокусироваться только на 2х частях – ViewModel и View. А их взаимодействие организует KnockoutJS. Далее я хочу рассказать вам об основных возможностях библиотеки. Если у кого есть вопросы требующие неотлагательного ответа – задавайте…
- И тут в наши мечты стремительно врывается отличная библиотека – KnockoutJS. Не знаю, что задумывали авторы названия, но я был действительно в нок-дауне после посещения их сайта. Основные возможности библиотеки Декларативное связывание Для MVVM главное связать View и ViewModel. Связывание организовывается с помощью аттрибута data-bind в html. Автоматическое обновление UI При изменении значений во ViewModel изменения автоматически применяются в интерфейсе и на оборот! Отслеживание зависимостей Есть возможность легко создавать поля, зависимые от других полей. Templaiting KnockoutJS имеет поддержку шаблонов, при этом сама не предоставляет возможности шаблонизации. Может быть использован любой движок шаблонов. Полная автономность Совместимость с любым JavaScript framework’ом KnockoutJS самостоятельная библиотека. У неё нет зависимостей от других библиотек и она ни с кем не конфликтует. Библиотека экспортирует только объект ko в глобальную область видимостью. Отличная документация Будете использовать, оцените. Документация действительно хорошая. Есть интересные и не тривиальные примеры по всем возможностям. С вводной частью мы закончили. Воды больше не будет, так как программисты народ такой, что теорию чтут и любят, но практические примеры будут гораздо интереснее и полезнее.