Apple Inside

Apple Inside — работающий интернет-магазин техники Apple: телефоны, маки, часы по ценам, при которых каждая деталь на странице товара имеет значение. Задача начиналась как «сверстать рич-контентные страницы», а выросла в построение системы, которая эти страницы собирает, и тулинга, чтобы их разрабатывать. Эта система — XRC: полуатомарная дизайн-система для контентных страниц товаров — токены, сетка, атомарные классы, карточки, медиа и типографика, версионированная и описанная собственным README. Один скрипт управляет автоплеем видео и анимациями въезда по вьюпорту через IntersectionObserver. Как только она появилась, новая страница товара — MacBook Pro, iPad Air, AirPods Max — стала собираться не за ~12 часов, а за 3, потому что страница компонуется из системы, а не верстается с нуля. Магазин живёт на Bitrix, где нет удобного способа разрабатывать такие страницы локально. Поэтому я его сделал: лёгкий Flask-бэк, который инжектит рич-контент по аргументу и обновляет страницу на лету, плюс локальная эмуляция боевого lazy-загрузчика, чтобы медиа вело себя вне прода так же, как на нём. Медиа досталось столько же внимания — HEVC-кодирование, отдельный путь через ProRes 4444 для прозрачных видео на маках, где HEVC не закодировать с винды, выбор формата через source и skeleton-плейсхолдеры, которые плавно растворяются в загруженной медиа, а не появляются рывком. Самым сложным куском был модуль сторисов на Swiper. Высота уползала при браузерном зуме и системном масштабировании Windows, поэтому я полностью убрал dvh как ненадёжный и завязал все расчёты высоты на --real-vh, измеряемый в JS, добавил переменную высоты «хрома», чтобы контент не вылезал за попап, и починил паузу-по-удержанию, чтобы она не конфликтовала со свайпами. В итоге это магазин, где добавить флагманский товар — несколько часов компоновки, а страницы держатся под зумом, ресайзом и реальным трафиком — из тех вещей, которые никто не замечает, пока они не сломаются.