Библиотеки и фреймворки JS: различия между версиями

Материал из СГУ WIKI
 
(не показана 1 промежуточная версия 1 участника)
Строка 1: Строка 1:
== 1. Отличие библиотеки от фреймворка ==
== Отличие библиотеки от фреймворка ==
== 2. Основные JS-библиотеки ==
* '''Библиотека''' — набор функций/классов, которые программист вызывает сам. Она не навязывает архитектуру, а лишь помогает выполнять задачи. 
== 1. Отличие библиотеки от фреймворка ==
Примеры: '''jQuery''', '''Lodash''', '''D3.js'''.
== 1. Отличие библиотеки от фреймворка ==
* '''Фреймворк''' — задаёт структуру проекта и диктует, как писать код. Обычно он управляет приложением (''инверсия управления''). 
== 1. Отличие библиотеки от фреймворка ==
Примеры: '''Angular''', '''React''' (условно называют библиотекой, но часто используют как фреймворк), '''Vue.js''', '''Next.js'''.
== 1. Отличие библиотеки от фреймворка ==
 
== Основные JS-библиотеки ==
; 🟢 jQuery
Историческая библиотека (2006). 
Упрощала работу с DOM, AJAX и событиями. 
В новых проектах используется редко, так как многие её функции встроены в современный JS.
 
; 🟢 Lodash / Underscore
Утилитарные библиотеки
Предоставляют готовые функции для работы с массивами, объектами, строками, числами и др. 
Примеры: <code>_.map</code>, <code>_.cloneDeep</code>.
 
; 🟢 D3.js
Библиотека для работы с графикой и визуализацией данных. 
Позволяет строить интерактивные графики, диаграммы и анимации на базе SVG и Canvas.
 
; 🟢 Chart.js
Простая библиотека для построения графиков. 
Работает «из коробки», в отличие от D3, где требуется больше ручной работы.
 
; 🟢 Three.js
Библиотека для работы с 3D-графикой в браузере через WebGL. 
Используется для игр, VR/AR и интерактивных сцен.
 
; 🟢 Axios / Fetch API
'''Axios''' — популярная библиотека для HTTP-запросов. 
Сейчас чаще применяют встроенный <code>fetch</code>, но Axios остаётся востребованным благодаря поддержке интерцепторов, автоматической обработке JSON и отмене запросов.
 
== Основные JS-фреймворки ==
* '''React''' — библиотека для UI, часто используется как фреймворк. Компонентный подход, Virtual DOM, большая экосистема (Next.js, Redux и др.).
* '''Angular''' — полнофункциональный MVC-фреймворк от Google. Использует TypeScript по умолчанию. Подходит для больших корпоративных приложений.
* '''Vue.js''' — лёгкий и гибкий фреймворк, прост в изучении. Имеет экосистему (Vue Router, Pinia).
* '''Svelte''' — компилирует код в чистый JavaScript без Virtual DOM. Лёгкий и быстрый.
 
== Фреймворки поверх React/Vue ==
* '''Next.js''' (React) — поддержка SSR и SSG, оптимизация для SEO, популярный выбор для крупных проектов.
* '''Nuxt.js''' (Vue) — аналог Next.js, но для Vue. Автоматическая маршрутизация, SSR, SSG.
* '''Remix''' (React) — акцент на серверный рендеринг и маршрутизацию.
 
== Другие популярные фреймворки/библиотеки ==
* '''Express.js''' — минималистичный серверный фреймворк для Node.js.
* '''NestJS''' — серверный фреймворк для Node.js, вдохновлён Angular.
* '''Electron.js''' — для создания десктопных приложений на базе JS/HTML/CSS (пример: VS Code).
* '''React Native''' — кроссплатформенная разработка мобильных приложений.
 
== Тенденции 2025 ==
{| class="wikitable"
! Фреймворк !! Популярность (2024–2025)
|-
| React || 82 %
|-
| Vue.js || 51 %
|-
| Angular || 50 %
|-
| Svelte || 26 %
|-
| Solid.js || 9 %
|}
 
* Для визуализации активно используются '''D3.js''', '''Three.js''', '''Chart.js'''. 
* Для бэкенда на JavaScript/TypeScript лидирует '''NestJS'''.

Текущая версия на 19:29, 16 сентября 2025

Отличие библиотеки от фреймворка

  • Библиотека — набор функций/классов, которые программист вызывает сам. Она не навязывает архитектуру, а лишь помогает выполнять задачи.

Примеры: jQuery, Lodash, D3.js.

  • Фреймворк — задаёт структуру проекта и диктует, как писать код. Обычно он управляет приложением (инверсия управления).

Примеры: Angular, React (условно называют библиотекой, но часто используют как фреймворк), Vue.js, Next.js.

Основные JS-библиотеки

🟢 jQuery

Историческая библиотека (2006). Упрощала работу с DOM, AJAX и событиями. В новых проектах используется редко, так как многие её функции встроены в современный JS.

🟢 Lodash / Underscore

Утилитарные библиотеки. Предоставляют готовые функции для работы с массивами, объектами, строками, числами и др. Примеры: _.map, _.cloneDeep.

🟢 D3.js

Библиотека для работы с графикой и визуализацией данных. Позволяет строить интерактивные графики, диаграммы и анимации на базе SVG и Canvas.

🟢 Chart.js

Простая библиотека для построения графиков. Работает «из коробки», в отличие от D3, где требуется больше ручной работы.

🟢 Three.js

Библиотека для работы с 3D-графикой в браузере через WebGL. Используется для игр, VR/AR и интерактивных сцен.

🟢 Axios / Fetch API

Axios — популярная библиотека для HTTP-запросов. Сейчас чаще применяют встроенный fetch, но Axios остаётся востребованным благодаря поддержке интерцепторов, автоматической обработке JSON и отмене запросов.

Основные JS-фреймворки

  • React — библиотека для UI, часто используется как фреймворк. Компонентный подход, Virtual DOM, большая экосистема (Next.js, Redux и др.).
  • Angular — полнофункциональный MVC-фреймворк от Google. Использует TypeScript по умолчанию. Подходит для больших корпоративных приложений.
  • Vue.js — лёгкий и гибкий фреймворк, прост в изучении. Имеет экосистему (Vue Router, Pinia).
  • Svelte — компилирует код в чистый JavaScript без Virtual DOM. Лёгкий и быстрый.

Фреймворки поверх React/Vue

  • Next.js (React) — поддержка SSR и SSG, оптимизация для SEO, популярный выбор для крупных проектов.
  • Nuxt.js (Vue) — аналог Next.js, но для Vue. Автоматическая маршрутизация, SSR, SSG.
  • Remix (React) — акцент на серверный рендеринг и маршрутизацию.

Другие популярные фреймворки/библиотеки

  • Express.js — минималистичный серверный фреймворк для Node.js.
  • NestJS — серверный фреймворк для Node.js, вдохновлён Angular.
  • Electron.js — для создания десктопных приложений на базе JS/HTML/CSS (пример: VS Code).
  • React Native — кроссплатформенная разработка мобильных приложений.

Тенденции 2025

Фреймворк Популярность (2024–2025)
React 82 %
Vue.js 51 %
Angular 50 %
Svelte 26 %
Solid.js 9 %
  • Для визуализации активно используются D3.js, Three.js, Chart.js.
  • Для бэкенда на JavaScript/TypeScript лидирует NestJS.