Разработка фронтенда
Категории: Кейсы
Вопрос
Каким образом (какие языки, технологии используются) создаются интерактивные сайты по типу миро, notion, figma. Чтобы в окне можно было перемещать блоки во фрейме.))
Ответ
Вопрос многогранный и явно не уместится в пост в Пачке. Но в целом, для любого сайта, который работает в браузере есть набор базовых технологий:
- HTML - структурирует информацию на странице, разбивает ее на блоки, объекты
- CSS - отвечает за красоту - то, какие цвета, градиенты мы видим на странице
- JavaScript - отвечает за всю динамику, описывает поведение блоков на странице при наведении курсора мыши, при кликании, может создавать и может удалять объекты со страницы и т.д.
- Движок браузера - отвечает за то, чтобы все блоки выше объединить и отобразить для вас, как для пользователя конечного. Развитие движков не менее важно, потому что на старом браузере (Internet Explorer 8) - вы не увидите всю ту красоту, которую вы видите сейчас через Chrome или Yandex.Browser
- Серверная часть (backend) - позволяет сохранять состояние объектов на странице, синхронизировать перемещение объектов (когда несколько пользователей одновременно работает на одной доске и перемещают объекты)
В целом - все это у вас отражено в тренажере - нового ничего нет :)
Развитие технологий - добавляет больше стандартов, больше интерактива в работу, упрощает процессы создания фронтенд-решений. Появляются новые фреймворки, которые упрощают и ускоряют процессы написания решений (jQuery, React, Angular, Vue и т.д.). В язык JavaScript добавляются новые стандарты и методы, которые позволяют сделать “плавным” перемещение объектов на странице, добавляют асинхронную работу. Разработчики движков браузеров (chromium - самый популярный) - отвечают за то, чтобы научиться интерпретировать современные стандарты JavaScript’a и HTML (поэтому важно обновляться до последних версий Браузера).
А если кратко, чтобы понять какие технологии используются при создании miro - можно посмотреть требования к вакансиям. Например, Senior Frontend Engineer и Senior Backend Engineer
🤖 Используйте ИИ в работе менеджера
MySummit School — практический курс по Gen AI инструментам для менеджеров от автора этих материалов. ChatGPT, Claude, YandexGPT и другие инструменты для реальных задач.
73% практики, 27% теории. Экономьте до 4 часов в день на рутине. Пожизненный доступ с еженедельными обновлениями по новым инструментам.