JavaScript не в браузере: NodeJS, Deno и Bun
Начать стоит с того, что JavaScript может выполняться далеко не только в браузере. Для этого есть такая штука, как рантайм — это среда выполнения, которая обеспечивает все необходимое для выполнения JavaScript кода: движок языка, API среды и т.д.
Рантаймов несчётном множество, как и всего в мире JS, но в этом поговорим о самых интересных: NodeJS, Deno и Bun
👩💻 NodeJS — это рантайм JavaScript, построенный на движке V8 от Google Chrome. Он позволяет выполнять JavaScript-код на сервере. По сути, это почти то же самое, что и выполнять код в браузере, за тем лишь исключением, что NodeJS предоставляет API по работе с файлами, операционной системой, среду исполнения тестов и кучу всего ещё
— NodeJS сейчас — это основной рантайм для всех серверных решений на JavaScript и TypeScript
—
👩💻 Deno — более новый, чем NodeJS, рантайм, от создателя NodeJS. Deno разработан для того, чтобы устранить некоторые недостатки и ограничения ноды, улучшить безопасность и лучшей поддержкой TypeScript. В целом, всё так и есть, только лично мне субъективно кажется, что Deno почти никто не использует(
👩💻 Bun — самый новый из этой тройки инструмент, который разработан для того, чтобы быть самым быстрым и легким в использовании, предлагая ряд улучшений по сравнению с другими инструментами. Bun быстрее запускает код, сильно лучше работает с асинхронными запросами, быстрее устанавливает зависимости... Но ему слишком мало лет, чтобы активно тащить его в прод — пока рановато
Лично я ставлю на то, что доминирующего рантайма пока что не будет, получится зоопарк, так как всем просто не угодить
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #javascript #typescript #useful
Начать стоит с того, что JavaScript может выполняться далеко не только в браузере. Для этого есть такая штука, как рантайм — это среда выполнения, которая обеспечивает все необходимое для выполнения JavaScript кода: движок языка, API среды и т.д.
Рантаймов несчётном множество, как и всего в мире JS, но в этом поговорим о самых интересных: NodeJS, Deno и Bun
— NodeJS сейчас — это основной рантайм для всех серверных решений на JavaScript и TypeScript
—
npm
(Node Package Manager) — это тоже про нодуКраткий итог:
— NodeJS - это зрелая платформа с обширной экосистемой и большим сообществом
— Deno - альтернатива NodeJS с улучшенной безопасностью, поддержкой TypeScript и другими плюшками
— Bun - новая и перспективная платформа с упором на скорость и интеграцию различных инструментов
Лично я ставлю на то, что доминирующего рантайма пока что не будет, получится зоопарк, так как всем просто не угодить
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #javascript #typescript #useful
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22👍12❤11🐳1
Составные компоненты
Есть такой паттерн для реакта, который называется Compound Components. Это можно перевести как "составные компоненты"
Запутались в словах? Лучше посмотреть в коде:
Вот пример прям из доки Ant Design:
Обратили внимание, как компоненты
Зачем же так сделали? Тут преследуется три цели:
1. Явно показать на уровне нейминга, что использовать
2. Расшарить общий контекст между всеми компонентами
3. Корректно стилизовать части
С неймингом и стилями, думаю, всё предельно ясно. Но что насчёт контекста? На самом деле,
В итоге получится, что все дочерние компоненты, пытающиеся получить доступ к контексту, без обёртки работать будут криво или и вовсе не будут
С точки зрения типов всё тоже не сложно. Тот же Ant Design делает так:
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #web #javascript #typescript #theory #code #react #patterns
Есть такой паттерн для реакта, который называется Compound Components. Это можно перевести как "составные компоненты"
Смысл этого паттерна заключается в том, что мы можем связать компоненты общим окружением и эффективнее использовать их вместе
То есть мы можем заранее объединить компоненты каким-то контекстом и переиспользовать их, например, через общее пространство имён, в качестве которого чаще всего выступает родительский компонент
Вот пример прям из доки Ant Design:
import { Layout } from 'antd';
<Layout>
<Layout.Header>Header</Layout.Header>
<Layout.Content>Content</Layout.Content>
<Layout.Footer>Footer</Layout.Footer>
</Layout>
Обратили внимание, как компоненты
Header
, Content
и Footer
мы получаем напрямую из компонента Layout
? Это и есть пример паттерна Compound Components. Компоненты связаны, а используются они из общего пространства — компонента Layout
Зачем же так сделали? Тут преследуется три цели:
1. Явно показать на уровне нейминга, что использовать
Layout.Footer
вне Layout
не нужно2. Расшарить общий контекст между всеми компонентами
Layout
3. Корректно стилизовать части
Layout
в зависимости от значения внутри общего контекстаС неймингом и стилями, думаю, всё предельно ясно. Но что насчёт контекста? На самом деле,
Layout
под собой содержит ещё и LayoutContext
, который содержит в себе состояние компонента Sider
и распространяет его на все дочерние компоненты. Схематически это выглядит примерно так:InternalLayout
└ LayoutContext <-- инициализируем контекст
├ Header
├ Content <-- а в этих компонентах получаем его значение
├ Footer
└ Sider
В итоге получится, что все дочерние компоненты, пытающиеся получить доступ к контексту, без обёртки работать будут криво или и вовсе не будут
С точки зрения типов всё тоже не сложно. Тот же Ant Design делает так:
import InternalLayout, { Content, Footer, Header } from './layout';
import Sider from './Sider';
// получаем тип базового layout компонента
type InternalLayoutType = typeof InternalLayout;
// создаём тип, который определит какие компоненты мы вложим в layout
type CompoundedComponent = InternalLayoutType & {
Header: typeof Header;
Footer: typeof Footer;
Content: typeof Content;
Sider: typeof Sider;
};
// нагло переприсваиваем тип
const Layout = InternalLayout as CompoundedComponent;
// нагло биндим нужные компоненты
Layout.Header = Header;
Layout.Footer = Footer;
Layout.Content = Content;
Layout.Sider = Sider;
// не менее нагло экспортируем как public-api
export default Layout;
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #web #javascript #typescript #theory #code #react #patterns
👍26❤8🔥5🐳3