Создание стриминг сервиса на Nuxt.js, Node.js и Express

#jsarticle #nodejs #backend #fullstack #vue #nuxtjs #express #webdev

Vue 3 Composition API - ref() vs. reactive()

#jsarticle #javascript #vue #frontend #webdev

​​Vuestic - UI фреймворк для Vue 3

- более 50 компонентов (с адаптивностью)
- хорошее a11y
- поддержка Chrome, Firefox, Safari 10+ и Edge

#jslib #vue #frontend #webdev #javascript

Logux - менеджер состояния для React, Vue и Svelte от создателя PostCSS

- Весит всего 157 байт и не имеет зависимостей
- Библиотека довольно быстрая, благодаря атомарному состоянию, которое не вызывает ререндер каждого компонента
- Хорошо работает с tree-shaking
- Не использует CPU и память пока не рендерятся компоненты, подписанные на состояние
- Поддерживает TypeScript

#jslib #javascript #react #svelte #vue #frontend #webdev #typescript

Диего Хаз — автор библиотеки компонентов Reakit — рассказал о принципе разработки базовых компонентов — "Introducing the Single Element Pattern".

При разработке приложений Диего выделяет понятие "базовый компонент" — фундаментальную часть приложения, следующую определённым правилам, благодаря которым кодовая база проекта легко масштабируется и не усложняется в поддержке (принцип Singel). Правила:

— Компонент рендерит только один элемент (в редких случаях несколько)
— Компонент не должен ломать приложение при возникновении исключений
— Рендерит все HTML-атрибуты, переданные как пропсы
— Мёржит стили, передаваемые как пропсы
— Добавляет все обработчики событий, передаваемые как пропсы

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

#react #vue #angular

https://www.freecodecamp.org/news/introducing-the-single-element-pattern-dfbd2c295c5d/

Ускорение отрисовки комментарии Хабра

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".

Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.

Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.

Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.

#performance #spa #vue

https://habr.com/ru/company/habr/blog/590111/

🛠 VuePress — простой генератор статических сайтов на базе Vue. Он создает предварительно отрендеренный статический HTML-код для каждой страницы, а затем запускает весь веб-сайт как одностраничное приложение. VuePress поставляется с темой по умолчанию, которая включает адаптивные макеты, настраиваемую навигационную панель и боковую панель, необязательную домашнюю страницу и многое другое.

🌍 Сайт

Daily Coding #инструменты #Vue

🛠 Element - это фреймворк пользовательского интерфейса, основанный на платформе Vue.js 2.0. Он включает в себя набор из более чем 50 компонентов, которые стилизованы очень последовательно, в соответствии с определенным дизайном и выбором цвета. Каждый элемент хорошо документирован и его очень легко настроить и внедрить в любой проект Vue.js. Существует также полезный шаблон эскиза компонентов для создания макетов.

🌍 Сайт

Daily Coding #инструменты #Vue

🛠 Buefy - легкий фреймворк UI для Vue.js построен с использованием популярного элемента на основе CSS библиотека Бульма. В ней есть все составляющие типичного веб-приложения должен в том числе динамические элементы, как модели, тосты и уведомления, что позволяет разработчикам быстро добавлять элементы пользовательского интерфейса в своих проектах Vue.js .

🌍 Сайт

Daily Coding #инструменты #Vue

🛠 Weex - это фреймворк для создания кроссплатформенных мобильных приложений, аналогичный React Native, но для Vue.js. Он позволяет вам написать свое приложение на HTML, CSS и JavaScript, которые затем будут отображаться на Java для Android и Swift для iOS. Фреймворк имеет ряд встроенных компонентов, API и других полезных утилит.

🌍 Сайт

Daily Coding #инструменты #Vue

🛠 Keen UI - Коллекция компонентов, вдохновленных Material Design. Vue.js Пользовательский интерфейс Keen очень легкий, совместим с Vue 2.1.4 и имеет множество возможностей настройки. В нем много компонентов, и все они выглядят великолепно.

🌍 Сайт

Daily Coding #инструменты #Vue