Всем хороших выходных! Сегодня я хочу рассказать о том, чем я занимаюсь в компании ЦИАН.
Для тех, кто не знает, ЦИАН — это российский классифайд про недвижимость, который отмелил в этом году свое 15-летие.
Понятное дело, что продукт с такой историей имеет большое количество написаного кода и широкий набор разнообразных архитекрурных решений.
В том числе это касается и клиентской части. И одна из моих больших задач — привести frontend в порядок.
Для того, чтобы что-то сделать лучше, необходимо понять что на самом деле происходит.
Один из отличных источников знаний о том, что чувствуют пользователи — Navigation Timing API developer.mozilla.org/ru/docs/Web/AP…
Мы собираем метрики самых популярных страниц Navigation Timing API, отправляем через бекенд их в StatsD и выводим графики в Grafana.
На основе этих данных можно разобрать из чего состоит время загрузки страницы.
И выявить разные аномалии. Например, некоторые страницы по ночам начинают работать медленнее, а некоторые, наоборот, быстрее. 😯
Следующее, что мы собираем, это активные версии ассетов. Таким образом можно понять, как быстро сбрасывается кеш у пользователей.
Вот так должен сбрасываться кеш при правильном подходе. 💪
А правильный подход такой. Про Cache-Control: immutable можно почитать тут: bitsup.blogspot.ru/2016/05/cache-…
Еще с клиентов очень полезно собирать необработанные исключения. Для этого мы используем Sentry sentry.io
Вот классический пример из жизни проекта.
Проанализировав наши данные, архитектуру и требования мы определили список горящих проблем, сформировали цели (которых хватит на пару лет)…
…и выбрали основу для нашей архитектуры. В основе лежат три технологии: React, как инструмент для универсального рендеринга (нам важно SEO)…
…Node.js, который обеспечивает серверный рендеринг и добавляет асинхронности в систему; TypeScript для лучшего контроля за качеством кода.
Одна наших из целей — сделать общую библиотеку компонент. На эту тему есть великолепный доклад от @mr_mig_by youtube.com/watch?v=gfO2i9…
Мы движемся в этом же направлении. За основу взяли github.com/sapegin/react-… от @iamsapegin и заточили под TypeScript.
Кроме этого сейчас я прорабатываю концепцию "микросервисов" на фронте.
Разделяй и властвуй.
В сторону микросервисов на фронте активно копают @ZalandoTech с проектом mosaic9.org
По ссылке много крутых материалов по теме.