[Разработка веб-сайтов, JavaScript] Самый sexy framework для веб-приложений
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Привет! Меня зовут Кирилл, я уже более 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-команда еще не сформирована.
===========
Источник:
habr.com
===========
Похожие новости:
- [Laravel, PHP, Разработка веб-сайтов] Laravel-Дайджест (29 июня – 5 июля 2020)
- [JavaScript, Игры и игровые приставки, Разработка веб-сайтов, Социальные сети и сообщества] Программист создал аналог Club Penguin для взрослых, где можно одновременно общаться как в Zoom и играть
- [Веб-дизайн, Развитие стартапа, Разработка веб-сайтов, Управление продуктом] Как определить функционал MVP и влюбить клиента в пилотную версию продукта
- [1С-Битрикс, API, PHP, Разработка веб-сайтов] Ещё один велосипед: пишем свой автозагрузчик классов для Битрикс
- [JavaScript, ReactJS, VueJS, Разработка веб-сайтов] Устройство ленивой загрузки в популярных фронтенд-фреймворках (перевод)
- [DevOps, Отладка, Тестирование IT-систем, Тестирование веб-сервисов] Sentry удаленый мониторинг багов в фронтенд приложениях React
- [Google Chrome, JavaScript, Node.JS] Как обойти запрет доступа к страницам с помощью Chrome в headless-режиме (перевод)
- [JavaScript, Node.JS, ReactJS] Redux store vs React state
- [JavaScript, TypeScript, Отладка] Source Maps: быстро и понятно
- [HTML, JavaScript, Веб-дизайн, Ненормальное программирование] E-learning на костылях. Исправляем курсы из Articulate Rise
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_reaktivnoe_programmirovanie (реактивное программирование), #_javascript_frejmvorki (javascript фреймворки), #_proizvoditelnost_javascript (производительность javascript), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_javascript
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:36
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Привет! Меня зовут Кирилл, я уже более 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-команда еще не сформирована. =========== Источник: habr.com =========== Похожие новости:
Разработка веб-сайтов ), #_javascript |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:36
Часовой пояс: UTC + 5