#Введение

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

AngularJS - любимый многими фреймверк от Google, предоставляющий декларативный подход к описанию шаблонов и возможность просто управлять данными с помощью пространств. Плюсы: полноценный фреймверк, обширный АПИ дает все необходимые инструменты для программиста, декларативный подход и двунаправленное упрощает создание простых приложений и компонентов, удобное использование JQuery плагинов в системе Angular.

К недостаткам (версии 1.x) можно отнести тяжелый рендеринг при изменении данных (клиентская производительность), объемную доменную логику в API директив, при создании выражений вынесение бизнес логики в шаблоны.

ReactJS - молодой и захватывающий популярность фреймверк от Facebook, дающий возможность быстро и эффективно создавать компоненты отображения данных.

Плюсы:

Изоморфность, virtual dom (хранение изменений в виртуальном дереве) компонентов, узловые изменения. Собственная система трансляция событий, обработчики только в виртуальном дереве, нет необходимости подписок. Простой, фактически отсутсвует доменная логика, позволяет использовать javascript в шаблонах. Функциональный подход, внутренне и внешнее состояние компонента. Использование последних новшесты ES6, Компоненты: material design и другие.

Минусы ReactJS - Отвечает только за отображение, для всего остального потребуются сторонние библиотеки: Для создания бизнес логики и взаимодействия компонентов - Flux, Redux; для роутинга, для взаимодействия с сервером, а также сложные компоненты UI. Благо сообещество очень активно.

##Введение FMVC

Fastmvc - *Фреймверк, реализующий модель MVC(c элементами VM).

Нацелен на использования в рамках вебкомпонентов и одностраничных приложений. Зависимости: (underscore|lodash).js.

Facade - фасад приложения, объединяющий компоненты модели (данные, наборы данных) в единое пространство, а также медиаторов, которые отвечают за создание элементов представления и связывание отображения с моделями и фасадом.

Model's - в простейшем приближении это контейнеры данных, которые отслеживают изменения в данных и оповещает подписчиков об изменениях. Исходные модели содержат чистые данные, имеют механизмы взаимодействия с бэкендом, могут содержать связанные бизнес логикой модели.

Результирующие модели могут быть производными от одной или нескольких исходных моделей, выполнять с ними функции объединения(пересечения,разницы), получая результат применять к данным различные функторы (filter,map,reduce).

При изменении исходных моделей и автоматически обновляются и отправляют события изменения всем подписчикам.

Mediator's - создают представления, создают вложенные медиаторы, дают доступ к глобальному скопу моделей через фасад для представлений.

View - представления, реализующие или V концепцию - события транслируются по дереву комонентов в ближайший медиатор и VM концепцию - события напрямую транслируются в модель. Отображения могут быть связаны с моделью, в данном случае создадутся необходимые связи с моделью и компонент будет изменен при изменении связанных данных.

##Введение Fast templates

###Позволяют реализовать паттерн "PVM" Presentation - обработка входящих данных и их адаптация, например применение i18n и фильтров. VM - прямой биндинг изменений представлений в модели, через систему обработчиков событий.

###Состояние Имеют внутреннее состояния (states), на основе которых происходит их рендеринг.

###Внешние данные Работа как с чистыми данными, так и с моделями, для которых отслеживаются изменения - однонаправленный биндинг; Наличие двустороннего биндинга, в том числе с использованием фильтров; Шаблоны отслеживают изменения используемых полей объектов, далее при их изменении, обновляют точечно узлы DOM.

###Система выражений и деклараций Возможность описывать в шаблонах связи с данными и состояниями используя выражения, а также использовать JavaScript(только в обработчиках событий).

Object dom (изменения проходят в виртуальном объекте контроллере, после чего переносятся в его DOM дерево)

Все применяемые изменения точные, с минимальными прерисовками;

###Собственная система диспетчеризации событий События браузера транслируются во внутренние события, которые распространяются по Object dom дереву. Фактически внутри стоит один обработчик на рутовом объекте (window)

###Расширенная система работы с классами и стилями (CSS) DOM элемента внутри шаблона

###Поддержка словарей Компонент может использовать как собственные словари, так и глобальные, связанные с приложением

###Поддержка и инкапсуляция стилей компонентов*** Компонент может содержать собственные стили, которые загружаются в COM при активации компонента.

###Шаблоны Шаблоны это виртуальная модель DOM компонента, описываются в html подобной разметкой с описанием статических и динамических взаимосвязей, в процессе обработки они пробразуются в JavaScript объекты, наследующие базовый класс TemplateView. Статические взаимосвязи постоянны, динамические - меняются автоматически с применением точечных изменений в узлах DOM.

<div
      .stateHandlers='hover,selected,disable'
      .onaction='myEvent'

      class='button button-{state.selected} button-{state.disabled}'
      style="top:{state.top}px;left:{state.left}px;"
      >{data}
</div>

##Описание шаблона компонента:

Шаблоны могут содержать

Стандартный html синтаксис, со статическими аттрибутами:

<input placeholder='Ваше имя' value='Вася' />

Синтаксис, со динамическими аттрибутами:

<input placeholder='{state.placeholder}' value='{data.name}' />

Синтаксис, с динамическими выражениями:

<div>{(data.age>=30?'Здравствуйте':'Здравствуй')} {data.name}</div>

Синтаксис, со статическими параметрами компонента:

<div state.selected='true'></div>

Синтаксис, с динамическими параметрами компонента:

<div state.selected='{data.selected}'></div>

###Параметры компонентов:

Установка и валидация состояний статических и динамичесих: state.* state.selected="true" state.selected="{data}" state.selected="{(!data.phone)}"

Установка автоматических обработчиков событий пользователя: .stateHandlers="hover,selected"

###Общие параметры компонентов и элементов DOM:

Установка линка в компонент, элемент будет доступен по прямой ссылке в компоненте myComponent["propertyName"] (после завершения стадии createDom) .ln="propertyName"

?? Установка наличия компонента в DOM в зависимости от данных или состояний: states="{state.selected}" states="{data.selected}" states="{(!data.selected)}"

?? Работа с дата-провайдерами для произвольных узлов: children.data="data.users" children.model="data.users" children.class="ft.Button" children.stateHandlers="hover,selected" children.state.selected="{data.selected===ctx.data}"

Установка собственных обработчиков: .on* (browser event type) .onclick="delete" .onclick="{this.model.dispose();}

###Аттрибуты элементов DOM Все доступные аттрибуты поддерживают выражения placeholder="{data.help}" или placeholder="{state.help}"
value="{data.value}" width="{data.width}px"

###Выражения

Выражения автоматически вычисляются при изменении связанных данных, и обновляют DOM результирующим знаяением.

Данные использующиеся в html контексте: {data},{data.age},{data.image.href} - Возвращение полей данных произвольной глубины {data.age|convertToRussianAge|wrapBrackets} - Возвращение данных с фильтрами {(data.age>30?(data.name + ' старше 30'):(data.name 'младше 30'))} - Возвращение результата простых выражений со связанными данными {data.name as NAME, data.age as AGE|i18n.age} - Возвращение сложных данных, которые обрабатываются внутри словаря

###States

Типы значения сотояний: boolean, string, number;

Состояние - внутреннее свойство представления, не связано с внешними свойствами (данными и моделями).

1. Дефолтные состояния связаны с основным поведением отображения: наведение, выбор, фокус, отключение и т.д.
2. Кастомные состояния могут быть связанными с сущностями бизнес логики или отражать состояние других частей, например моделей.

Изменение состояния может распространяется как вверх по дереву, так и в низ, в зависимости от типа состояния (View->ListView) или (ListView->View) Что приведет к цепочке инвалидации.

Инициализация:

<div .stateHandlers="hover" class="button-{state.hover}">My simple button</div>

В данном случае мы активируем состояние hover и базовом классе TemplateView автоматически активируются внутренние слушатели mouseover/mouseout при добавлении в дом экземпляра. Класс button-hover будет добавлен при наведении и удален при отведении мышки.

Возможности состояний:

1. Могут использоваться в дочерних элементах для расширения дома в определенных состоянии

<div .stateHandlers="hover">
      <div id='hoverDiv' states='{state.hover}'>Элемент создается в DOM при наведении мышки</div>
</div>

Элемент "hoverDiv" автоматически добавится в DOM при наведении на родительский элемент

###Использование в аттрибутах

Использование в стилях

<div state.top='0' style="top:{state.top}px">При изменении состояния top изменяется отступ сверху</div>

Использование в классах

<div .stateHandlers="hover" state.hover='false' class='button button-{state.hover}'></div>

Использование в любых аттрибутах

<input state.placeholder='Enter your name' placeholder='{state.placeholder} />

Элемент получит класс "button-hover" при наведении и потеряет класс при отведении мыши

3. Использование в выражениях

<div>
  {(state.hover?'Мышка наведена':'Мышка отведена')} ... Состояние наведения - {state.hover} (отобразит true при наведении, false при отведении мышки)
</div>

Текст в TextNode формируется с помощью выражений

<div state.selected="{data.selected}" class="component component-{state.selected}">

Данный компонент будет иметь класс "component-selected", в случае когда данные контекста компонента будут установлены, и класс автоматически пропадет, в случае если данные будут удалены.

4. stateHandlers - Включение автоматических обработчиков событий

<div .stateHandlers="hover,selected,focused"></div>

Для компонентов можно выключать и выключать события, в том числе и при композиции

<div>
  ...
  <ft.Button .stateHandler="hover">Кнопка подсвечивается, установка состояния оверайдится установкой параметра на уровне компонента, устанавливаются обработчики только hover</ft.Button>
  <ft.Button>Кнопка имеющая все обработчики (hover,selected,focused)</ft.Button>
</div>

Двустороний биндинг

.out.[state] - Двусторонний биндинг доступен для любого свойства (состояния) компонента, в значении передается путь к внешнему свойству;

<ui.Input 
    .out.value="data.name|addRest" 
    .value="{data.name|removeRest}" 
    .state.placeholder="{data.placeholder}">
</ui.Input>

##UI Базовый набор элементов отображения, которые реализуют концепцию виртуального (shadow) dom.

v3

var filterModel = model('filter').setData({}).setChanges({enabled: true}, true); var dataModel = model('items').setData([ model('item', { enabled: false })]); var composedModel = modelMix(filterModel, dataModel) .debounce(500) .handler( (filterModel:model, dataModel:model, reasons:Array[])=>{ var items = dataModel.getData().filter( function(itemModel) { return itemModel.getData().enabled === filterModel.getData().enabled; });

    this.setData(item);
}

);

app.push(filterModel, dataModel);