Frontender Libs - обзор библиотек JS / CSS
8.48K subscribers
2.01K photos
734 videos
1 file
237 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
RxJS

RxJS - это библиотека для реактивного программирования, которая позволит удобно организовать работу с событиями и асинхронным кодом, писать сложную логику декларативно. RxJS активно используется в фреймворке Angular, а также с Vue (Vue-rx) и лежит в основе реализации middleware для Redux (redux-observable) для React.

👉 @sWebDev
Underscore.js

Underscore.js предоставляет более 60 функций. Часть из них рассчитана на любителей map-reduce, другая — специальные вспомогательные функции для javascript. Библиотека умеет делегировать вызовы, если какая-то функциональность реализована разработчиками браузеров.

Примеры
// Первый элемент массива
_.first([5, 4, 3, 2, 1]); // => 5

// Последний элемент массива
_.last([5, 4, 3, 2, 1]); // => 1

// Убрать неугодные элементы
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

// Оставить только уникальные элементы
_.uniq([1, 2, 1, 3, 1, 4]); // => [1, 2, 3, 4]

👉 @sWebDev
Omniscient

Omniscient.js — это библиотека JS, которая обеспечивает абстракцию компонентов React для быстрого рендеринга сверху вниз, охватывающего неизменяемые данные.

Эта библиотека может помочь вам легко создать ваш проект, поскольку она оптимизирована и предлагает интересные функции.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
fullPage.js

Эта библиотека с открытым исходным кодом помогает легко создавать сайты с полноэкранной прокруткой. Она проста в использовании, а также с помощью неё можно создать слайдер в альбомной ориентации для отдельного раздела сайта.

👉 @sWebDev
Gatsby.js

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

👉 @sWebDev
Masonry

Masonry - это потрясающая библиотека для создания сетки. Эта библиотека помогает размещать элементы раскладки в подходящих положениях в зависимости от доступного пространства по вертикали.

👉 @sWebDev
PrimeVue

Это универсальная, простая в использовании и производительная библиотека UI-компонентов для Vue. Она создана, чтобы помочь вам строить прекрасные пользовательские интерфейсы.

В этой библиотеке вы найдете больше 80 UI-компонентов с адаптивным дизайном и полной поддержкой WCAG (руководство по обеспечению доступности веб-контента). Благодаря последнему обновлению эта библиотека имеет полную поддержку Vue 3. В том же обновлении добавилось большое количество новых компонентов.

Одно из основных преимуществ PrimeVue — широкий спектр компонентов. Там есть все, от таблиц и пагинаторов до продуманных диаграмм, которые вы можете использовать при создании интерактивных Vue-приложений.

👉 @sWebDev
Parsley

Вы хотите добавлять формы в свои проекты?

Если да, то Parsley может быть вам полезен. Это простая, но мощная библиотека JS, которую можно использовать для проверки форм.

Особенности и преимущества:
1. Интуитивно понятный DOM API принимает входные данные непосредственно из тегов HTML, не требуя написания JS.
2. Проверка динамической формы путем динамического обнаружения изменений формы.
3. 12+ встроенных валидаторов, валидатор Ajax и другие расширения.
4. Вы можете переопределить поведение Parsley по умолчанию и предложить интерфейс, ориентированный на пользовательский интерфейс и UX.
5. Бесплатный, с открытым исходным кодом и сверхнадежный, а также работает со многими браузерами.

👉 @sWebDev
Vuetify

Vuetify — UI-библиотека Vue с красивыми, сделанными вручную компонентами. Все компоненты соответствуют спецификациям Material Design: они модульные, адаптивные и производительные.

Благодаря использованию SASS-переменных вы сможете кастомизировать свои приложения, создавая уникальные и динамичные макеты и прекрасные стили компонентов.

Vuetify учитывает руководства по доступности, поддерживает все современные браузеры и совместима с Vue CLI 3. Она легко интегрируется и имеет множество UI-компонентов, пригодных для многократного использования (карусели, навигация, карточки).

Библиотека также предлагает базовые шаблоны для простого HTML, Webpack, NUXT, PWA, Electron, A La Carte и Apache Cordova.

👉 @sWebDev
Polymer

Библиотека JavaScript с открытым исходным кодом от Google — Polymer используется для создания веб-приложений с использованием компонентов.

Особенности и преимущества:
1. Предоставляет простой способ создания нестандартных элементов.
2. Поддерживает вычисляемые свойства.
3. Поддерживает как одностороннюю привязку данных, так и двустороннюю.
4. Хорошо работает с событиями жестов.

👉 @sWebDev
Chakra UI

Chakra UI — библиотека простых, модульных и доступных компонентов. Это отличный инструмент для быстрого и легкого создания Vue-приложений.

Все компоненты отличаются доступностью (жесткое следование стандартам WAI-ARIA), тематичностью и пригодностью для компоновки. Они поддерживают адаптивные стили из коробки и совместимы с темным режимом.

Chakra UI также содержит набор компонентов макета, таких как CBox и CStack, которые упрощают стилизацию ваших компонентов. Кроме того, вы сможете автоматически импортировать компоненты Chakra UI с помощью плагина Webpack.

👉 @sWebDev
Vaadin web components

Достаточно новая, но многообещающая библиотека. Она содержит набор из 30 развивающихся open source веб-компонентов для создания пользовательского интерфейса мобильных и настольных веб-приложений для современных браузеров. Библиотека находится в активной разработке и определенно заслуживает внимания.

👉 @sWebDev
👨‍💻 Web-разработка на Scala — набирающий обороты тренд. Перейти в эту область поможет онлайн-курс «Scala Developer» от OTUS.

👉 Пройди полный тест и узнай сможешь ли ты стать Scala-разработчиком https://otus.pw/0ZQJ/

На курсы ты научишься использовать Akka для создания микросервисов, освоишь функциональное программирование и библиотеку ZIO, модульные тесты на основе инвариантов свойств и многое другое.

Курс рассчитан на разработчиков с опытом от 1 года на Java или с опытом от 3-х лет на других языках ООП.
Time elements

Довольно старая библиотека, которая представляет собой компонент, предоставляющий пользовательские подтипы стандартного HTML-элемента <time>. С помощью форматирования отметки времени в качестве локализованной строки или в качестве relative text, который автоматически обновляется в пользовательском браузере, можно создать пользовательские расширения для свободного использования.

👉 @sWebDev
REACT-I18NEXT

Когда нужно создать мультиязычное приложение, определенно стоит воспользоваться библиотекой React-i18next. Эта библиотека является мощным инструментом интернационализации для React на базе i18next. Она предлагает законченное решение, позволяющее локализовать различные веб-приложения: от мобильных до настольных.

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

👉 @sWebDev
Elix

Elix — это управляемый сообществом набор повторно используемых и настраиваемых веб-компонентов для распространенных шаблонов пользовательского интерфейса. Для обеспечения высоких стандартов качества компоненты оцениваются по списку Gold Standard для веб-компонентов, в котором встроенные HTML-элементы используются в качестве стандарта качества.

👉 @sWebDev
ENZYME

Enzyme - библиотека, значительно упрощающая тестирование React-приложений. Эта библиотека была создана командой разработчиков Airbnb и представлена, как решение с открытым исходным кодом, в 2015 году. API Enzyme интуитивно понятно. Enzyme может использоваться для тестирования с библиотеками Mocha, Jest, Karma.

👉 @sWebDev
UI5-webcomponents

Эта библиотека разработана UI5 от SAP и представляет собой набор легких, повторно используемых UI-элементов. Компоненты не только разработаны поверх UI5, но также являются отдельными элементами. Дизайн компонентов согласуется с SAP Fiori Design Guidelines и включает дизайн Fiori 3.

👉 @sWebDev
MUI

Позиционируется как легкий фреймворк, тем не менее в нем используется Angular и React, что явно не делает его легче, я бы сказал, что он тяжелее всех, не считая темы для Bootstrap речь о которой пойдет позже.
Большой вес фреймворка компенсируется поддержкой React.js версии 16, Angular.js и наличием модуля для верстки почтовых писем.

Письма сверстанные с использованием этого фреймворка поддерживаются многими популярными платформами для работы с e-mail ящиками, например GMail, Microsoft Outlook, Apple Mail и т.д., а если письмо оформлено красиво и, в первую очередь, приятно для чтения, то с помощью обычной рассылки вы сможете заинтересовать человека вашим продуктом или чем-либо другим.

👉 @sWebDev
Patternfly

Элементы PatternFly — это коллекция, состоящая из 20 гибких и легких веб-компонентов, а также инструментов для их создания. Элементы PatternFly обладают легким весом и ограничением boilerplating (что в значительной степени является стандартом для веб-компонента). Они работают в React, Vue, Angular и vanilla JS, а также везде, где используются HTML-элементы.

Запустите демо-версию:
git clone [email protected]:patternfly/patternfly-elements.git
cd patternfly-elements
npm install # this will take a while due to lerna bootstrap
npm run storybook


👉 @sWebDev