REACT MAP (интерактивная карта)

Ссылки

• Репозиторий https://github.com/mapuaptu/react-map
• Работающий пример - https://maptu-react-map.herokuapp.com/

Описание Локальной установки

1. Клонируем репозиторий. git clone https://github.com/mapuaptu/react-map.git

2. Переходим в проект. cd react-map

3. Устанавливаем клиентские зависимости (для локального просмотра). npm i --prefix client

4. Запускаем dev server. npm start --prefix client

Приложение работает на heroku, поэтому присутствует server.mjs.

Описание приложения

• Приложение состоит из двух частей. Панель добавления точек и карта.
• Вводим адрес, идет ображение к API Yandex geocoder, геокодер возвращает подходящий результат.
• Приложение берет координаты и адрес из ответа геокодера (даже если мы ввели название неверно).
• Приложение добавляет точку.
• При добавлении второй точки, между точками рисуется прямая линия, если точек больше, то линии между точками рисуются в том порядке, в котором они расположены на левой панели.
• Точки можно перемещать перетаскиванием, как на карте так и на панели. Соотвественно линии перерисовываются.
• Если добавлено 2 и более точек, то появляется кнопка удалить все, которая удаляет все точки с панели и карты.

Ответы на тестовые вопросы

Q1.

Пользователь

• Приложение иммет интуитивно понятный интерфейс
• Современный внешний вид, приятная анимация
• Быстро работатет
• Выполняет нужные пользователю функции

Менеджер

• Соответствует тз
• Быстрая интеграция новых функциональных возможностей
• Быстрое внесение изменений и правка багов

Дизайнер

• Современный внешний вид, приятная анимация

Верстальщик

• Современный внешний вид, приятная анимация
• Хорошо написанный, поддерживаемый код
• Быстрая интеграция новых функциональных возможностей
• Быстрое внесение изменений и правка багов

Бекенд

• Хорошо написанный, поддерживаемый код
• Минимазация API запросов
• Быстрая интеграция новых функциональных возможностей
• Быстрое внесение изменений и правка багов

Q2.

На последнем месте работы, не было многостраничных сайтов. Работа велась над анимированными SPA, написанными на собственных наработках компании. jQuery, vanilla JS

Если менялась функциональность, то просто переписывалась старая. Проекты после их релиза, практически не поддерживались в дальнейшем (промо).

В разработке использовались - vanilla JS, ES6, jQuery, scss, pug, gsap, gulp, webpack, git (bitbucked), Abobe Photoshop, Figma, Avacode, Adobe Illustrator, Slack, canvas, videojs, browserstack и тд.

Q3.

Презентационный компонент:

• Основая идея - как должен выглядеть компонент.
• Может содержать как презентационный компонент так и контейнер, и обычно имеет разметку и собственные стили.
• Получает данные через props.
• Очень редко имеет свой state.
• Написан как функциональный компонент.

Контейнер

• Основная идея - как должен работать.
• Может содержать как презентационный компонент так и контейнер, но обыно не иммет разметки и собсвенные стили.
• Передает данные и поведение другим компонентам.
• Часто имеет state, и служит источником данных.
• Написан как классовый компонент.

Преимущества:

• Лучшее разбитие и понимание кода.
• Переиспользоваемость кода.
• Стилизация и функциональность отделены друг от друга.

Q4.

Прототипное наследование(ES6 - обертка на классах). По работе не приходилось заниматься реализацией наследования.

Q5.

Mocha, Chai, Jest. Нет опыта тестирования веб-приложений.

Q6.

Свяжусь с менеджером проетка, объясню ситуацию, после в крайнем случае - реализую сам, глядя на какой либо пример известного сайта.

Q7.

VSCODE, стартовая заготовка проекта, git, emmet, shortcuts, eslint, stylelint, prettier, chrome dev tools.

Q8.

https://habr.com/

https://medium.com/

https://scotch.io/

IOT

Q9.

Последние работы:

http://app.moduleframework.com/

http://galaxys8.rbc.ru/

http://dex.rbc.ru/