6 July

Самый sexy framework для веб-приложений

Website developmentJavaScript

Привет! Меня зовут Кирилл, я уже более 8-и лет занимаюсь веб-разработкой. Несколько месяцев назад мы начали разрабатывать новый проект и у нас возникла задача супер быстрого фронта, при этом сохранив все приколюхи реактивных фреймворков. Встречайте, Sexy framework!




Итак, Sexy framework – это реактивный компилятор и анализатор Javascript кода для создания пользовательских интерфейсов. В отличии от других фреймворков, Sexy спроектирован, чтобы использовать весь нативный потенциал Javascript.


Это означает, что фреймворк не работает в runtime. Всю основную работу он делает в момент компиляции. Фреймворк анализирует ваши компоненты и переводит их в нативный Javascript с очень небольшим оверхедом: максимальный вес бандла всего 3.7kb gzip. (если будут использованы все типы рендеринга, анимации и т.д.)


Вообще, Sexy фреймворк был сделан для работы совместно с серверным рендерингом, где и показывает лучшие цифры по Google PageSpeed. Например, значение FID (Fisrt input delay) при гидратации 500 статичных компонентов занимает всего 50мс, когда у NuxtJs все 180мс, а у Svelte 500мс.


Это было бы не так важно, если бы доля мобильных устройств в интернете не была бы около 68% и дело не только в SEO.


Теперь и для обычных веб-сайтов можно использовать компонентный подход и нормальное тестирование компонентов.


Почему он такой Sexy?


1. Не работает в runtime


Вся основная работа происходит на уровне компиляции, а в итоге вы получаете нативный и супер эффективный Javascript, который позволяет создавать быстрые веб-приложения.


2. Не использует виртуальный DOM


Опять же, в отличии от других фреймворков, вместо виртуального DOM используется нативный DOM.


3. Нет реактивных библиотек


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


4. Частичная гидратация


Sexy был спроектирован с подходом hydrate first. То есть изначально разрабатывался, чтобы гидратация была максимальна быстрая, дабы повысить FID и TTI. В среднем скорость начала работы на клиенте (при SSR) лучше, чем у других фреймворков минимум в 3 раза.


5. Действительно нативный


Sexy переводит весь код в нативные Javascript инструкции, поэтому sexy-компоненты весят мало.


6. Очень быстрый


Помимо быстрого рендера, Sexy очень сильно улучшает гидратацию, что позволит использовать фреймворк при создании веб-приложений для медленных устройств. Или… Проектировать приложения почти не задумываясь о производительности и всяких костылях в виде ленивой гидратации.


Работа с Sexy framework


Существует два способа начать использовать Sexy фреймворк:


1. Простой – создать веб-приложение и начать писать код


npx create-sexy-app sexy-app

И запустить в режиме разработчика


npm run dev

2. Сложный – Подключить библиотеки вручную и настроить бандлер (webpack)


Подробнее в документации.


Sexy framework


Фреймворк находится в alpha версии.


Синтаксис и однофайловые компоненты похожи на Vue, но есть несколько отличий. Подробнее можете почитать в документации.


Также в проект нуждаются контрибьюторы, core-команда еще не сформирована.

Tags:реактивное программированиеjavascript фреймворкипроизводительность javascript
Hubs: Website development JavaScript
+3
7.4k 37
Comments 61
Top of the last 24 hours