Интерфейсные ресурсы на 2020 год

Информация

Эта статья включена вawesome-frontendи буду продолжать обновлять~

упаковочный инструмент

  • webpack- Упаковать проект
  • rollup- Пакет библиотеки npm
  • parcel- Конкурирующие продукты webpack, но перспективы развития не оптимистичны, и мы будем наблюдать это некоторое время
  • @pikapkg/pack- Еще один инструмент для упаковки компонентов
  • systemjs- Это полезно для некоторых специальных сценариев, таких как облачная IDE, IDE апплета Alipay и т. д.
  • microbundle- На основе накопительного пакета, упрощенная конфигурация
  • bili- на основе свертывания, то же самое
  • webpack-dev-server- сервер разработки веб-пакетов
  • webpack-dev-middleware- промежуточное ПО веб-пакета
  • vue-cli- инструмент командной строки vue
  • create-react-app- Реагировать на официальные леса
  • webpack-merge- Объединить конфигурацию веб-пакета
  • webpack-chain- Изменить конфигурацию веб-пакета через API в стиле цепочки.
  • prepack- Оптимизация результатов упаковки за счет предварительного выполнения
  • swc- Преобразователь синтаксиса на основе ржавчины, конкурент babel
  • nathan/pax- На основе ржавчины, считается самым быстрым сборщиком JavaScript на планете.
  • pikapkg/web- Запускать зависимости npm в браузере, ориентируясь на современные браузеры.
  • lebab/lebab- Преобразование кода es5 в es6, обратное вавилон
  • palmerhq/tsdx - Zero-config CLI for TypeScript package development

загрузчики и плагины webpack

  • hard-source-webpack-plugin- Повышение производительности на 70%, но есть подводные камни
  • svgr- svg для реакции компонента
  • postcss- Вавилон CSS
  • autoprefixer- Автоматически префикс параметров CSS
  • cssnano- Сжатие CSS, также имеет концепцию предустановленного класса
  • mini-css-extract-plugin- Извлечь CSS в отдельные файлы
  • webpackbar- индикатор выполнения веб-пакета
  • webpack-bundle-analyzer- Анализ доли строительной продукции
  • uglifyjs-webpack-plugin- Сжатие JS, продукт с синтаксисом ES5
  • terser-webpack-plugin- Сжатие JS, продукт - грамматика ES6
  • webpack-manifest-plugin- Создать манифест.json
  • copy-webpack-plugin- Скопируйте дополнительные файлы в выходной каталог
  • case-sensitive-paths-webpack-plugin- Обнаружение с учетом регистра, что позволяет избежать некоторых проблем, но потребление производительности при построении велико.
  • css-hot-loader- Горячее обновление CSS, используйте с плагином mini-css-extract-plugin.
  • duplicate-package-checker-webpack-plugin- Обнаружение повторяющихся зависимостей
  • fork-ts-checker-webpack-plugin- Проверка синтаксиса TS
  • speed-measure-webpack-plugin- Статистика времени, проведенного на каждом этапе вебпака

управление пакетами

Рамка

Связанные с холстом

приложение, связанное

связанные с CSS

связанный с апплетом

  • mpvue- Среда разработки апплетов на основе Vue.js, поддерживающая синтаксис Vue.js и систему инструментов построения снизу
  • wepy- Структура разработки малых программных компонентов
  • westore- Решение для апплета микро-письма - 1 КБ javascript для управления состоянием, межстраничный информационный бюллетень, разработка подключаемых модулей и разработка облачной базы данных
  • ColorUI- Яркие и насыщенные цвета, визуально ориентированная библиотека компонентов апплета
  • Gitter- Демо, разработанное с помощью Taro framework + Taro UI, может быть самым красивым клиентом апплета GitHub WeChat в настоящее время.

⬆️ Вернуться домой

разное

  • react
  • vue
  • next.js
  • nuxt.js
  • gastby
  • umi- Внешний фреймворк Ant Financial
  • rekit - IDE and toolkit for building scalable web applications with React, Redux and React-router
  • choo- Оригинальный API dva основан на этой реализации, он мало разрабатывался, и я некоторое время обращу на него внимание.
  • taro- Написать небольшую программу на React, адаптировать WeChat и Alipay и т.д.
  • after.js
  • mint- Обеспечить основу для схемы языкового уровня
  • quasar- Основанный на vue, один набор кода применим ко многим местам.
  • Angular
  • Foundation
  • Polymer- Фреймворк для создания веб-компонентов, выпущенный Google.
  • cyclejs
  • taro- Многотерминальная унифицированная среда разработки, поддерживающая однократное написание кода с помощью метода разработки React.

Библиотеки, связанные с React

  • preact- Легкая реализация React
  • inferno- Легкая реализация React
  • react-router- Реагировать на схему маршрутизации
  • reach-router- Схема маршрутизации React, новее, преимущество в доступности
  • router5- Общая схема маршрутизации
  • react-loadable- Загружать реагирующие компоненты по требованию
  • material-ui- библиотека пользовательского интерфейса
  • react-intl- Схема интернационализации React
  • react-dnd- Перетащите реализацию
  • react-helmet- Изменить содержимое заголовка html
  • react-jsonschema-form - A React component for building Web forms from JSON Schema

Библиотеки, связанные с Vue

библиотека пользовательского интерфейса

разное

  • vue-router
  • vue-cropper- Простой плагин для редактирования изображений, который поддерживает редактирование постеров.
  • vue-pretty-logger- Vue версия этого редактора
  • vue-icon- Простой компонент иконки
  • vue-baidu-map- Vue-версия Baidu Maps
  • Vue.Draggable- Компонент перетаскивания Vue на основе Sortable.js
  • vue-codemirror- Vue-оболочка для codemirror
  • vue-apollo- Мост между Vue и GraphQL/Apollo
  • eagle.js- Мощная, гибкая и уникальная система слайд-шоу, созданная с помощью Vue.
  • vue-color- Выбор цвета
  • seat-select- Выберите место C конец
  • seat-select-controller- B-боковая загадка для выбора сиденья
  • vue-cli3-config- Конфигурация Vue-cli3 vue.config.js постоянно обновляется.
  • sing-app-vue-dashboard- Панель управления Sing App Vue
  • vue-storefront- Это приложение PWA, которое может подключаться к любому бэкэнду (или почти к любому бэкэнду).
  • vue-virtual-scroller- Быстрая полоса прокрутки
  • v-calendar- Плагин без зависимостей для создания календарей
  • vue-design-system- Набор инструментов пользовательского интерфейса
  • light-blue-vue-admin- Шаблон Vue.js для панели администратора
  • vue-grid-layout- Макет сетки для Vue.js
  • vue-content-loader- Создать заполнитель для загрузки
  • vue-js-modal- Высоко настраиваемый модальный
  • vue2-animate- Библиотека Animate, интегрированная с Animate.css
  • vuetensils- некоторые общие компоненты
  • easyjs- Имеет рендеринг на стороне сервера Egg Vue SSR.

Али система

  • ant-design- Муравьев Золотое платье React UI Библиотека
  • antvis- Сбор визуализации данных
  • ant-motion- Анимированные инструкции и компоненты дизайна Ant

Инструменты

  • history
  • path-to-regexp- путь к обычной, базовой библиотеке для обработки, связанной с маршрутизацией
  • lodash- Коллекция инструментов
  • fastclick
  • date-fns- обработка времени
  • immutable-js- Control DataSet
  • sprint
  • dayjs- Анализировать, проверять, манипулировать и отображать даты в javascript, аналогично моменту
  • fecha- Небольшая библиотека форматирования времени
  • tui.calendar- Библиотека календаря
  • em-cookie- Обработка файлов cookie
  • EM-NORMALIZE- сброс стиля
  • modernizr- Modernizr — это библиотека JavaScript, которая определяет функциональность HTML5 и CSS3 в браузере пользователя.
  • gpu.js- ускорение графического процессора
  • js-cookie- Инкапсуляция файлов cookie
  • moment- Анализировать, проверять, манипулировать и отображать даты в javascript
  • lazy.js- Библиотеки, такие как underscore.js
  • licia
  • underscore.js
  • rgbaster.js- Первичный цвет и извлечение вторичного цвета изображений
  • nanoid- Очень маленький генератор уникальных идентификаторов
  • hotkeys- Инкапсуляция клавиш клавиатуры, например ctrl+r
  • JsBarcode- js генерирует штрих-код (штрих-код)
  • comlink- Сделать WebWorker проще в использовании
  • await-timeout- Тайм-аут зависит от инкапсуляции Promise
  • dsa.js- Структуры данных и методы
  • copy-to-clipboard- Дублированный плагин
  • tesseract.js- Инструмент распознавания текста для изображений
  • svg.js- SVG-анимация
  • html2canvas- макет HTML, скриншот с холстом
  • shepherd- Направляйте своих пользователей через ваше приложение
  • intro.js- Лучший способ представить новые сведения о функциях и пошаговые руководства пользователя для вашего веб-сайта и проектов для новичков, представления функций, руководства по обновлению и т. д.
  • crypto-js- Криптографическая стандартная библиотека JavaScript
  • ulid- Создать библиотеку классов UUID
  • RSA- Используйте шифрование RSA для реализации зашифрованной передачи веб-данных
  • detector- Распознавание клиентской среды
  • ua-parser-js- Идентификация контекста клиента, userAgent
  • platform.js- Библиотека определения платформы
  • qrious- Для генерации QR-кодов с помощью Canvas
  • qart.js- Сгенерируйте художественный QR-код

поток данных

язык

Документация

проект

  • lerna- управление монорепо
  • lerna-changelog- Автоматически генерировать журнал изменений для проекта lerna
  • eslint- Ограничения стиля JS
  • eslint-config-airbnb
  • xo- Инкапсулированный из эслинта
  • prettier- Более субъективный стиль автомодификации
  • yeoman-generator- Инструменты для строительных лесов
  • serve- Локальный статический сервер
  • servor- еще один статический сервер
  • budo- Еще один статический сервер
  • np- Помощь в публикации npm, автоматическая отправка, тегирование, обновление версии и т. д.
  • lint-staged- ускорение eslint, только lint отправил код
  • coveralls- Покрытие
  • husky- добавить git-хуки
  • cross-env- Объявление кросс-платформенной переменной окружения
  • projj- Локальное управление проектами git, поддерживает github и gitlab
  • nvm- управлять версиями узлов
  • concurrently- Выполнять команды параллельно в скриптах npm
  • @zeit/ncc- упакован как пакет npm в виде файла
  • npm-check- обнаруживать обновления зависимостей иyarn upgrade-interactiveИспользуется вместе, в основном используется для обнаружения избыточных зависимостей
  • cpx- Репликация, поддержка глобусов и возможность просмотра
  • onchange- слушать изменения файлов и что-то делать
  • just- Диспетчер задач от Майкрософт
  • tern- Анализатор кода, обслуживающий множество редакторов
  • analyze-css- Анализатор сложности и производительности селектора CSS

редактор

Командная строка

  • yargs- Комплект ввода командной строки
  • yargs-parser- Разбор параметров командной строки
  • chalk- вывод разных цветов
  • cheerio- Обрабатывать HTML с синтаксисом, подобным jQuery.
  • chokidar- мониторинг файлов
  • clipboardy- скопировать текст в буфер обмена
  • debug- распечатать отладочную информацию
  • deprecate- дать просроченное предупреждение
  • glob- поиск файлов
  • tiny-glob- поиск файлов
  • signale- красивая печать журнала
  • semver- несколько версий обработки
  • update-notifier- Напоминание об обновлении
  • rimraf- Удалить файлы
  • depd- дать устаревшее предупреждение
  • execa- Работает лучше, чем child_process, возвращает Promise
  • ora- Управление курсором командной строки, загрузкой дисплея и т. д.
  • inquirer- Интерактивный командный интерфейс, например приглашение
  • enquirer- То же, что и выше, круче
  • ajv- проверка параметров
  • ink- обработка вывода командной строки React
  • figures- ✔︎ и другие специальные символы были обработаны для совместимости с Windows

обработка запроса

Связанный с форматированным текстом

  • Simditor- Простой и быстрый текстовый редактор
  • BachEditor- Сентиментальный редактор
  • TinyMCE
  • bootstrap-markdown
  • marked- парсер уценки
  • Markdown Plus
  • Editor.md- Онлайн-редактор Markdown с открытым исходным кодом
  • stackedit
  • Redactor Text Editor
  • micromarkdown.js- Легкий парсер md
  • wangEditor- Облегченное текстовое поле с расширенным форматированием в Интернете, поддерживающее мобильные устройства.
  • CKEditor- Визуальный HTML-редактор
  • Quill- Редактор расширенного текста
  • iEditor- Редактор расширенного текста
  • medium-editor- официально рекомендованный Vue.js редактор, поддерживающий Vue.
  • slate- Полностью настраиваемая структура для создания редакторов форматированного текста.
  • tiptap- Вью-редактор

Непрерывная интеграция

  • CircleCI
  • GitlabCi
  • appveyor- Решения непрерывной интеграции для Windows и Linux
  • Jenkins- Платформа непрерывной интеграции, поддерживающая PHP
  • JoliCi- Интегрированный клиент, написанный на PHP и работающий на DOCKER.
  • PHPCI- Платформа непрерывной интеграции PHP с открытым исходным кодом
  • SemaphoreCI- Интегрированная платформа для открытых и частных проектов
  • Shippable- Платформа непрерывной интеграции для открытых и частных проектов на основе DOCKER
  • Travis CI- Платформа непрерывной интеграции
  • Wercker- Платформа непрерывной интеграции
  • snyk.io- Обнаружение внешних зависимостей
  • codecov.io- Отчет о тестовом покрытии

онлайн-инструменты

онлайн программирование

  • jsfiddle- Онлайн-программирование, создание онлайн-превью
  • plnkr- Онлайн-программирование, создание онлайн-превью
  • codepen- Онлайн-программирование, создание онлайн-превью
  • jsbin- Онлайн-программирование, создание онлайн-превью

конвертировать

Управление иконками

Другие онлайн-инструменты

подсветка кода

Аудио видео

  • jPlayer - HTML5 Audio & Video for jQuery
  • video.js - HTML5 & Flash video player
  • Accessible HTML5 Video Player- Видеопроигрыватель HTML5 с открытым исходным кодом PayPal
  • Clappr- Веб-видеоплеер с открытым исходным кодом
  • Plyr - A simple HTML5 media player
  • FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds
  • BigVideo.js - The jQuery Plugin for Big Background Video
  • BigScreen - A simple library for using the JavaScript Full Screen API
  • Vide- Видео фон
  • winamp2-js
  • Buzz - A Javascript HTML5 Audio library
  • MediaElement.js- jquery-плагин плеера
  • html-canvas-video-player- Поддерживает плееры для iOS и Android
  • iphone-inline-video- Сделать встроенное воспроизведение видео на iPhone (предотвратить автоматический полноэкранный режим)

Библиотека визуализации данных

  • echarts- Он написан на чистом JavaScript и основан на канве zrender. Он поддерживает рисование диаграмм на холсте, SVG (4.0+) и VML. В дополнение к ПК и мобильным браузерам, ECharts также можно использовать с узлом-холстом на узле для эффективного рендеринга на стороне сервера (SSR).
  • Highcharts JS— это популярная библиотека диаграмм JavaScript на основе SVG, которую можно понизить до VML и Canvas для старых браузеров. 72 из 100 крупнейших компаний мира (Facebook, Twitter и т. д.) используют эту библиотеку, что делает ее самым популярным JS API для построения графиков в мире.
  • G2
  • F2- Мобильная диаграмма визуализации
  • D3— Вероятно, самая популярная и широко используемая библиотека визуализации данных JavaScript. D3 используется для обработки документов на основе данных и использует HTML, SVG и CSS для оживления данных. Он основан на веб-стандартах в сочетании с современными браузерами, не требует связи с проприетарными фреймворками и сочетает в себе визуальные компоненты и подход к манипулированию DOM на основе данных. Он позволяет привязывать произвольные данные к объектной модели документа (DOM), а затем применять преобразования данных к документу.
  • Chart.js— Очень популярная библиотека диаграмм HTML5 с открытым исходным кодом, которая использует элемент холста для создания адаптивных веб-приложений. ChartJS предоставляет гибридные типы диаграмм, новые типы осей диаграмм и приятную анимацию. Он имеет простой и элегантный дизайн с 8 основными типами диаграмм, вы можете использовать эту библиотеку с moment.js для рендеринга временной шкалы.
  • three.js- ThreeJS создает 3D-анимацию с помощью WebGL. Гибкость и абстракция этого проекта означают, что его также можно использовать для визуализации данных в 2 или 3 измерениях.
  • Metric-Graphics- Для визуализации и размещения данных временных рядов. Он относительно небольшой (80 КБ) и предоставляет небольшие и элегантные линейные графики, точечные диаграммы, гистограммы, гистограммы и таблицы данных, а также такие функции, как ковер-графики и базовая линейная регрессия.
  • Recharts— это библиотека диаграмм, созданная с помощью React и D3, доступная как декларативные компоненты React. Библиотека обеспечивает встроенную поддержку SVG, а облегченное дерево зависимостей (подмодуль D3) обладает широкими возможностями настройки. Многие примеры можно найти в официальной документации сайта.
  • Raphael— это векторная библиотека JavaScript для рисования векторной графики в Интернете. Библиотека использует SVG W3C и VML в качестве основы для создания графики, поэтому каждый графический объект также является объектом DOM, и вы можете присоединить обработчики событий JavaScript. В настоящее время Raphael поддерживает Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.
  • C3- это многоразовая библиотека диаграмм веб-приложений на основе D3. Библиотека предоставляет соответствующие классы для каждого элемента, поэтому вы можете использовать эти классы для настройки стилей и прямого расширения структуры через D3. Он также предоставляет различные API и обратные вызовы для доступа к состоянию графика. С ними можно обновить график даже для уже отрендеренных иконок.
  • React-vis— это серия компонентов визуализации данных, разработанных Uber, включая линейные/площадные/гистограммы, тепловые карты, тепловые карты, контурные карты, шестиугольные тепловые карты и многое другое. Использование этой библиотеки не требует предварительных знаний о D3 или любой другой библиотеке данных и предоставляет низкоуровневые модульные компоненты строительных блоков, такие как оси x/y.
  • React virtualized— это набор компонентов React, которые эффективно отображают большие списки и табличные данные. Версии ES6, CommonJS и UMD доступны в каждом дистрибутиве, а проект поддерживает рабочие процессы Webpack 4. Обратите внимание, что во избежание конфликтов версий, react, react-dom должны быть указаны как одноранговые зависимости
  • Victory- Используйте один и тот же API в веб-приложениях и приложениях React Native для удобного построения кросс-платформенных диаграмм. Элегантный и гибкий способ использования компонентов React для поддержки полезных визуализаций данных.
  • CartoDB- это инструмент анализа местоположения и визуализации данных для обнаружения идей в данных о местоположении. Вы можете загружать геопространственные данные (шейп-файлы, GeoJSON и т. д.) через веб-форму и визуализировать их в наборе данных или на карте, выполнять поиск с помощью SQL и применять стили карты с помощью CartoCSS.
  • Raw- это связь между электронными таблицами и визуализацией данных, создание пользовательских векторных визуализаций на основе библиотеки d3.js. Он может обрабатывать табличные данные (электронные таблицы и CSV) и текст, скопированный и вставленный из других приложений. Поскольку он представлен в формате SVG, его можно редактировать с помощью редактора векторной графики или встраивать непосредственно в веб-страницу.
  • Metabase— это довольно быстрый и простой способ создания информационных панелей данных без знания SQL (аналитики и специалисты по данным могут использовать режим SQL). Вы можете создавать фрагменты и метрики, отправлять данные в Slack (просматривать данные в Slack через MetaBot) и многое другое. Это может быть отличный инструмент для визуализации данных в команде, хотя может потребоваться некоторое обслуживание.
  • tauCharts- Библиотека диаграмм на основе D3. Библиотека предоставляет декларативный интерфейс для быстрого сопоставления полей данных со свойствами визуализации, а ее архитектура позволяет использовать плагины для построения аспектов и расширения поведения диаграммы.
  • chartist-js- Простые адаптивные графики
  • semiotic- Фреймворк визуализации данных, сочетающий в себе React и D3.
  • nvd3- Многоразовая библиотека диаграмм, написанная на D3.js.
  • viser- Набор инструментов для дата-инженеров
  • tui.chart- Красивые диаграммы визуализации данных
  • datamaps- Настройте визуализацию карты SVG в одном фрагменте JavaScript с помощью D3.js.
  • sheetsee.js- Для визуализации данных в Google Sheets
  • BizCharts- Библиотека визуализации данных на основе G2 и React
  • sigma.js- Библиотека JavaScript, предназначенная для рисования графики.
  • incubator-echarts- Библиотека браузера с мощными интерактивными диаграммами и визуализациями
  • vis- Динамическая библиотека визуализации на основе браузера

Библиотека анимации

  • velocity
  • GreenSock-JS
  • tween.js
  • anime
  • animate.css - A cross-browser library of CSS animations
  • Transit - CSS transitions and transformations for jQuery
  • WOW- Эффекты CSS отображаются во время прокрутки (по умолчанию триггер animate.css)
  • AniJS - A Library to Raise your Web Design without Coding
  • Move.js- библиотека JS для упрощения CSS3
  • ScrollMe- Добавляйте различные эффекты прокрутки на веб-страницы.
  • Effeckt.css - A Performant Transitions and Animations Library
  • NEC
  • csshake - CSS classes to move your DOM
  • magic - CSS3 Animations with special effects
  • SpinKit
  • lenticular.js- Создание изображений в ответ на наклон или события мыши
  • interactive_3d - jQuery Interactive 3D - Create a 3D interactive object using images
  • AnimateScroll - A Simple jQuery Plugin for Animating Scroll
  • Blast.js
  • Bounce.js - A JS library for making beautiful CSS3 keyframe animations
  • Sticker.js - create a Sticker Effect
  • scrollReveal.js - The element enters the visible area and automatically triggers the set animation
  • stroll.js - CSS3 list scroll effects
  • jQuery Easing- Расширение режимов упражнений
  • animations - CSS3 ANIMATION CHEAT SHEET
  • iconate.js- Библиотека JS для добавления эффектов движения к значкам.
  • Odometer- Вертикальное переключение между номерами
  • Hover.css- Много эффектов наведения мыши
  • imagehover.css- Добавить эффект наведения к изображениям
  • iHover- Эффект наведения изображения
  • ImageCaptionHoverAnimation
  • Bootstrap Hover Image Gallery
  • AlloyFinger- Очень маленькая библиотека веб-жестов, разработанная Tencent AlloyTeam.

Моделирование данных

инструменты отладки

  • eruda
  • vConsole
  • vue-pretty-logger- Плагин вывода локального журнала, который все еще обновляется.
  • signale - Hackable console logger

разное

  • yazl- сжатие zip
  • yauzl- распаковка zip
  • tar-fs- сжатие и распаковка tar
  • esquery- Запрос синтаксического дерева
  • remark- Парсер уценки
  • markdown-it- Уценка в HTML
  • electron
  • DeskGap- электрон, потому что часть не включает в себя браузер, продукт меньше
  • fx- Интерактивный просмотр JSON
  • fontawesome- Шрифтовые ресурсы
Категории