romassol/typescript-task-1

Задача «Приключения Аркадия в Тайплэнде»

Задача «Приключения Аркадия в Тайплэнде»

Перед выполнением задания внимательно прочитайте:

• О всех этапах проверки задания
• Как отправить пулл
• Как пройти тесты

Настройка IDE

WebStorm включает в себя всё необходимое для работы.

Для VSCode рекомендуется установить следующие плагины:

• TSLint
• Prettier
• EditorConfig

Доступные команды

Запускаются так: npm run <command>

Команда	Действие
build	Компиляция TypeScript кода в JavaScript (в директорию dist)
watch	Инкрементальная компиляция в фоновом режиме
start	Запуск скомпилированного решения
test	Запуск скомпилированных тестов
lint	Запуск статического анализатора кода
format	Запуск утилиты форматирования кода

Основное задание

Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.

На выходных Аркадию позвонил друг из Тайплэнда. У него нашлась интересная работа. Друг давно разрабатывает бэкенды и уже успел написать несколько крутых API с данными о погоде и новостях. Но он ничего не смыслит в интерфейсах, поэтому предложил заняться ими нашему герою. Аркадий отправился в незнакомый город. Нужно помочь ему справиться с этой работёнкой.

На планировании друзья решили, что будут разрабатывать две версии интерфейса — мобильную и десктопную. На мобильном экране должна отображаться информация о последнем измерении погоды и последняя новость. Десктопный экран больше, так что он должен показывать 3 последних новости и 2 последних измерения погоды.

Важным архитектурным решением стало применение паттерна "Наблюдатель". Это должно позволить экранам оперативно реагировать на изменения данных и всегда показывать актуальную информацию.

Некоторые договорённости зарисовали на доске и пошли отмечать встречу.

Наутро Аркадий обнаружил, что забыл почти всё о чём они говорили вчера. Вам придётся разобраться.

В директории src вас ждут оставленные наброски приложения. Его составляющие:

• state — Сущности отвечающие за состояние приложения
• utils — Вспомогательные абстракции
• view — "Экраны" приложения

Требования

• Интерфейс IObservable нужно реализовать в классе Observable

• NewsState и WeatherState должны отдавать только последние новости и погоду

• При обновлении данных в хранилищах экраны должны реагировать на изменения

• Экраны должны реализовывать интерфейс IView и выводить новые данные с помощью console.log

• console.log должен вызываться методом render() только 1 раз

• Десктопный экран должен показывать 3 последних новости и 2 последних измерения погоды

• Мобильный экран должен показывать последнее измерение погоды и последнюю новость

• Новости выводятся в формате [${time}] ${category} - ${title}

• Погода выводится в формате [${time}] ${temperature} C, ${pressure} P, ${humidity} U

• Метод render() у экранов должен выводить контент обёрнутый в блок <div> с соответствующими классами mobile и desktop. Пример вывода:

  <div class="mobile">
  [12:00] JavaScript - Как использовать декораторы с фабричными функциями в JavaScript
  [14:00] -7.2 C, 756.4 P, 76 U
  </div>
  

Примеры можно посмотреть в index.ts и открытых тестах в директории __tests__.

Дополнительное задание (+10 к скорости работы)

Бывает так, что источник данных сбоит и повторно отправляет одни и те же объекты, а render() – дорогая операция. Избавьтесь от лишних вызовов метода render(), реализовав в экранах поверхностное сравнение новых данных с теми, которые были показаны во время прошлого вызова.

Выставлять isStar теперь нужно в src/config.ts