https://github.com/ruslanxdev/yandex-shri-2018-homework-8
Домашнее задание #8 "Архитектура" в ШРИ Яндекса 2018.
https://github.com/ruslanxdev/yandex-shri-2018-homework-8
Last synced: about 1 year ago
JSON representation
Домашнее задание #8 "Архитектура" в ШРИ Яндекса 2018.
- Host: GitHub
- URL: https://github.com/ruslanxdev/yandex-shri-2018-homework-8
- Owner: ruslanxdev
- Created: 2018-04-01T09:08:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-04T21:07:02.000Z (over 8 years ago)
- Last Synced: 2025-02-14T21:35:38.264Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://ruslankhh.com/yandex-shri-2018-homework-8
- Size: 688 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание "Архитектура"
Домашнее задание #8 в ШРИ Яндекса 2018.
## Задание
### Постановка задачи
Вам предлагается реализовать один из наиболее популярных в мире фронтенда архитектурных подходов - Flux - в формате простого фреймворка. Ваш фреймворк должен уметь обрабатывать действия пользователя и предоставлять API для связи с бэкэндом
### Требуемая реализация
Вам предлагается 2 файла - `index.html` и `sendToServer.js`.
В `index.html` вы найдете простую форму: инпут для ввода текста, кнопку "отправить на сервер" и лейбл.
В `sendToServer.js` находится фейковый метод отправки данных на сервер. После "успешной отправки" метод вызывает событие `dataIsSent`.
Вам предлагается написать Flux реализацию фреймворка, который бы осуществлял отправку данных на сервер по нажатию на кнопку, а после успешной отправки писал в лейбле "Сервер принял данные <текст из инпута>".
Каждый этап (передача данных и/или управления между элементами архитектуры) должен логироваться в консоль и на экран.
**Использование фреймворков и библиотек, в том числе jQuery, запрещено.**
Реализовывать виртуальный DOM для Flux-архитектуры не нужно. Изменять API `sendToServer` - можно и даже рекомендуется (при сохранении "функциональности"). Изменять верстку index.html - можно, но необязательно.
Обратите внимание, что в стандарте es5 еще нет классов и разделения кода на модули. Если вы используете es5 - прочитайте, как реализовать модули и классы, например, в книге Стояна Стефанова "Javscript. Шаблоны".
### Минимальное решение
- [x] Реализация фреймворка Flux с логированием в консоль
- [x] Сделать логирование событий на экран
### Оптимальное решение
- [ ] Реализация MVP-фреймворка с той же функциональностью
### Дополнительное задание
- [ ] Реализовать другие архитектурные подходы (MVC, MVVM)
## Запуск
```bash
$ npm i
$ npm run build
$ npm start
```
Для разработки:
```bash
$ npm run dev
```
## Выполнение задания
- Подредактировал вёрстку и стили
- Сделал фреймворк для создания пользовательских интерфейсов [bem](https://github.com/ruslankhh/yandex-shri-2018-homework-8/tree/master/packages/bem).
- Реализует компонентный подход по методологии БЭМ.
- Сделал фреймворк для логирования [logger](https://github.com/ruslankhh/yandex-shri-2018-homework-8/tree/master/packages/logger).
- Позволяет следить (логировать) данные которые поступают/выходят из наблюдаемых функций.
- Реализует паттерн Декоратор.
- Позволяет подписываться/отписываться на вызовы этих функций. Таким образом нам не нужно писать самим `console.log`-и внутри функций. И мы можем в любой момент добавить или убрать слушатели (обработчики событий логирования).
- Функцию [sendToServer](https://github.com/ruslankhh/yandex-shri-2018-homework-8/blob/master/src/utils/sendToServer.js) переписал. Теперь она возврощает просто промис, который резолвится с какой-то небольшой задержкой.
### Flux
- Разбил View на блоки и контейнеры с помощью bem.
- Блоки отвечают за то, как будет выглядеть (вёрстка и стили) View.
- Контейнеры отвечают за то, какие данные будут во View, и за обновление этих данных.
- Вполне возможно контейнеры можно назвать Presenter-ами.
- Сделал фреймворк для работы с состоянием [flux](https://github.com/ruslankhh/yandex-shri-2018-homework-8/tree/master/packages/flux).
- Реализует архитектурный паттерн Flux (actions, dispatcher, store, view).
- Позволяет подписываться/отписываться на изменения состояния.
- Реализовал логирование с помощью logger-a.
- Сначала лог существовал независимо от store.
- Потом решил внести лог в store. Так как лог всё-таки является частью приложения. И по понятным причинам получилась рекурсия. Избавился от неё частичным логированием (что logger позволял удобно сделать). Но в итоге потерялась связь между действиями пользователся и данными которые выводились в логе (там выводились данные и самого лога). И лог экспоненциально рос в связи с этим. Реализацию можно посмотреть по тегу [log-in-store](https://github.com/ruslankhh/yandex-shri-2018-homework-8/tree/log-in-store).
- В итоге решил отказаться от лога в store для большей наглядности работы приложения.
- Возможно стоит оставить его в store, и записывать в log данные без данных log (ну вы поняли).