По короче как пишется через дефис или нет

Дома как в Осмоловке, военное прошлое и «рухлядь», не видавшая капремонтов

В прошлом жилой городок Министерства государственной безопасности, в настоящем – часть Советского района Минска. Если однажды случайно не наткнуться на этот квартал, вряд ли бы что-то сюда привело. Он скрывается по привычке от лишнего внимания за высоким бетонным забором. За годы он оброс крупными соседями – заправкой «А-100», садовым товариществом, «Экспобелом», трассами и развязкой.

Городок образовался в конце 1940-ых. Интересно, что дома здесь построены по проектам советского архитектора Михаила Парусникова, благодаря которому появились в Минске здания КГБ, Нацбанка, стадион «Динамо». К слову, по такому же проекту построены жилые дома в Осмоловке. Так что этот квартал часто называют ее младшим братом. 

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

Район остался почти в первозданном виде. Сталинки, деревянные сараи и гаражи, небольшие огороды по периметру, скрипучие полы в подъездах, бывший дом культуры с колоннами и барельефом в виде герба.

Во дворе нам с фотографом встречается один из старожилов – 75-летний мужчина.

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

– Почему же рухлядь?

– Потому что постройка 1950-х годов. Ни разу за это время не делались капитальные ремонты. Последний раз коммуникации поменяли в году 61-ом. Я здесь живу с 1953 года, поэтому все знаю.

По его словам, еще когда была «красная» власть, в городке планировалась реконструкция. Но проекты нивелировали, оставили на бумаге. Жители всегда сами ухаживали за городком. Они подчинялись руководителю, который организовывал субботники.

– Все деревья и кусты, которые мы видите, посадили когда-то жители. Лес, через который все ходят на остановку, посадили в 1957 году. Скоро начнут пилить…

«При коммунизме жили: если надо что сделать или построить, никого не звали, все сами»

Весь квартал насчитывает 12 жилых домов. В большинстве это сталинки, есть хрущевка. Еще два нетиповых дома построили позже всех – в 90-ых, из-за чего жителей прибавилось, а инфраструктура начала постепенно пропадать. Сегодня здесь нет даже маленького магазина. Только табачный ларек одиноко стоит возле дома культуры.

По центральной дороге спешит по делам Галина, но, когда узнает, что мы пишем о районе, с радостью начинает рассказывать обо всем, что знает.

– Я вам так скажу. Жить здесь как в райском уголке! Жаль, вы зимой приехали. Летом у нас шикарно, очень красиво. Аллея вся зеленая. Я живу здесь почти 50 лет, вырастила двоих детей, и никуда не уеду. Раньше это была большая деревня, в которой все друг друга хорошо знали. Дети всегда были под присмотром взрослых. Если вдруг ребенок за забор ходил, его за ручку быстро домой приводил кто-то. Если мальчишки и девчонки начинали прятаться и курить, родителям сообщали сразу. Короче, ничего тогда нельзя было скрыть.

Галина переводит тон и с грустью в голосе замечает:

– Сейчас такого нет, каждый сам за себя. Была начальная школа, но на ее месте построили дом. Приходится возить детей в Минск. Детям заняться у нас нечем. В клубе (так называют местные дом культуры – прим. Realt) работали детские кружки, кино показывали. И все праздники там проходили, потому что было кафе. Свадьбу сына и дочки в нем справляли. А еще была в клубе хорошая столовая. В нее приходили кушать из военчасти и приезжали медработники из Зеленого луга на машинах скорой помощи.

Она живет в самом начале улицы в доме №2. Утверждает, что ее дом единственный в поселке, в котором проводился капитальный ремонт, но было это еще в 1987 году. Тогда от дома остались только родные стены, остальное разобрали. Сделали перепланировку – так в квартирах появились отдельные ванные и туалеты.

– Перекрытия в этих домах деревянные. Непонятно, как еще люди живут. Делают ремонты за свой счет. Когда мы начинаем возмущаться и жаловаться, тогда здесь создают видимость ремонта. Например, каждый год подкрашивают фасады. Еще у нас утеплили фасад, но три квартиры остались неутепленными. В нашем доме нет скатной крыши, нужно чистить стоки, но никто этим не занимается. Но все, что от нас зависит, мы стараемся делать. Лавочки, песочницы, беседки поставили. Но уже не так, как раньше. Тогда ведь при коммунизме жили: если надо что сделать или построить, никого не звали, все сами. 

«Те, кто успел получить квартиры и переехать, просились назад в городок»

К беседе присоединяется знакомая Галины, местная жительница Наталья. Она переехала сюда с родителями из Германии в 1956 году, когда ей было два года.

– Когда-то о нашем городке уже писали, что это был закрытый режимный объект. Вот мы смеялись тогда, – вспоминает Наталья. – Городок у нас прекрасный. И дома хорошие, не сравнятся с нынешними новостройками. Когда я пошла в первый класс в 1961 году, здесь построили хрущевку и дали нашей семье квартиру, а потом снова переселили в сталинку. Но мы не жаловались. Комнаты больше, потолки трехметровые.

Женщины рассказывают и о судьбе клуба. Оказывается, закрылся он еще в 90-х. Но в здании еще оставались столовая, медпункт, почта и магазин. Потом здание продали, начался ремонт. Позже его арендовали киносъемщики. Но летом вдруг всех выгнали. И ремонт бросили на полпути.

– Боюсь, снесут его и построят какую-нибудь 25-этажку, – рассуждает Наталья.

– Так она сразу под землю провалится к чертям, – смеется Галина. – Мы не дадим здесь строить высокий дом.

– А кто нас спросит? – отвечает Наталья. – Найдут инвестора и построят. Людей будет много, двор захламят машинами. Но страшнее всего, если сделают сквозной проезд.

Наталья вспоминает, как здесь было «великое переселение».

– В 1984 году начали давать квартиры в Минске пенсионерам из нашего городка. И мой отец сказал, что уедет отсюда самый последний. Нам даже сказали, в каком доме будет квартира. Но спустя год все заглохло. А те, кто успел переехать, просились назад в городок и отрекались от нового жилья.

Разговор прерывает проносящийся по дороге кроссовер.

– Едет, наверное, мусор выносить, – говорят женщины. – Часто сюда машины приезжают. Люди из частного сектора через дорогу. Они себе мусорные контейнеры не ставят, а вывозят к нам.

«В 2004-ом видел не скажу на чьем столе проект многоэтажной застройки этого района»

– Тут был лес, болото и гравийная дорога, – так описывает прошлое района местный житель Александр. – Тут почти все были работниками специального подразделения госбезопасности, но смысл его пропал, когда СССР распался.

Мужчина вспоминает, как в 1985 году на поле, где сейчас поселок Солнечный, он катался на лыжах. А еще бегал по узкоколейной железной дороге, проложенной до деревни Дроздово.

Кстати, в 1930-е годы по ней интенсивно ходили составы, которые подвозили торф к электростанции. Рельсы были проложены посередине нынешнего проспекта Независимости.

– Жилось раньше отлично. Вечером в клубе в бильярд играли или кино смотрели. Устраивали субботники, после которых отдыхали во дворах с чаркой. Сейчас здесь хорошо детям. Могут гулять до полуночи во дворах, и никто не боится выпустить их.

Александр рассказывает интересный факт. Одноэтажка на Маневича, 3 – здание бывшей казармы, переделанной в квартирный дом. Его предлагали снести, и жители вот-вот должны были получить квартиры, но планы резко изменились.

На дворе октябрь, в 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
    })
}

Что в итоге?

Естественно, это не все, о чем хотелось рассказать. Но к этому времени кофе уже закончился, а статья на две чашки это уже лонгрид. Смотрите примеры, читайте доки, оставляйте отзывы.

Если фреймворк вас заинтересовал, или у вас есть предложения по его развитию — всегда пожалуйста.