🎯 Зачем спрашивают
- Проверить, понимает ли кандидат базовое различие архитектурных подходов
- Убедиться, что он умеет объяснять простыми словами фундаментальные термины
- Посмотреть, способен ли кандидат рассуждать не только «что это такое», но и понимает ли про границы применения
📝 Ответ
Коротко:
Библиотека — это инструмент, решающий одну конкретную задачу; это кирпичик в общей стене. Примеры: react, jquery, lodash.
Фреймворк — это целый комбайн со своими встроенными инструментами, то есть это коробочное решение со своими ограничениями, за рамки которых выйти либо невозможно, либо трудно.
Пример: Angular, Vue*
ㅤ | Библиотека | Фреймворк |
Экосистема | Экосистема строится сообществом, вы сами выбираете стек | Предоставляет коробочные решения для типовых задач: роутинг, state managment, cache |
Контроль потока программы | Вы сами вызываете методы библиотеки, контролируя поток программы. | Управляет вашим кодом (inversion of control). |
Подробнее:
Разберем на примере React и сравним его с другими инструментами. В документации самого React четко написано, что React — библиотека.
Библиотека — утилита/функция/набор компонентов для решения конкретной задачи (класса проблем). API библиотеки вы вызываете сами, контролируя поток программы.
Сама задача может быть комплексной, например, рендеринг и его оптимизация. React отвечает за декларативное описание UI и его рендеринг. Всё остальное решается внешними библиотеками.
Возьмем другой приме — Lodash. Главная идея библиотеки — предоставить разработчику готовый набор самых востребованных функций в одном инструменте. Функции совершенно разные, но объединяющая их цель — одна.
Фреймворк — это набор правил, ограничений в структуре, архитектуре, в подходе написания кода и, соответственно, со своим шаблоном, как правило. Так же фреймворки предоставляют множество коробочных решений.
Экосистема
Если вы начнете приложение на Vue или Angular, то все необходимые модули для решения типовых (роутинг, state managment, кэш) задач у вас уже будут из коробки.
У React экосистема огромна. Но чаще всего авторами библиотек из этой экосистемы являются члены сообщества, а не разработчики самого React.
Ограничения
Во Vue и Angular есть свои архитектурные/структурные ограничения, за рамки которых вы выйти не можете.
Пример
Например, в Angular используются декораторы, файлы именуются определенном образом (.component.ts, .service.ts). Так же Angular разрабатывался с прицелом на использование TypeScript (да, без него писать теоретически возможно, но потребуется возня со сборкой).
React же более гибкий. React приложения могут выглядеть по-разному, кардинально отличаясь друг от друга по структуре и архитектуре.
Разумеется не без свистоплясок, гвоздей, и изоленты, но это возможно.
⚖️ Компромиссы
ㅤ | ✅ Плюсы | ❌ Минусы |
Фреймворк | быстрый старт, единообразие, меньше решений нужно принимать принимать | меньше гибкости, сложнее выйти за рамки. |
Библиотека | гибкость, можно собрать под себя | больше решений на вас, выше риск «зоопарка технологий» |
🔎 Встречные вопросы
- Какие плюсы/минусы в корпоративной разработке: фреймворк vs библиотека? Когда стоит выбрать фреймворк, а когда библиотеку?
- Что такое progressive framework?
🚩 Красные флаги
- React — это фреймворк
- Нет разницы, всё одно и то же
- Фреймворк всегда лучше, чем библиотека (или наоборот)
🛠 Практика
📚 Источники / ссылки
- Library vs Framework, Martin Fowler