PureMVC в картинках - часть 1

Preview:

DESCRIPTION

Презентация к докладу на UAFPUG-1 (первой встрече Ukrainian Adobe Flash Platform User Group, состоявшейся 15 марта 2008 г. в Харькове). Обзор методов разработки приложений, введение в рефакторинг, шаблоны проектирования и фреймворк PureMVC. Автор: Ростислав Сирык (http://flash-ripper.com/) Предупреждение: презентация выкладывается "как есть". Автор осознает необходимость ее доработки. Планируется вторая часть.

Citation preview

PureMVPureMVСС в картинкахв картинках

- для ленивых –- для ленивых –

Ростислав СирыкРостислав Сирыкhttp://flash-ripper.com/http://flash-ripper.com/

Способы разработки приложенийСпособы разработки приложений

Хотелось бы:Хотелось бы: «Раз!» - «работка»«Раз!» - «работка»

Есть:Есть: «Раз!» - «Раз!» - «…а получилось как обычно»«…а получилось как обычно»

Должно быть: Должно быть: 1. 1. РазРаз--РаРа--БотБот--КаКа

((«по-э-тап-но»«по-э-тап-но»))

PureMVCPureMVC для ленивых для ленивых

Вопрос: Зачем нужен Вопрос: Зачем нужен PureMVC?PureMVC? Ответ: Для экономии лени.Ответ: Для экономии лени.

1.1. Лень – это друг человека.Лень – это друг человека.2.2. Количество лени во Вселенной Количество лени во Вселенной

ограничено и неизменно ;-(ограничено и неизменно ;-(3.3. Лень не берется из ниоткуда не Лень не берется из ниоткуда не

исчезает в никуда.исчезает в никуда.4.4. Слишком умные отбирают лень у просто Слишком умные отбирают лень у просто

умныхумных

PureMVC —PureMVC — оружие «слишком» умных. оружие «слишком» умных.

Векторная Векторная карта Москвыкарта Москвы

- пример - пример PureMVC-PureMVC-приложения - приложения -

Векторная карта как деревоВекторная карта как деревоНа вид двумерная, но внутри четыре измеренияНа вид двумерная, но внутри четыре измерения

Общий вид картыОбщий вид карты

Работа карты с браузеромРабота карты с браузером

Требования к картеТребования к карте

Карта Москвы с точностью до метраКарта Москвы с точностью до метра 9 уровней масштаба9 уровней масштаба Гибкая настройка стиля и поведенияГибкая настройка стиля и поведения Инструменты картыИнструменты карты «Чтобы работала лучше «Чтобы работала лучше Mos2.ruMos2.ru»» Рабочая версия Рабочая версия http://217.10.32.73:8080/http://217.10.32.73:8080/

mapmap//

- - рефакторингрефакторинг - -

Большая Большая переделкапеределка

Если вы попали в серьезную Если вы попали в серьезную переделкупеределку

РефакторингРефакторинг или или РеорганизацияРеорганизация — — процесс полного или частичного процесс полного или частичного преобразования внутренней структуры преобразования внутренней структуры программы при сохранении её внешнего программы при сохранении её внешнего поведения.поведения.

httphttp://://ru.wikipedia.orgru.wikipedia.org//wikiwiki//РефакторингРефакторинг

Подходы к рефакторингуПодходы к рефакторингу

Наивный (нет подхода): Наивный (нет подхода): как-нибудь да получится («какой-какой как-нибудь да получится («какой-какой

«рефакторинг?»)«рефакторинг?») Самоуверенный: Самоуверенный:

вера в идеальный код, не нуждающийся в переделкевера в идеальный код, не нуждающийся в переделке Эгоистичный:Эгоистичный:

пусть рефакторит компьютер, он железныйпусть рефакторит компьютер, он железный Осознанный: Осознанный:

делаем с учетом будущего, придерживаемся правилделаем с учетом будущего, придерживаемся правил Стратегический: Стратегический:

применение паттернов, проектирование, фреймворки.применение паттернов, проектирование, фреймворки.

Методы рефакторингаМетоды рефакторинга Изменение сигнатуры методаИзменение сигнатуры метода

Заключается в добавлении, изменении или удалении Заключается в добавлении, изменении или удалении параметра метода.параметра метода.

Инкапсуляция поляИнкапсуляция поля Было: Было: public var x: Number;public var x: Number; Стало: Стало: private var _x: Number;private var _x: Number; // // добавляется добавляется getter-getter-

settersetter

Выделение методаВыделение метода Самокомментирующийся код: если фрагмент кода Самокомментирующийся код: если фрагмент кода

требует комментария, то его следует выделить в требует комментария, то его следует выделить в отдельный метод и назвать так, чтобы данный отдельный метод и назвать так, чтобы данный комментарий стал ненужным.комментарий стал ненужным.

Перемещение метода Перемещение метода Перемещается метод, который чаще обращается к Перемещается метод, который чаще обращается к

другому классу, чем к своему собственному.другому классу, чем к своему собственному.

Проблемы от рефакторингаПроблемы от рефакторинга

Проблемы, связанные с базами данныхПроблемы, связанные с базами данных Проблемы изменения интерфейсовПроблемы изменения интерфейсов Трудности при изменении дизайнаТрудности при изменении дизайна

PureMVCPureMVC- - и паттерны проектированияи паттерны проектирования - -

Что такое Что такое PureMVCPureMVC

PureMVC - это классический мета-паттерн PureMVC - это классический мета-паттерн «Model-View-Controller»«Model-View-Controller»

ProxiesProxies = Модель = Модель MediatorMediator = Представление = Представление CommandsCommands = Контроллер = Контроллер

+ + NotificationsNotifications (Оповещения) (Оповещения) для для коммуникации.коммуникации.

+ + Façade ( (ФасадФасад)) для для координирования координирования

Шутка про Шутка про k=3k=3

Математик идет по улицеМатематик идет по улице..Видит — филармония, афиша, "Камерный Видит — филармония, афиша, "Камерный оркестр Джо Пауэлла".оркестр Джо Пауэлла".О, говорит, интересно, зайду.О, говорит, интересно, зайду.Через полчаса растроенный выходит: Через полчаса растроенный выходит: "Тьфу, тривиальный случай, "Тьфу, тривиальный случай, k=3k=3""

Математик что-то знал (Математик что-то знал (Паттерны?Паттерны?).).

Схема Схема PureMVCPureMVC

Схема Схема PureMVCPureMVC (0 (0xffffffxffffff))

Что дает Что дает PureMVCPureMVC

Дисциплина разработкиДисциплина разработки Общий язык для архитекторовОбщий язык для архитекторов Более устойчивый к рефакторингу проектБолее устойчивый к рефакторингу проект

Структура Структура PureMVCPureMVC

Фасад:Фасад: Показать все, что скрыто.Показать все, что скрыто.

Медиатор: Медиатор: Скрыть все, что видно.Скрыть все, что видно.

Посредник:Посредник: Отдать то, что взято.Отдать то, что взято.

Команда: Команда: Сделать, когда нужно.Сделать, когда нужно.

Оповещение:Оповещение: Сделаю все, что скажут.Сделаю все, что скажут. Пойду туда, куда пошлют.Пойду туда, куда пошлют. Принесу то, не знаю что.Принесу то, не знаю что.

Мы хотим знатьМы хотим знать разницуразницу

PureMVC or Cairngorm?PureMVC or Cairngorm?>>> Интересует Ваше мнение по этим библиотекам > Интересует Ваше мнение по этим библиотекам >> >> и вообще по паттерным решениям для Flex.и вообще по паттерным решениям для Flex.

Без сомнения и то и другое полезно. Но если бы еще авторы их уделяли Без сомнения и то и другое полезно. Но если бы еще авторы их уделяли достаточно внимания "расжевыванию" своих замыслов реализованных во достаточно внимания "расжевыванию" своих замыслов реализованных во фреймворке. фреймворке.

Качественное "расжевывание" - это когда даже студенту-программисту Качественное "расжевывание" - это когда даже студенту-программисту незнакомому с паттернами будет ясно что к чему. Потому что когда незнакомому с паттернами будет ясно что к чему. Потому что когда специалист не может оценить риски по миграции - это уже либо бестолковое специалист не может оценить риски по миграции - это уже либо бестолковое описание, либо "особая форма маркетинга" (сокрытие информации о описание, либо "особая форма маркетинга" (сокрытие информации о недостатках продукта) ИМХО. недостатках продукта) ИМХО.

[[httphttp://://groups.google.comgroups.google.com//groupgroup//fpugfpug//browse_threadbrowse_thread//threadthread/3770e9c4a296dad9/3770e9c4a296dad9]]

Изучение Изучение PureMVCPureMVC

http://puremvc.orghttp://puremvc.org Goals & BenefitsGoals & Benefits Conceptual DiagramConceptual Diagram Framework OverviewFramework Overview Best PracticesBest Practices

Статьи о PureMVC на русскомСтатьи о PureMVC на русском

10 советов по 10 советов по PureMVCPureMVC Что мы знаем о Что мы знаем о flashflash//flexflex фреймуоркахфреймуорках?? Пример Flash-галереи на Пример Flash-галереи на PureMVCPureMVC Как создать простой FLV-плеер во Как создать простой FLV-плеер во FlexFlex и и FlashFlash, используя , используя PureMVCPureMVC

Мои статьиМои статьи -= Чисто MVC =- (тут важны -= Чисто MVC =- (тут важны комментыкомменты)) Архитектура и ключевые фигуры Архитектура и ключевые фигуры фреймворкафреймворка PureMVCPureMVC Фасад (Фасад (FaçadeFaçade) — ядро и лицо ) — ядро и лицо фреймворкафреймворка PureMVCPureMVC Как устроены Модель, Вид и Управление во Как устроены Модель, Вид и Управление во фреймворкефреймворке PureMVCPureMVC Кто использует Кто использует CairngormCairngorm??

Обновления по статьям, новые ссылки: Обновления по статьям, новые ссылки: httphttp://://flash-ripper.comflash-ripper.com//archivesarchives/002194.php/002194.php

Развитие Развитие PureMVCPureMVC: Мультитон: Мультитон MultitonMultiton вместо вместо SingletonSingleton

http://en.wikipedia.org/wiki/Multiton_patternhttp://en.wikipedia.org/wiki/Multiton_pattern МультитонМультитон – паттерн, подобный Синглтону, – паттерн, подобный Синглтону,

позволяющий создание более одного экземпляра позволяющий создание более одного экземпляра класса.класса.

Вместо Одиночки – группа Одиночек, доступных Вместо Одиночки – группа Одиночек, доступных по ключам (экземпляров). по ключам (экземпляров). Клиенты не могут добавлять ключи.Клиенты не могут добавлять ключи. Никогда не возвращает пустую ссылку.Никогда не возвращает пустую ссылку.

Польза: упрощение работы с общими ресурсами в Польза: упрощение работы с общими ресурсами в приложении (shared objects).приложении (shared objects).

Централизованный доступ к хранилищу.Централизованный доступ к хранилищу.

Пример Пример использования использования

PureMVCPureMVC- в приложении карты -- в приложении карты -

Обновление карты-1Обновление карты-1: : ВидВид

Класс Класс MapViewMapView ( (boundaryboundary))package view package view {{

public class MapView extends Spritepublic class MapView extends Sprite{{

private function updateMap():voidprivate function updateMap():void{{

mapMediatormapMediator.onBBoxChanged(layersToLoad);.onBBoxChanged(layersToLoad);

}}}}

}}

Обновление карты-2: МедиаторОбновление карты-2: Медиатор

КлассКласс MapMediator MapMediator

package view package view {{

public class MapMediator extends public class MapMediator extends MediatorMediator{{

internal internal function onBBoxChanged(layersToLoad:function onBBoxChanged(layersToLoad: Array):Array): voidvoid

{{var noteBBoxUpdate:var noteBBoxUpdate: Notification = new Notification = new

NotificationNotification((ApplicatonFacadeApplicatonFacade..NOTE_BBOX_UPDATENOTE_BBOX_UPDATE););noteBBoxUpdate.noteBBoxUpdate.setBodysetBody(layersToLoad);(layersToLoad);facade.facade.notifyObserversnotifyObservers(noteBBoxUpdate);(noteBBoxUpdate);

}}}}

}}

Обновление карты-3: ФасадОбновление карты-3: ФасадКласс Класс ApplicationFacadeApplicationFacadepackagepackage{{

public class public class ApplicatonFacadeApplicatonFacade extends Facade implements extends Facade implements IFacadeIFacade {{

public static const public static const NOTE_BBOX_UPDATENOTE_BBOX_UPDATE: String= : String= "noteBBoxUpdate";"noteBBoxUpdate";

// Commands registration// Commands registrationoverrideoverride protected function protected function initializeControllerinitializeController(): void(): void{{

super.super.initializeControllerinitializeController();();

// Layer Model.updatePatchesInRectangle// Layer Model.updatePatchesInRectangleregisterCommandregisterCommand((NOTE_BBOX_UPDATENOTE_BBOX_UPDATE, , UpdateUpdateBBoxBBoxCommandCommand); );

}}}}

}}

Обновление карты-Обновление карты-4: 4: КомандаКоманда

Класс Класс UpdateBBoxCommandUpdateBBoxCommandpackage controller package controller {{

public class public class UpdateBBoxCommandUpdateBBoxCommand extends extends SimpleCommandSimpleCommand {{

overrideoverride public function public function executeexecute(note: (note: INotificationINotification): void): void

{{

ApplicatonFacadeApplicatonFacade.msProxy.updateMap(.msProxy.updateMap(notenote..getBodygetBody() as () as Array);Array);

}}}}

}}

Обновление карты-Обновление карты-5: 5: ПроксиПрокси

Класс Класс MapServerProxyMapServerProxypackage model package model {{public class public class MapServerProxyMapServerProxy extends extends ProxyProxy{{

public function public function updateMap updateMap (layersToLoad:Array):void(layersToLoad:Array):void

{{mapModel.loadLayers(layersToLoad);mapModel.loadLayers(layersToLoad);

}}}}

}}

Обновление карты-Обновление карты-6: 6: МодельМодель

Класс Класс MapModelMapModel

package model package model {{

internal class MapModelinternal class MapModel{{

internal function loadLayers (arrLayersToLoad:Array):voidinternal function loadLayers (arrLayersToLoad:Array):void{{

// // собственно загрузка данныхсобственно загрузка данных}}

}}}}

PureMVC PureMVC спешит на помощьспешит на помощь

Рефакторинг 1: Смена источника данных с Рефакторинг 1: Смена источника данных с Geo XML на AMFGeo XML на AMF

PureMVC PureMVC помогает еще разпомогает еще раз

Рефакторинг 2. Древовидный рендеринг карты.Рефакторинг 2. Древовидный рендеринг карты. Смена сигнатуры методаСмена сигнатуры метода

Было: Было: private function renderGeoEntity(data: private function renderGeoEntity(data: FlashGeoEntity): voidFlashGeoEntity): void

Стало: Стало: private function renderGeoEntity(): voidprivate function renderGeoEntity(): void // // после после initGeoEntityinitGeoEntity

Переход от Спрайтов к ШейпамПереход от Спрайтов к Шейпам Откат на Спрайты☻Откат на Спрайты☻

5 советов по 5 советов по PureMVCPureMVC

1.1. Используйте Используйте МедиаторыМедиаторы: создавайте : создавайте API API для компонентов вида в Медиаторах, а не для компонентов вида в Медиаторах, а не используйте их методы напрямуюиспользуйте их методы напрямую..

2.2. Используйте Используйте ОповещенияОповещения почаще (но не почаще (но не напрямую от Медиатора к Прокси)напрямую от Медиатора к Прокси)..

3.3. Используйте Используйте КомандыКоманды и МакроКоманды и МакроКоманды..4.4. Используйте Используйте Remote ProxyRemote Proxy..5.5. Используйте Используйте Value ObjectsValue Objects (VO). (VO).

Почему проект выжилПочему проект выжил

1.1. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала2.2. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала3.3. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала4.4. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала5.5. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала6.6. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала7.7. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала8.8. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала9.9. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала10.10. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала11.11. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала12.12. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала

QQ && AA