Frontender Libs - обзор библиотек JS / CSS
8.46K subscribers
2.02K photos
735 videos
2 files
239 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

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

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
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
Ring UI

Неплохая библиотека компонентов React от всеми известной JetBrains. Имеется большой набор компонентов среди которых есть действительно уникальные и полезные «штуки». Все компоненты имеют фирменный стиль JetBrains.

👉 @sWebDev
Wired elements

Wired elements — это коллекция элементов, нарисованных вручную. Разработанные для вайрфреймов, элементы нарисованы таким образом, что два элемента визуализации не могут быть одинаковы — как две отдельные нарисованные от руки формы. Полезно? Возможно. Круто? Определенно:).

👉 @sWebDev
SurveyJS

Помогает разработчикам создавать настраиваемые опросы и квизы, которые можно интегрировать с любыми приложениями JavaScript (JS).

Возможности:
1. Расширение опросов с помощью сторонних виджетов;
2. Интеграция с любыми приложениями;
3. Создание опросов для сопровождения элементов бренда веб-сайта.

👉 @sWebDev
Final Form

Библиотека для создания красивых и доступных форм. Позволяет точно контролировать, какие элементы формы получают уведомления об изменениях состояния формы.

Функции:
1. Совместима со всеми веб-фреймворками;
2. Полноценная и расширяемая реализация;
3. Автономность.

👉 @sWebDev
Redux

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

👉 @sWebDev
Angular Material

Это официальная библиотека компонентов Angular, в которой реализованы концепции Material Design от Google. Эти компоненты пользовательского интерфейса можно рассматривать как примеры кода, написанные в соответствии с рекомендациями команды разработчиков Angular.

👉 @sWebDev
DropzoneJS

Позволяет создавать окна загрузки файлов с помощью технологии drag-and-drop. Есть возможности для создания превью изображений, превью файлов и анимации выполнения процесса.

Преимущества:
1. Не имеет внешних зависимостей;
2. Возможность настройки под конкретные нужды.

👉 @sWebDev
NGX Bootstrap

Библиотека NGX Bootstrap набрала около 5 тысяч звёзд на GitHub. В ней можно найти базовые компоненты, реализующие возможности шаблона Bootstrap и написанные для Angular, да и не только их. Она подходит для разработки настольных и мобильных приложений и спроектирована с учётом расширяемости и адаптивности.

👉 @sWebDev
Typeahead.js

Библиотека с открытым исходным кодом. Обеспечивает автозаполнение для окон поиска и других текстовых полей на веб-сайтах. Состоит из двух компонентов — механизма предложений и UI-элемента.

Ключевые функции:
1. Компоненты библиотеки можно использовать отдельно модульно;
2. Обширная библиотека для каждого компонента;
3. Поддержка всех десктопных браузеров (не для мобильных).

👉 @sWebDev
Prime NG

Это библиотека, включающая в себя обширный набор из более чем 70-ти компонентов пользовательского интерфейса. При этом здесь доступны разные виды их стилизации, например — Material Design и Flat Design. Ей пользуются такие компании, как eBay, Fox, и многие другие. Всё это говорит о том, что данная библиотека достойна внимания тех, кто ищет подходящий набор компонентов для своего проекта.

👉 @sWebDev
ApexChart

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

Функции:
1. Оболочки для популярных фреймворков, таких как React, Vue и Angular;
2. Обширная документации и кроссбраузерная поддержка;
3. Единый и простой в использовании API.

👉 @sWebDev
Сколько времени учатся на фронтендера с нуля?

От 6-ти месяцев. Вот несколько правил, с которыми сделать это будет проще:

- Не изучайте фреймворк, не разобравшись в азах;
- Не учитесь по любительским урокам, где могут показать плохие практики;
- Не делайте перерывов в обучении;
- Выполняйте практические задания, выбирайте их соответственно своему уровню;
- Найдите ментора, который будет вас проверять и выявлять пробелы в знаниях.

Плохая организация обучения отодвинет срок вашей первой ЗП на годы, отнеситесь к этому ответственно.

Можно выбрать готовое решение - Профессия Frontend-разработчик PRO от Skillbox.

Курс разработан грамотно и проверен на тысячах студентов.

В него входят:
- 3 месяца бесплатного периода;
- изучение React, Vue
- гарантия трудоустройства;
и многое другое.

Летняя скидка - 40%
NG-ZORRO

Компоненты из библиотеки NG-ZORRO написаны на TypeScript с полной типизацией. Цель этого проекта — дать разработчикам высококлассные компоненты для создания пользовательских интерфейсов в стиле Ant Design. Эта интересная библиотека создана китайскими разработчиками, на GitHub у неё около 2 тысяч звёзд.

👉 @sWebDev
Ext JS

Ещё пару лет назад этот продукт бил все рекорды популярности у опытных разработчиков, заслуженно завоевав их уважение. Был даже период, когда Sencha Ext JS был безраздельным властелином на рынке UI библиотек.

👉 @sWebDev
Meanderer

Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации. Перед началом работы автор Meanderer рекомендует воспользоваться SVGOMG.

👉 @sWebDev