Update ru/guide/v10/no-build-workflows.md

content/ru/guide/v10/no-build-workflows.md

@@ -7,7 +7,7 @@ description: 'Хотя такие инструменты сборки, как We
 
 Хотя такие инструменты сборки, как Webpack, Rollup и Vite, невероятно мощны и полезны, Preact полностью поддерживает сборку приложения без них.
 
-Рабочие процессы без сборки — это способ разработки веб-приложений без использования инструментов сборки, вместо этого полагаясь на браузер для облегчения загрузки и выполнения модулей. Это отличный способ начать работу с Preact, который может отлично работать в любых масштабах, но не лишен трудностей.
+Рабочие процессы без сборки — это способ разработки веб-приложений без использования инструментов сборки, вместо этого полагаясь на браузер для облегчения загрузки и выполнения модулей. Это отличный способ начать работу с Preact, который может отлично работать в любых масштабах.
 
 ---
 
@@ -17,11 +17,11 @@ description: 'Хотя такие инструменты сборки, как We
 
 ## Карты импорта
 
-[Карта импорта](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) — это новая функция,
+[Карта импорта](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) — это новая функция браузера,
 позволяющая вам контролировать, как браузеры разрешают спецификаторы модулей, обычно для преобразования пустых спецификаторов, таких как `preact`, в URL-адрес CDN, например `https://esm.sh/preact`. Хотя многие предпочитают эстетику карт импорта, существуют также реальные преимущества их использования, такие как упрощение версионирования, уменьшение/устранение дублирования и
 лучший доступ к более мощным функциям CDN.
 
-Это не значит, что вам нужен импорт карт, но для тех, кто предпочитает отказаться от инструментов сборки, они являются отличным вариантом, по крайней мере, для того, чтобы быть в курсе.
+В общем, мы рекомендуем использовать карты импорта для тех, кто решает обойтись без инструментов сборки, так как они помогают решить некоторые проблемы, с которыми вы можете столкнуться при использовании простых URL-адресов CDN в ваших спецификаторах импорта (подробнее об этом ниже).
 
 ### Пример использования
 
@@ -47,9 +47,7 @@ description: 'Хотя такие инструменты сборки, как We
       import { render } from 'preact';
       import { html } from 'htm/preact';
       export function App() {
-        return html`
-          <h1>Привет, мир!</h1>
-        `;
+        return html`<h1>Привет, мир!</h1>`;
       }
       render(html`<${App} />`, document.getElementById('app'));
     </script>
@@ -59,10 +57,9 @@ description: 'Хотя такие инструменты сборки, как We
 
 Мы создаем тег `<script>` с атрибутом `type="importmap"`, а затем определяем в нем модули, которые хотим использовать, в виде JSON. Позже, в теге `<script type="module">`, мы можем импортировать эти модули с помощью голых спецификаторов, аналогично тому, что вы видите в Node.
 
-> **Примечание:** Мы используем `?external=preact` в приведённом выше примере, поскольку https://esm.sh поможет предоставить
+> **Важно:** Мы используем `?external=preact` в приведённом выше примере, поскольку https://esm.sh поможет предоставить
 > модуль, который вы запрашиваете, а также его зависимости — для `htm/preact` это означает также предоставление
-> копии `preact`. Однако Preact и многие другие библиотеки должны использоваться как синглтоны (только один
-> активный экземпляр за раз), что создаёт проблему.
+> копии `preact`. Однако Preact должен использоваться только как синглтон, и в вашем приложении должна быть только одна его копия.
 >
 > Используя `?external=preact`, мы сообщаем `esm.sh`, что он не должен предоставлять копию `preact`, мы можем обрабатывать
 > это сами. Поэтому браузер будет использовать нашу карту импорта для разрешения `preact`, используя один экземпляр Preact
@@ -104,4 +101,38 @@ description: 'Хотя такие инструменты сборки, как We
     }
   }
 </script>
-```
+```
+
+## HTM
+
+Хотя JSX обычно является самым популярным способом написания приложений на Preact, он требует этапа сборки для преобразования нестандартного синтаксиса во что-то, что браузеры и другие среды выполнения могут понимать нативно. Однако ручное написание вызовов `h`/`createElement` может быть немного утомительным и не самым удобным, поэтому мы рекомендуем альтернативу, похожую на JSX, под названием [HTM](https://github.com/developit/htm).
+
+HTM не требует этапа сборки (хотя он и может использовать его, см. [`babel-plugin-htm`](https://github.com/developit/htm/tree/master/packages/babel-plugin-htm)), а использует синтаксис [шаблонных строк](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates), который является функцией JavaScript, существующей с 2015 года и поддерживаемой во всех современных браузерах. Это всё более популярный способ написания приложений на Preact и, вероятно, самый популярный для тех, кто решает обойтись без этапа сборки.
+
+HTM поддерживает все стандартные функции Preact, включая компоненты, хуки, сигналы и т. д., единственное отличие заключается в синтаксисе, используемом для написания возвращаемого значения «JSX».
+
+```js
+// --repl
+import { render } from 'preact';
+// --repl-before
+import { useState } from 'preact/hooks';
+import { html } from 'htm/preact';
+
+function Button({ action, children }) {
+  return html`<button onClick=${action}>${children}</button>`;
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return html`
+    <div class="counter-container">
+      <${Button} action=${() => setCount(count + 1)}>Увеличить<//>
+      <input readonly value=${count} />
+      <${Button} action=${() => setCount(count - 1)}>Уменьшить<//>
+    </div>
+  `;
+}
+// --repl-after
+render(<Counter />, document.getElementById('app'));
+```