What the Flux

Кто я?

• Front-end разработчик в DataRobot
• 4+ года опыта в разработке SPA
• Фанат Vanilla JS

О чем?

• Поговорим об архитектуре
• Подумаем, на что мы тратим много времени
• Не говорим о сервере
• Не затрагиваем UI (почти)

Все что нужно знать о UI

render = (Data) => UI;

Идеальный мир

				render = (Data) => UI;
				update = (State, Action) => NewState;
			

				Actions = [Update This, Add That, Delete Shit, ...];
				AppState = Actions.reduce(update, InitialState);
				AppState.subscribe(render);
			

Архитектура и дизайн

• Архитектура — набор четко определенных ограничений (правил)
• Дизайн — набор деталей интерфейса и элементов системы

Flux — архитектура, работа с диспатчером — дизайн

Flux

• Паттерн, не фреймворк
• Не MVC
• Взял все лучшее из Event Sourcing и CQRS
• Отделяет бизнес-логику, работу с сервером и рендеринг в отдельные слои

Flux для вас

• Данные на экране меняются постоянно
• Одни и те же данные могут быть показаны в разном виде
• Много асинхронных действий
• Проект большой и необходим саппорт

Основные идеи

• Однонаправленный поток данных
• Разделение процессов чтения и записи данных

Stores

• Синглтон
• Не модель. Содержит одну или более моделей
• Кеш состояния
• Имеет геттеры, не имеет сеттеров
• Может доставать данные из других сторов
• Изменяют состояние моделей на основе экшнов
• Знает только о Диспатчере

Dispatcher

• Центральный объект системы
• Принимает все экшны
• Отправляет каждый экшн всем сторам

Dispatcher

				Flux = require('flux');
				 
				Dispatcher = new Flux.Dispatcher();
			

Dispatcher API

				Dispatcher.dispatch(action);
				Dispatcher.register((action) => ...);
			

Actions

• Просто объект
• В идеале выглядит как заметка в газете
• Заголовок рассказывает о том, что произошло
• Тело несет дополнительную информацию о событии

Action payload

				{
				    type: ActionTypes.DEPOSITED_INTO_ACCOUNT
				    data: {
				        accountID: 13,
				        amount: 500,
				        timestamp: 1433482935845
				    }
				}
			

Action Types

Важна семантика

• Всегда в прошлом времени
• Если возможно — в пассивной форме
• Только в терминах предметной области
• Говорит о том, что произошло, не сеттер
• В реализации лучше использовать константы

Константы

const TODO_CREATED = 'TODO_CREATED';

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

Плохие имена

				SHOW_LOAD_SPINNER
				OPEN_MODAL
				CREATE_TODO
				LOAD_USERS
				UPDATE_SOME_BULLSHIT
			

Хорошие имена

				TODO_CREATED
				DEPOSITED_INTO_ACCOUNT
				WITHDRAWAL_FAILED
				TOKEN_RECEIVED
				USER_INFO_UPDATED
			

Key Mirror

				ActionTypes = keyMirror({
				    TODO_CREATED: null,
				    LIST_REQUESTED: null
				});
			

Наивная реализация

				Dispatcher.register(function(action) {
				    switch (action.type) {
				    case TODO_ADDED:
				        // мутации
				        break;
				    case TODO_REMOVED:
				        // мутации
				        break;
				    }
				});
			

Чистая функция

				function CounterStore(state = 0, action) {
				

					    switch (action.type) {
					    case DECREMENT:
					        return state – 1;
					    case INCREMENT:
					        return state + 1;
					    }
				
				}
			

Умная огранизация

				Store = {
				    [ActionTypes.TODO_ADDED](state, action) {},
				    [ActionTypes.TODO_REMOVED](state, action) {}
				};
			

Flux Stateful — хорошие сторы

Action Creators

• Слой модулей, создающих экшны (Action)
• Знает о Диспатчере
• Знает о внешнем API (например, сервер)
• Может работать с асинхронными операциями

Action Creators

				var Dispatcher = require('AppDispatcher');
				

					 
					exports.addItemInCard = function(item){
				
				    Dispatcher.dispatch({
				        type: ITEM_ADDED_IN_CARD,
				

					        data: item
					    });
					};
				
			

WebAPI

• Изолированный от системы слой кода
• Работает с внешним миром (сервер, внешнее окружение и т.д.)
• Только асинхронное API

Async Action Creators

				exports.requestUserInfo = function(user){
				  dispatch(USER_INFO_LOADING_STARTED, user);
				  WebAPI.loadUserInfo(user).then(
				    (info) => dispatch(USER_INFO_LOADED, info),
				    (error) => dispatch(USER_INFO_LOADING_FAILED, error)
				

					  );
					};
				
			

Что не так с современными JS-фреймворками

• Большинство фреймворков делают упор на уменьшение бутстрапа
• Вы больше времени тратите на работу с багами, чем на бутстрап системы

Популярные

• Reflux (Just NO!)
• Fluxible
• Flummox
• Alt

Profits

• Предсказуемость
• Тестируемость
• Single Source of Truth
• Flux не заботится о UI (можно использовать все)
• Минимизация усилий по расширению функционала
• Логгирование из коробки

Ссылки

• github.com/facebook/flux
• github.com/alexeyraspopov/flux-stateful
• github.com/voronianski/flux-comparison
• Josh Perez: Principles of Flux
• Dan Abramov: The Case for Flux
• Cássio Zen: Flux Cargo-Culting

Спасибо!

• twitter.com/alexeyraspopov
• github.com/alexeyraspopov

Ссылка на слайды — alexeyraspopov.github.io/talks/what-the-flux