Привет! Меня зовут Кирилл, я занимаюсь веб-разработкой более 8 лет. Несколько месяцев назад мы начали разработку нового проекта, и перед нами стояла задача сделать супербыстрый фронт, сохранив при этом все преимущества реактивных фреймворков.
Встречайте сексуальный фреймворк!
Так, Сексуальная рамка — реактивный компилятор и анализатор кода Javascript для создания пользовательских интерфейсов.
В отличие от других фреймворков, Sexy разработан для использования всего потенциала встроенного Javascript. Это означает, что фреймворк не работает во время выполнения.
Он выполняет всю основную работу во время компиляции.
Фреймворк анализирует ваши компоненты и переводит их в собственный Javascript с минимальными накладными расходами: максимальный вес пакета составляет всего 3,7 КБ gzip. (если будут использоваться все виды рендеринга, анимации и т.п.
) В целом, фреймворк Sexy создан для работы в сочетании с серверным рендерингом, где он показывает лучшие показатели для Google PageSpeed. Например, значение FID (Fisrt input Delay) при гидратации 500 статических компонентов занимает всего 50 мс, тогда как NuxtJs — 180 мс, а Svelte — 500 мс.
Это не было бы так важно, если бы доля мобильных устройств в Интернете не составляла около 68% и дело не только в SEO. Теперь для обычных веб-сайтов можно использовать компонентный подход и обычное компонентное тестирование.
Почему он такой сексуальный?
1. Не работает во время выполнения
Вся основная работа происходит на уровне компиляции, и в итоге вы получаете нативный и сверхэффективный Javascript, позволяющий создавать быстрые веб-приложения.
2. Не использует виртуальный DOM
Опять же, в отличие от других фреймворков, вместо виртуального DOM используется собственный DOM.3. Никаких реактивных библиотек
Секси полностью реактивен, но не использует никаких реактивных библиотек и, скорее всего, никогда не будет. Почему? Потому что реактивность выполняется во время компиляции.Секси анализирует весь написанный код Javascript и вручную назначает реактивные зависимости для вас и браузера.
4. Частичная гидратация
Секси был разработан с учетом гидратации.То есть изначально он был разработан для максимально быстрой гидратации, чтобы увеличить FID и TTI. В среднем скорость начала работы на клиенте (с SSR) как минимум в 3 раза лучше, чем у других фреймворков.
5. По-настоящему родной
Sexy переводит весь код в собственные инструкции Javascript, поэтому компоненты sexy имеют небольшой вес.
6. Очень быстро
Помимо быстрого рендеринга, Sexy значительно улучшает гидратацию, что позволит использовать фреймворк при создании веб-приложений для медленных устройств.Или.
Проектировать приложения практически не думая о производительности и всяких костылях в виде ленивой гидратации.
Работа с фреймворком Sexy.
Есть два способа начать использовать фреймворк Sexy:1. Просто — создайте веб-приложение и начните писать код.
И запустите в режиме разработчикаnpx create-sexy-app sexy-app
npm run dev2. Сложно — подключите библиотеки вручную и настройте упаковщик (веб-пакет).
Более подробная информация в документация .
Сексуальная рамка
Фреймворк находится в альфа-версии.Синтаксис и однофайловые компоненты аналогичны Vue, но есть несколько отличий.
Подробнее вы можете прочитать в документация .
Проекту также нужны участники; основная команда еще не сформирована.
Теги: #Разработка веб-сайтов #JavaScript #реактивное программирование #производительность javascript #фреймворки javascript
-
Яндекс.новости: Екатеринбург Захватывает Мир
19 Oct, 24 -
Легализация Летающих Насекомых В Сша
19 Oct, 24 -
Википедии 11 Лет!
19 Oct, 24 -
Список Полезных Классов И Библиотек Php
19 Oct, 24 -
Наблюдатель Против Pub-Sub
19 Oct, 24
