КТО
Я

?

Владимир Минкин

Более 15 лет в производстве IT продуктов

КТО Я?

Программист и Технический руководитель

Для тех кто считает что -
работа говорит сама за себя

КТО Я?

Дизайн

A design is a plan or specification for the construction of an object or system.

Wikipedia

Дизайн

Зачем?

Что?
 Когда?

Как?

Где?

Кто?

Это про ответы на вопросы

Дизайн

Architecture is not about making decisions earlier, but making decisions late.

Robert C. Martin

другое "общее" определение дизайна это - архитектура

Дизайн

Всё как plugin, какие то "black boxes"

• Минимум "связности"
• Dependencies injection 
• Только ввод и вывод

в "идеальной" системе

Дизайн

Распределение данных

Система событий

(Finite State Machine)

многие программные системы используют в себе:

Signals

И эти две особенности можно описать как набор строк:

Data

• UPDATE_USER_NAME
• CREATE_TODO_ITEM
• MOVIE_SELECTED
• FILTERS_UPDATED
• SAVE_TO_FAVOURITE
• LOAD_NEXT_PAGE
• TURN_OFF_SOUND
• PURCHASE_PRODUCT
• ...

• USER_PROFILE
• MOVIE_BY_ID
• FILTER_CONDITIONS
• GAME_DATA
• UNITS_LIST
• TODO_BY_ID
• SOUND_SETTINGS
• CURRENT_LANGUAGE
• ...

Дизайн

Communication Layer

Data container Layer

ключ - значение

Пусть эти наборы будут храниться в слоях:

Дизайн

Strings API

• Immutable

• Value types

Strings это хорошие кандидаты для ключей в слоях

Strings API

UserVO getUserAccount: {
    name : "Vladimir Minkin"
    email : "vladimir.minkin@gmail.com"
}

.submitUserAccount({
    payload (DTO)
})

(UI) компонент рассматривается с позиции данных
(через вызов функций)

получаем

выводим

Strings API

Набор

производимых сигналов

(или потребляемых)

каждый "Black Box" может быть описан как два набора строк:

Набор получаемых данных

Strings API

Data API:
USER_ACCOUNT

Singals API:
SUBMIT_USER_ACCOUNT

Методы можно заменять строковыми константами

Strings API

export default UserDataKeys: {

    ACCOUNT: "UserAccount",
    POSTS: "UserPosts",

}
export default UserSingals: {

    SUBMIT_ACCOUNT: "AccountSubmit",
    CREATE_POST: "CreatePost",
}

Функциональные части системы могут быть объединены:

Strings API

UserSingals.SUBMIT_ACCOUNT

Некоторые системные "Black Box"  слушают и обрабатывают сигналы 

{ Payload }

"процессоры" принимают решения при получении сигнала с данными.

Strings API

Независимые компоненты системы

Компоненты не знают о источнике своих данных или кто будет обрабатывать сигналы которые они производят

(реализация Component Driven Development)

Strings API

Компоненты могут быть
загружены динамически и

использовать наборы Strings API

системы

(или не использовать)

Компоненты получают данные с помощью Data API,

слушают и отправляют "сигналы" с Signals API

Communication Layer

Data container Layer

Strings API

FLUX

Flux is a pattern for managing data flow in application. The most important concept is that data flows in one direction.  

https://github.com/facebook/flux

FLUX

Концепция "хода изменения" в FLUX

FLUX

Что для этого нужно?

"Реакция" компонента

на изменение данных

компонент уже знает как получить данные

FLUX

Шаблон Observer в помощь

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

USER_ACCOUNT: "UserAccount"

value: {
    name: ""
    email: ""
}

- subscribe (params)

- unsubscribe (params)

- value (set / get )

FLUX

Observer - позволяет реализовать "обнонаправленное" изменение:

"UserAccount"

subscribe (callback)

Отправляет сигнал(ы)

знает как себя обновить

Обрабатывает сигнал(ы)

Обновляет данные

"блэк бокс"

Data API - Key:

другой "блэк бокс"

FLUX

В результате:

• Обновления из одного источника

• Явные обновления (или re-render)

• Нет скрытых методов

• Не зависит от языка прогр-ния

Wire

Реализация идеи Strings API в
communication и data-container слоях

Изначально написано на Dart.

https://github.com/wiresware 

Wire

• Communication Layer - содержит "signals", строковые ключи ассоциированные со слушателями (в "скоупе").
   
• Data Container Layer - key-value in-memory map, где значения это экземпляры observer объекта.

Два статических слоя

Wire

API

Wire

Processors
(or Controllers)

• слушают сигланы,

• части business logic,

• знают про "externals",

• обновляют данные,

• отправляют сигналы.

В такой системе различают два типа "сущностей":

​Consumers
(or View)

• потребляют данные, 

• подписываются на обновления,

• обновляют свое состояние (local),

• отправляют сигналы с "нагрузкой",

• также могут слушать сигналы **.

Wire

Classical MVC - Active Models *

MVC in General

At the heart of MVC is what I call Separated Presentation...

- Martin Fowler

В основе идеи о "Раздельное представление":

- Martin Fowler

PureMVC

MVC is simple, there's no reason to keep changing it

- Mr. Cliff Hall автор PureMVC

Примеры

COUNTER

Примеры

COUNTER

Примеры

View

Примеры

Wire.send

Примеры

Wire.add

Примеры

Wire.data

Примеры

Wire.data

Примеры

TODO

Примеры

VIEW

Примеры

VIEW

Примеры

MAIN

Model

Примеры

CONTROLLER

Примеры

COMMAND

Примеры

TOGGLE