/typescript-task-1

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

Primary LanguageTypeScript

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

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

Настройка IDE

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

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

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

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

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

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

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

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

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

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

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

Interaction

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

В директории 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

Arkady Strugatsky