View
57
Download
0
Category
Preview:
DESCRIPTION
«Расскажем о нашем опыте перехода к событийной модели при разработке одного из проектов заказчика. О том, какие подходы использовали, с какими проблемами столкнулись, как с ними боролись и что в итоге получили. А также о том, как бы сделали подобный проект, уже имея текущую экспертизу :) Целевая аудитория: frontend-разработчики, познавшие боль при реализации сложных интерфейсных решений на базе коллбеков; использующие JS в качестве инструмента для разработки, а не только для подключения готовых скриптов».
Citation preview
"Переход от коллбеков к событиям"
Веретенников А.Семаков И.
Задача: разработать frontend-часть для нового проекта заказчика
Public API
Backend FrontendAJAX
Задача: разработать frontend-часть для нового проекта заказчика
Frontend
Задача: разработать frontend-часть для нового проекта заказчика
Пути решения
Callback
Задача: разработать frontend-часть для нового проекта заказчика
Пути решения
Event-driven
Задача: разработать frontend-часть для нового проекта заказчика
Пути решения
Callback Event-driven
?
CallbackСначала все выглядит вот так
Component_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};
Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};
CallbackПоявляются новые требованияComponent_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};
Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};
Component_3 = { business : function(){ Component_1.reset(Component_3.callback); }, callback : function(){ ... }};
Callback... и еще:Component_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};
Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};
Component_3 = { business : function(){ Component_1.reset(Component_3.callback); }, callback : function(){ ... }};
Component_4 = { business : function(){ Component_2.business(); }};
Callback.. а в итоге получаем
Callback
Хорошо работают на несложных проектах
Слабая гибкость из-за постоянно возрастающих зависимостей
Event-driven. Теория
Event-driven. Теория
<ОБРАЗЕЦ КОДА>
Event-driven. Практика
С точки зрения кода Manager - тот же Module
В нашем случае, часть функций менеджера выполняется jQuery
Другая часть выполняется одним из компонентов
Manager "размазало" по коду :)Но дискомофорта из-за этого не испытываем
Event-driven. Практика
Шина
Непосредственно на компоненте
Специально созданный объект (proxy)
Генерируем сразу на компоненте.Избавились от посредников
Вызов событий
Event-driven. Практика
События привязаны к компонентам.
Некоторые события существуют вне компонентов (один элемент - один эвент - несколько компонентов)
Разные компоненты могут вызывать один и тот же эвент
Проблема зоны видимости событий
Event-driven. Практика
Каждому источнику - уникальное событие
Передавать источник события
Источник события — параметр события
Кто вызвал событие на компоненте?
Event-driven. Практика
Получатель - не всегда источник.
Каждому получателю - уникальное событие
Передавать получателя
Получатель события - параметр события
Для кого предназначено событие?
Event-driven. Практика
Как быть с дефолтными событиями?
Как быть с событиями конкретных компонентов?
Что делать с общими событиями?
Имена события - параметризуемые.
Проблема именования событий
Event-driven. Практика
Событие предназначено для связывания компонентов
Компонент слушает сам себя
Кто кого: метод вызывает событие или же событие вызывает метод?
Проблемы внутри компонента
Event-driven. Итоги
Одинаково работают на любых проектах
Меньше зависимостей, больше гибкости
Лучшая отказоустойстойчивость
Сложность восприятия
Забыть нельзя использовать
Recommended