COVID-19, веб-компоненты и клиенты, боже мой!
Вот история о том, как Kenshoo, основанная на React организация, решила использовать веб-компоненты для создания функции, чувствительной ко времени.
Пандемия COVID-19 - дело не смешное. Многие люди не работают, другие сталкиваются с неопределенностью, и все мы отдаляемся от общества ради общего блага.
Когда разразился COVID-19, большую часть последних двух лет я работал из дома, общаясь с офисом, находящимся в 5600 милях от дома. Хотя я не новичок в удаленной работе, добавьте в эту смесь детей и супруга, и даже самые опытные удаленные сотрудники обнаружат новые проблемы, с которыми они никогда раньше не сталкивались.
Хорошее общение - ключ к успеху в наше время. Чтобы хорошо общаться, вам нужно, чтобы ваши сверстники приняли вызов вместе с вами. Почти не менее важны надежные инструменты, позволяющие беспрепятственно общаться. Вот где действительно важны такие сервисы, как Zoom, Slack и Teams.
Платформа Kenshoo позволяет нашим пользователям разумно управлять кампаниями между издателями, но их работа не начинается и не заканчивается взаимодействием с платформой. Человеческий фактор - ключ к успешному управлению кампанией. Когда все вместе в офисе, обмениваются информацией со своими коллегами, сидящими в другом конце комнаты, или даже во время коротких бесед во время перерывов на кофе, все это играет важную роль в успешном выполнении работы.
В эпоху COVID-19 и работы из дома было вполне естественно, что мы захотели воспроизвести офисный опыт для наших пользователей и дать им возможность общаться и делиться идеями. Наша цель состояла в том, чтобы позволить нашим клиентам начать контекстные беседы друг с другом на платформе, и мы стремились сделать это в течение 2 недель.
В моем предыдущем сообщении в блоге я объяснил, как мы находимся в процессе перехода с приложения на основе ExtJS 4 на приложение React.
Соревнование
Несмотря на то, что мы приближаемся к завершению этого проекта, значительная часть нашего основного приложения все еще использует ExtJS 4. Кроме того, основным компонентом на большинстве наших экранов является сетка.
Сетки поддерживают большое количество строк и ячеек и оптимизированы для их быстрой визуализации. Используемые нами компоненты, Ag-Grid для React и компонент сетки ExtJS, быстро отрисовывают многие элементы с помощью виртуализированных строк, а также функций рендеринга без фреймворка. Ожидается, что эти функции будут возвращать строку, чтобы они могли быстро давать результаты, например:
В ExtJS 4 это означает, что вы не можете визуализировать компонент в ячейке. В Ag-Grid вам не рекомендуется делать это для поддержания хорошей производительности.
Но какое это имеет значение?
Целью нашей функции была возможность начинать и читать цепочку беседы в каждой строке сетки. Учитывая оптимизацию сеток и потребность в унифицированном решении для обоих компонентов, нам пришлось проявить творческий подход и действовать быстро.
Со временем единственным жизнеспособным вариантом была разработка компонента в том, что мы знаем лучше всего, - React. Однако разработка его в React означала, что нам нужно было проявить творческий подход к тому, как мы будем монтировать его в каждой строке.
Нашим первоначальным решением было добавить HTML-элемент к средствам визуализации ячеек и каким-то образом узнать, когда они добавляются и удаляются из DOM для монтирования и размонтирования нашего компонента React. Однако у этого решения было несколько подводных камней:
- Как вам удается вовремя смонтировать компонент и обеспечить удобство работы пользователей? Mutation Observers - хорошее решение для этого, но они требуют реализации в конкретном браузере и не поддерживаются в некоторых распространенных браузерах.
- Как отключить компонент до того, как элемент будет удален из DOM? Вы же не хотите, чтобы ваши компоненты React навсегда остались в вашей памяти. Сетка обрабатывает удаление элементов, и как только они будут удалены, мы не сможем размонтировать компонент React.
- Нам нужно было предоставить конкретное решение для каждого компонента сетки. Это добавляет усилий к функции, зависящей от времени.
Нам нужно было подумать о решении, которое позволило бы нам запускать функции монтирования и размонтирования простым способом и вовремя. Кроме того, мы хотели избежать реализации, которая была бы специфичной для любого компонента сетки.
Решение: используйте веб-компоненты!
Мы никогда раньше не использовали веб-компоненты, и нам очень комфортно, что наша экосистема вращается вокруг React. Это отличное решение для наших нужд. Однако это тот случай, когда веб-компоненты сияют.
Веб-компоненты отображаются в модели DOM с помощью настраиваемых тегов HTML. Это означает, что для того, чтобы разместить наш компонент в DOM, средство визуализации ячеек просто печатает тег нашего веб-компонента. Всякий раз, когда наш элемент веб-компонента подключается к документу, вызывается метод connectedCallback, где мы можем смонтировать наш компонент React. Для тех из вас, кто знаком с React, это примерно похоже на метод жизненного цикла componentDidMount.
Наш рендерер будет выглядеть так:
Когда элемент собирается быть удаленным из DOM, он автоматически запускает disconnectedCallback. Это означает, что мы можем поймать элемент до того, как он будет удален из DOM.
Такое решение также решает наше требование быть независимым от компонента сетки, поскольку средства визуализации ячеек в сетках могут просто распечатать настраиваемый тег.
Однако у нас не было времени изучить веб-компоненты или какие-либо фреймворки, которые используются для их создания (например, Svelte). Мы хотели создать наш компонент на React и убедиться, что мы монтируем и размонтируем его вовремя.
Поэтому мы решили создать простой веб-компонент с единственной целью - управлять монтированием и размонтированием нашего компонента React. Как только мы это сделали, мы начали работу над подключаемым веб-компонентом:
Довольно просто!
Если вы знакомы с веб-компонентами, вы можете спросить себя, почему компонент не прикреплен к теневой модели DOM. Это связано с тем, что наша экосистема React использует стилизованные компоненты для нашего решения css-in-js. Теневая модель DOM охватывает компонент так, что на него не влияет CSS в документе HTML, и, следовательно, не нарушает поддержку стилизованных компонентов.
Хотя это не лучшая практика, отказ от теневой DOM позволил нам продолжать использовать нашу библиотеку компонентов и избежать встроенного стиля.
Результат
Теперь наши клиенты могут добавлять комментарии в сетки и отмечать друг друга в контекстных цепочках разговоров!
Заключение
COVID-19 заставил нас уделять больше внимания своему окружению и проявлять творческий подход к решению проблем, которые в противном случае мы бы отметили. Помимо своевременного выпуска этой полезной функции для наших клиентов, теперь у нас есть новый полезный инструмент в нашем наборе инструментов, который будет продолжать служить нам еще долго после того, как мы все вернемся к нашей нормальной жизни.
Оставайтесь в безопасности и дайте мне знать, что вы думаете, комментируя эту статью!
