eliace
На дворе октябрь, в npm залита новая версия фреймворка Chorda 3.0. Можно, наконец, устроиться поудобнее за чашечкой кофе и подвести некоторые итоги
Про сам фреймворк можно почитать здесь, посмотреть тут и пощупать там
В прошлый раз я рассказывал о дизайн-функции, чертежах и построении API компонентов, а в этот раз попробую заинтересовать вас некоторыми очевидными решениями и не очень очевидными следствиями, которые появились во время работы с Chorda
Очевидные решения
Когда я использую другие библиотеки, есть ряд вещей, которые меня не устраивают. Всегда казалось, что можно сделать лучше.
Расширение библиотечных компонентов
Начну с декларативного подхода и примесей — краеугольного камня Chorda. Для наглядности нам понадобится немного кода.
Создадим простой компонент на JSX (React) с кнопкой и текстом. Задача: при клике по кнопке меняется текст
const MyComponent = () => {
const [data, changeData] = useState('')
const hahdleClick = (e) => {
changeData('Hello')
}
return <div>
<button onClick={handleClick}>Click me</button>
<p>{data}</p>
</div>
}
// вот так выглядит применение компонента
<MyComponent/>Сделаем похожий функционал, используя чертеж Chorda
// вырожденная дизайн-функция
const MyComponent = () => {
return {
templates: {
button: {
tag: 'button',
text: 'Click me',
events: {
// обработка событий VDOM
$dom: {
click: (evt, {data}) => {
data.$value = 'Hello'
}
}
}
},
text: {
tag: 'p',
reactions: {
// реакции компонента на изменение переменной скоупа
data: v => patch({text: v})
}
}
},
initials: {
// инициализация переменной в скоупе
data: () => observable('')
}
}
}
// создаем чертеж
MyComponent()Ну, все. Расходимся, ребята. Очевидно же, что шаблонный синтаксис намного проще и понятнее.
Но
Давайте посмотрим, что происходит с нашим JSX компонентом дальше. Итак, мы выполнили задачу, и теперь передаем наши наработки коллеге, скажем, в составе корпоративной или публичной библиотеки. Через некоторое время от коллеги приходит просьба: хочу, чтобы компонент можно было стилизовать. Не вопрос. Самый простой и быстрый способ это сделать — дать возможность управлять классом корневого компонента через пропсы.
Поехали
// Придется залезть в библиотеку (!) и сделать пару правок
const MyComponent = (props) => {
const {rootClassName} = props
/* Тут ничего не меняется. Пропускаем */
return <div className={rootClassName}>
<button onClick={handleClick}>Click me</button>
<p>{data}</p>
</div>
}
// рендерим
<MyComponent rootClassName="custom" />Отлично!
Тем временем в Chorda
// Менять оригинальный чертеж необходимости нет
// В месте применения создадим примесь
mix(MyComponent(), {
css: 'custom',
})Естественно, стилизацией обычно дело не заканчивается. Чем дальше, тем больше хотелок и тем больше пропсов нам понадобится добавить.
На самом деле подобные извращения следует пресекать в зародыше, и сразу предоставлять возможность потребителю «слотировать» вложенные компоненты. Однако, в нашем примере компоненты оказались жестко связаны state-параметром data. Просто так вытащить их не получится, поэтому посмотрим, во что может превратиться реализация с пропсами
const MyComponent = (props) => {
const {rootProps, buttonProps, text: MyText} = props
/* тут ничего не меняется */
return <div {...rootProps} >
<button onClick={handleClick} {...buttonProps} >Click me</button>
<MyText>{data}</MyText>
</div>
}
<MyComponent
rootProps={{className: 'custom'}}
buttonProps={{className: 'custom-button'}}
text={props => <p className="custom-text">{props.children}</p>}
/>
В ситуации с чертежом без особых именений
// Расширяем примесь
mix(MyComponent(), {
css: 'custom',
templates: {
button: {
css: 'custom-button'
},
text: {
css: 'custom-text'
}
}
})Для React типовое решение проблемы это вынесение состояния из компонента. Получившийся «глупый» компонент уже не будет иметь внутри сильной связи и позволит легко «слотировать» вложения. Но здесь есть подводный камень. Архитектура такая штука, что если где-то убыло, то где-то прибыло. Выбрасывая сложность из наших компонентов мы ее копим в другом месте, а именно там, где компонент будет применяться
Стоит признать, с примесями тоже не все так гладко. Чтобы сделать хорошо расширяемый компонент, его необходимо сильно декомпозировать, а это напрямую влияет на производительность и восприятие кода в целом (по второму пункту полезно почитать о причинах появления setup во Vue 3)
Так к чему все это сравнение? Тот же React может предложить много вариантов и подходов для расширения функционала, один экзотичнее другого. Chorda же предлагает один путь (на самом деле нет), что на мой взгляд экономит на выборе уйму времени
Этот компонент мне не подходит
Идем дальше. Мы рассмотрели как именно выполняются изменения отдельного компонента, но что если вы являетесь не автором библиотеки, а ее потребителем, и столкнулись с проблемой нехватки функционала или дефектом?
Тогда на выбор:
1. Делаем форк, вносим в него правки. Делаем PR в репо библиотеки. Пока ждем влития, пользуемся форком
2. Делаем свой компонент. Используем его вместо библиотечного. Ждем новой версии библиотеки
3. (для обладателей особого дара убеждения) Объясняем автору библиотеки в чем он не прав и почему он должен внести нужные вам правки как можно скорее. Профит!
4. Забиваем
Если вы используете Chorda, то у вас появляется еще один вариант: подмешать свой функционал к чужому компоненту. В этом случае компонент как-бы продолжает оставаться частью оригинальной библиотеки, но в то же время содержит нужные вам изменения
Mount или не Mount?
Наверно, правильнее этот вопрос надо задать так: в какой момент должна начинаться обработка бизнес задач?
Хорошо проиллюстрирует мою мысль пример с загрузкой данных в store приложении при открытии страницы. Как правило, загрузка выполняется по событию монтирования узла виртуального DOM, что есть странно — зачем что-то добавлять в DOM, если данных еще нет? Почему бы нам сначала не загрузить данные, а потом решать — рендерить что-то или нет. Тут ситуацию немного спасает Suspense и понятие асинхронных компонентов, когда у каждого из них есть своя отложенная задача и, соответственно, отложенная отрисовка
Мне же больше нравится вариант, когда загрузка вообще никак не связана с рендерингом. В Chorda бизнес-логика находится на уровне дерева компонентов, а результаты выполнения бизнес-задач влияют только на store/state, не касаясь отрисовки напрямую
Все мы вместе и каждый сам по себе
В Chorda состояние компонента определяется скоупом (что-то вроде локального store). Компонент видит только свой скоуп и работает только с ним, считая, что вокруг никого нет. Это позволяет спокойно выполнять смешивание, не опасаясь сломать жесткие связи между компонентами
По умолчанию, скоуп делит свое содержимое с другими связанными скоупами, таким образом позволяя компонентам иметь доступ, например, к общему роуту. Но в то же время любой компонент может локально изменить состав своего скоупа так, как ему нужно.
Здесь мы подходим к такой штуке, как конвейер обработки (вычисление-патч-отрисовка). Он, как и любое другое значение, попадает к компонентам через скоуп, и его, так же как и любое другое значение, можно настроить локально. К примеру, стратегия базового конвейера дает построение дерева компонентов в ширину с удержанием задач отрисовки до окончания обработки всех патчей. Если для вашего компонента или блока компонентов такое решение не подходит, вы можете подключить к ним свой кастомный конвейер
Неочевидные следствия
А вот некоторые моменты не являлись изначальной целью, но проявились по мере развития фреймворка
Встраивание в существующие проекты
Реализация виртуального DOM не входит в состав Chorda, т.к. разработка еще одного нового отрисовщика не решала моих проблем. Поэтому я собирался использовать какой-нибудь из уже существующих. Для того, чтобы попробовать Chorda в деле, я собрался переписать с нуля пару домашних React-проектов. Но приступив, почти сразу понял, что это совсем не обязательно. Можно постепенно заменять отдельные компоненты, подключив правильный рендерер, и так потихоньку съесть всего слона целиком.
Интересный вопрос: если фреймворк использует React, то можно ли сказать, что приложение, которое использует данный фреймворк, написано на React?
Загружаем и работаем
Сомнительное следствие конечно, но для некоторых может оказаться чрезвычайно важным. Создание компонентов и отрисовка присходят в runtime, без этапа транспиляции. Подключив ядро Chorda и рендерер, можно сразу писать код, который тут же будет исполняться в браузере.
Правда вот, SSR превратился в нетривиальную задачу
Поведенческие компоненты
Тут скорее интересное наблюдение. Раньше я сталкивался только с таким подходом к «глупым» компонентам: есть простой компонент без логики работы, который знает как ему рисоваться, затем поверх него создается «умный» компонент, который включает в себя «глупый», добавляя некоторое поведение.
Так вот в Chorda (из-за того, что можно легко менять порядок смешивания) у меня появился набор компонентов, в которых есть только поведение без правил отрисовки (обычно это набор стандартных реакций). И получилось, что, наоборот, уже к поведению начинает примешиваться способ отображения
Как это может выглядеть:
export default () => {
// поведенческий компонент Text
return Text({
as: Paragraph, // "глупый" компонент Paragraph
text$: $ => $.user.name
})
}
Что в итоге?
Естественно, это не все, о чем хотелось рассказать. Но к этому времени кофе уже закончился, а статья на две чашки это уже лонгрид. Смотрите примеры, читайте доки, оставляйте отзывы.
Если фреймворк вас заинтересовал, или у вас есть предложения по его развитию — всегда пожалуйста.
Если вы хоть немного интересуетесь искусством, то, наверное, бывали на ежегодном «Осеннем салоне с „Белгазпромбанком“». Необычный художник Александр Бельский не просто в нем участвует, но и неоднократно получал там приз зрительских симпатий. Причем он умудряется на своих полотнах объединять, казалось бы, необъединимое: Бэтмена и советских детей около елки, штурмовиков из «Звездных войн» и белорусский трактор, космонавтов и советский самовар. О том, как Александр шел на подобные эксперименты, как выбирал забавные, но серьезные сюжеты, сегодня рассказывает наш гид по миру современного белорусского искусства Любовь Гаврилюк.
Кто такой Бельский?
Александр Бельский родился в 1980-м в Жодино. Сначала окончил училище имени Глебова, позже — Академию искусств. С 2007 по 2017 год работал художником-оформителем в столичном кинотеатре «Пионер», а в 2017-м отправился в свободное плавание. Участвует в коллективных выставках, продает работы через интернет. Некоторые из них стали вирусными.
От «ручных афиш» к коллажам
Во Дворце искусств в 2019 году состоялась персональная выставка Александра Бельского «3, 2, 1… Апрель», которая стала открытием: оказывается, работ за последние годы написано много, а их чудесные (в прямом смысле слова) герои населяют странный мир — очень условное отражение реального. Жители этого мира — зайцы, снеговики, космонавты; какие-то инопланетные полицейские грузят яблоки в трактор «Беларусь», потом вдруг бьют снеговиков, а снеговики вписаны в классическую живопись Рембрандта и Ван Гога. Тут я погорячилась: на выставке все было подобрано согласно концепции и более последовательно, но после экспозиции вы же идете смотреть работы художника в сети. И достраиваете, дополняете этот странный мир — да, он такой. Мало подчиняется обычной логике.
Авторский прием с хрестоматийными сюжетами особенно интересен: сюжеты-то знакомые, но новые герои меняют смысл, отношение современного зрителя. Я бы даже сказала, что меняется восприятие исторического материала как такового. Мы как будто учимся смотреть на прошлое не как на безнадежно ушедшее нечто, а как на события сегодняшнего дня. Но об этом чуть позже.
Впрочем, и работы предыдущего десятилетия заставляют зрителя удивиться: и такой тоже бывает живопись? Это про афиши, которые Александр писал в кинотеатре «Пионер». Сейчас их можно отнести к стилю ретро, да и в конце 2010-х они были раритетом — наверное, последними в Минске. Наивными, сюрреалистичными. Их воспринимали как особенную эстетику кинотеатра. Думаю, такими они и останутся в культурной истории Минска. Хотя сам художник называет их «хорошим опытом быстрого рисунка»:
— С афишами я стал чувствовать себя увереннее. Работа над большими форматами — тот случай, когда процесс приносит радость, хотя это, конечно, не самоцель. Когда готовилась выставка «3, 2, 1… Апрель», мне хотелось посмотреть на все со стороны, нужно было собрать работы в одном пространстве. А потом начались перемены: поиск новых приемов, технологий, что-то переформатировалось. Для меня перестало быть важным писать именно картину и чтобы она выглядела «красиво». Движение значит больше, а инструменты могут быть самыми разными.
Не отказываясь от привычных холста и масла, Александр стал больше использовать уже готовые изображения, заниматься коллажами и печатью. Это тоже непросто: порой на сбор нужного материала и компиляцию уходит год-два, можно попробовать сделать несколько версий одной композиции в разных форматах. Хорошо, что жена Виктория воодушевляет и влияет на творческий процесс.
Человек внутри
По большому счету все, что происходит с людьми, так или иначе имеет отношение к животным. В этой части художник находится близко к традиции: история искусства знает множество сюжетов, где героями были звери. Реальные или сказочные, мифологические и фантастические персонажи, в самых разных жанрах и техниках. В визуальном искусстве чего стоят только книжные иллюстрации Евгения Чарушина (в юности он, кстати, тоже делал вывески и плакаты). Он имя для тех, кто знаком с еще советскими изданиями Бианки, Пришвина, Чуковского и Маршака. Для более молодых читателей назову белорусскую художницу Екатерину Дубовик и наших классиков Валерия Слаука, Александра Шеверова, Николая Селещука. Но иллюстрация — это, конечно, совсем другое искусство.
У Александра подход принципиально иной. Не столько важен сам герой — заяц, космонавт, человек в черном шлеме или снеговик, сколько идея и желание автора не выставлять на первый план нравоучение, замаскировать его с помощью другой формы. С этой точки зрения художник не рассказывает нам историю (сказку) зайцев, а оставляет пространство для аллегории, без разжевывания и прямых оценок. Бельский не пишет серии или проекты с нарративами наподобие литературных. Это полностью визуальный опыт, а в основе своей — концептуальный.
— Для меня они — персонажи, на которых спроецированы отношения людей между собой, отношения с миром вокруг, — объясняет художник. — В этом их назначение. Есть параллели с жизнью людей, отчасти есть мой собственный опыт. Важно, что все они — не абстрактные образы и не конкретные модели, зато всегда дают мне место для метафоры, реплики, отсылок к самым разным событиям.
Дети на экскурсиях высоко оценивают эти «проекции», взрослые тоже их считывают — так что призы зрительских симпатий, которые художник получил на «Осенних салонах» в 2016—2017 годах, имеют вполне определенное основание.
С зайцами и снеговиками, впрочем, отдельная тема — это своего рода версия родства, сочувствия, заботы. Человек в этих снеговиках скрыт, но не утрачивает чувство собственного достоинства, не теряет эмоций, не коверкает язык. Трансформация человеческого происходит как перемена и даже протест, а сохранение человеческого выдают детали, окружающая среда, антагонисты снеговиков и зайцев. Помещая животных и снежных героев в реальные обстоятельства, художник подчеркивает их уязвимость. Особенно это заметно, когда они собираются в группы или стаи — даже непонятно, как лучше сказать. Или в компании, когда начинает работать коллективная энергия, общая драматургия. Удивительно, но «другие» только усиливают эффект человеческой сущности. От сказки, от волшебства остается лишь момент телесного перерождения.
И еще интересно, что, выбирая именно эти образы, Александр не идет по пути роботизации, клонирования и т. д., то есть в сторону science spesific. Наоборот, удивление, страх, растерянность работают на доверие и сочувствие к «слабым» героям.
Вопрос органики
Справедливости ради нужно отметить, что есть у художника вполне яркие социальные темы. Но они написаны в своем ключе, и здесь от зрителя тоже требуется чувствительность особого рода. Отправной точкой для понимания я бы назвала работу 2019 года «Новые боты». Не сразу разглядишь, что на первом плане маленький ребенок гуляет по лужам в резиновых сапожках. Наконец-то никто не будет доставать его из-за мокрых ног! Строгие дяди на постаментах неизмеримо выше, значительнее — правда, в параллельной жизни, откуда новые боты не заметны, а риск простуды не рассматривается всерьез.
Не всерьез — еще одна иллюзия, которая будет преследовать зрителя на протяжении всего просмотра, на сайтах ли, в галереях или частных коллекциях. Смешение контекстов как бы случайное: вот неуклюжие снеговики из детских игр, Дарт Вейдер из «Звездных войн», какая-то вышка почему-то упала, вдруг возникает кусочек из старого новостного репортажа. На самом деле спонтанного здесь нет ничего.
В качестве примера такой подачи отмечу небольшой цикл «Бэтмен и дети» (2021), парафраз на советский сюжет с Владимиром Ильичом.
— В основе — советская мифология, точнее, ее популярная часть, пропаганда, — говорит художник. — Мне хотелось ее поправить, убрать образ доброго дедушки из истории, хотя бы из книжной иллюстрации.
Да, постмодернистское смешение контекстов, известная игра и практика, но как по-разному это можно сделать! А еще юмор — легкий, грустный или болезненный, он всегда есть в живописи Александра, даже в его афишах.
Всегда, будь этот юмор родом из поп-арта, лирики или актуальной хроники. На мой взгляд, инструмент не менее важный, чем выбор героя или эпизода социальной драмы.
К слову, о подходе к творческому процессу и об отсылках: первый снеговик родился из ассоциаций с «Нарциссом» Караваджо. А все, что связано с космосом, сценки на Луне появились вместе с конкретными деталями и событиями разных лет.
— У любой работы есть мотивы для появления. Например, «Бог в помощь», который существует и в небольшой, пробной версии 80×40 кв. см, и в максимальной — 3 × 1,5 кв. м. Вроде мы продолжаем наблюдать за космосом, технологии развиваются, и люди летают на серьезных кораблях, — продолжает Александр. — Но тут же, на этом пафосном фоне, видим, как их героически спасают (как когда-то Владимир Джанибеков, Виктор Савиных и др.). Вдруг, всегда неожиданно. А самовар пришел вообще из другой сферы, из художественного образования: кувшин и самовар — самые банальные, всем надоевшие предметы для учебного натюрморта.
Вот как, оказывается, рождаются метафоры.
Структурировать время
Да, ни много, ни мало. Эту возможность дает Александру теперешняя работа в «Белреставрации». А живопись остается основным творческим полем художника. И здесь мы подходим к теме о востребованности, о том, может ли the artist в современном понимании этого слова жить и зарабатывать своей профессией.
По словам Александра, работа художника-реставратора позволяет ему распределять время работы так, чтобы не метаться каждый день между искусством и коммерческими заказами. Те же снеговики возникли в свое время как попытка отстранения после большого числа шаржей и портретов. В какой-то момент, после тысяч лиц, живых и фотографических, стало просто необходимо найти анонимные типажи. Сейчас, при стабильном заработке, можно спокойно заниматься искусством, а не постоянным добыванием денег. Есть ведь и неприятные заказы, и только очень немногие авторы умеют отговаривать клиентов — в чем-то образовывая их, теряя в деньгах, но сохраняя при этом профессиональную честность.
Судя по онлайн-галереям, которые продают произведения искусства, почти все полотна Александра нашли своих покупателей. Это прекрасный результат. Как говорит художник, во-первых, людям нравится то, что он делает, а во-вторых, его работы доступны по стоимости.
— Мой самый первый покупатель приобрел восемь полотен сразу. До этого я и не предполагал, что доходами от искусства можно жить. И вот впервые это сработало. Но и раньше, и сейчас на первом месте по-прежнему остается мысль, идея, а потом уже, конечно, хорошо, что она обрастает капиталом.
Что же касается «Белреставрации», Александру интересны технологии и сами подходы, принятые в этой области. Понятно, что и здесь есть свои проблемы: многое из историко-культурного наследия утрачено, появляется немало новодела, но «работать со стенами XIV — XVI веков интересно». Художник считает так:
— Важно принимать в принципе правильные решения. Что нужно реставрировать, что восстанавливать, с какой целью? Может быть, я пока не очень подготовлен как реставратор, но есть рядом люди, которые подсказывают. В Несвиже мои действия были обоснованы. И это тоже творческий рост.
Наш канал в Telegram. Присоединяйтесь!
Есть о чем рассказать? Пишите в наш телеграм-бот. Это анонимно и быстро