Как поддерживать миллионы строк на фронтенде. Опыт Miro / #5

• В мире нет дефолтных инструментов, как в браузере, для работы с элементами.  

• Канвас предоставляет только базовые возможности для раскрашивания пикселей.  

• Для сложных задач, таких как редактирование текста, часто используется аштимль.  

• Редактирование текста на канвасе без аштимля сложно и неэффективно.  

• Использование аштимля позволяет использовать нативные браузерные элементы для редактирования текста.  

• Обработка фокуса и навигация по тексту проще с аштимлем, чем на канвасе.  

• Для редактирования текста на канвасе рисуются нативные элементы, такие как импут и текстарио.  

• Эти элементы позиционируются поверх канваса и обрабатываются стилями.  

• Для пользователей это выглядит как рисование на канвасе, но на самом деле используется аштимль.  

• В канвасной разработке часто приходится изобретать велосипед, так как нет готовых решений.  

• Разработка на канвасе требует решения базовых проблем самостоятельно.  

• Использование готовых решений, таких как экскалидро и телдро, помогает, но не решает всех проблем.  

• Мира предпочитает создавать свои наработки, так как это позволяет оптимизировать и улучшать их.  

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

• Использование сторонних фреймворков и библиотек ограничено, так как Мира предпочитает контролировать свои собственные наработки.  

• Работа с канвасом осуществляется через виртуальное дерево, называемое пикси-деревом.  

• Продуктовая команда обновляет это дерево, чтобы оно было консистентным.  

• В отличие от React, дерево мутабельное, что влияет на производительность.  

• В отличие от React, в системе используется рек фрейм луп для перерисовки дерева.  

• Это позволяет избежать проблем с множественными перерисовками.  

• На каждом фрейме дерево перерисовывается полностью, что улучшает производительность.  

• Основной канвас очищается и перерисовывается на каждом фрейме.  

• Используются алгоритмы для кэширования, такие как тайловый рендеринг.  

• Важно понимать, как работает браузер и алгоритмы для оптимизации.  

• В команде важно понимание работы браузера и сложности алгоритмов.  

• Создание и использование объектов должно быть минимизировано.  

• Мутабельность дерева позволяет оптимизировать производительность, но увеличивает количество ошибок.  

• Система требует от разработчиков следить за множеством деталей.  

• Желание сделать систему похожей на React приводит к увеличению ошибок.  

• В будущем планируется более декларативное описание виджетов для уменьшения ошибок.  

• Обсуждение нового фреймворка Frix.  

• Сравнение с React и Solidity.  

• Преимущества и недостатки каждого подхода.  

• Критика мутабельности в React.  

• Сложности с ростом приложения и оптимизацией.  

• Преимущества декларативного описания в Solidity.  

• Различие в подходах к обновлению данных в React и Solidity.  

• Преимущества компиляции в Solidity.  

• Сложности с дебагом и магией во фреймворках.  

• Положительное отношение к Vue.  

• Предпочтение React для новых проектов.  

• Преимущества Vue в покрытии современных функций.  

• Обсуждение оптимизации и миграции в компании.  

• Переход на Vite и его преимущества.  

• Сложности миграции legacy кода.  

• Переход на новый батлер для улучшения производительности.  

• Оптимизация по частям из-за зависимости от Vite.  

• Обновление библиотек и поддержка версий.  

• Масштабы проекта с несколькими миллионами строк кода.  

• Команда из восьми человек.  

• Проект разрабатывается как монолит, что позволяет быстро собирать весь проект.  

• Инкрементальная сборка происходит быстро, что удивляет многих разработчиков.  

• Пример: проект с несколькими миллионами строк собирается за 20 секунд.  

• В проекте используется магия для быстрого старта сервера.  

• Пример: платформа Shopify использует Ruby on Rails и Ruby для оптимизации старта.  

• Разработана утилита, которая значительно уменьшает время загрузки приложения.  

• В Python приложения запускаются заново при каждом запросе, что требует значительных оптимизаций.  

• Кэширование конфигов и других данных помогает ускорить запуск приложения.  

• Пример: в мире редко занимаются кэшированием конфигов, так как это не требуется.  

• В проекте используется система версионности с возможностью переключения версий.  

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

• Это помогает быстро исправлять баги и откатываться на предыдущие версии.  

• В проекте почти вся бизнес-логика находится на фронтенде.  

• Бэкенд используется только для валидации данных и установки соединений.  

• Пример: за три года работы не было написано ни одного запроса на бэкенд.  

• Состояние обновляется через TCP-соединения.  

• Логика реконнектов находится на клиенте, что позволяет восстанавливать последнее состояние.  

• Пример: клиент решает, когда нужно реконнектиться и восстановить состояние.  

• В проекте используется простой подход для редактирования виджетов.  

• Один пользователь может редактировать виджет, но другие пользователи не могут.  

• Это работает хорошо для сценариев мира и не требует сложных алгоритмов для разрешения конфликтов.  

• Обсуждение инженерных решений, которые экономят ресурсы.  

• Введение в оптимистическую и пессимистическую блокировку.  

• Пример гибридного подхода к блокировке в Excalidro.  

• Обсуждение метода синхронизации изменений в Excalidro.  

• Использование метода "подбрасывания монетки" для разрешения конфликтов.  

• Проблемы с локальными изменениями и их синхронизацией.  

• Excalidro как инструмент для рисования диаграмм.  

• Сравнение с другими программами для рисования.  

• Excalidro как инструмент для взаимодействия и мультиплеера.  

• Участие в разработке Excalidro как добровольного контрибьютора.  

• Внедрение новых функций и технологий.  

• Переход в компанию Wix и дальнейшее развитие проекта.  

• Вопросы на собеседовании, связанные с разработкой Excalidro.  

• Различия в архитектуре Excalidro и Wix.  

• Опыт и знания, полученные на собеседовании.  

• Обсуждение специфики разработки редакторов.  

• Вопросы о возможности привлечения фронтенд-разработчиков к работе с редакторами.  

• Примеры успешных проектов, разработанных энтузиастами.  

• Команда работает над уникальными проектами, не связанными с классическими реакторскими приводами.  

• Все разрабатывается самостоятельно, без использования сторонних фреймворков.  

• Важно хорошее понимание JavaScript, особенно классов и функционального программирования.  

• Кандидаты должны хорошо понимать JavaScript, особенно работу с классами и контекстами.  

• Знание функционального программирования и алгоритмов является преимуществом.  

• Коммуникация внутри компании ведется на английском языке.  

• Вся кодовая база компании написана на TypeScript.  

• TypeScript используется для рефакторинга и анализа кода.  

• Компания активно обновляет и поддерживает TypeScript.  

• TypeScript может замедлять работу при холодном запуске и переключении веток.  

• В команде используются разные редакторы, такие как WebStorm и Neovim.  

• Проблемы с производительностью решаются через кэширование и оптимизацию кода.  

• В новой версии TypeScript будет возможность включить линтер для строгого типирования модулей.  

• Это позволит сократить время на проверку типов и улучшить производительность.  

• Управление пакетами осуществляется через Yarn.  

• В больших проектах есть команда, занимающаяся оптимизацией сборки.  

• Без такой команды сложность сборки и использования TypeScript растет.  

• В ковидные времена компании увеличили количество сотрудников, что привело к увеличению кода.  

• В крупных проектах мало людей, способных грамотно писать TypeScript.  

• В команде может быть несколько экспертов по TypeScript, остальные - пользователи.  

• Важно понимать, как работает TypeScript и как его использовать.  

• В некоторых случаях сложные типы необходимы для проверки зависимостей.  

• В самописном контейнере используется сложный тип для проверки соответствия классов и зависимостей.  

• Такие типы полезны, но требуют понимания работы TypeScript.  

• В компании есть гильдия фронтенд-разработчиков, где люди делятся проблемами и помогают друг другу.  

• В чате часто просят помощи в типизации функций.  

• Это помогает разработчикам расти и делиться знаниями.  

• Раз в две недели проводятся мини-конференции, где разработчики делятся опытом.  

• Это помогает компании работать над одним продуктом и делиться знаниями.  

• Команда также участвует в таких мероприятиях.  

• Благодарность Тимуру за участие.  

• Призыв к зрителям ставить лайки или дизлайки и оставлять комментарии.  

• Обещание рассмотреть все комментарии и ответить на них.