This content originally appeared on DEV Community and was authored by ryzhpolsos
В этом посте хотелось бы выразить своё мнение по поводу фреймворков, которые стали стандартом современного программирования.
В чём отличие фреймворка от библиотеки?
Если не вдаваться в детали и говорить простым человеческим языком, можно выразиться так: программист встраивает библиотеку в свой код, меняя лишь вызовы отдельных функций на библиотечные, тогда как фреймворк предполагает изменения самой концепции разработки.
Один из ярких и показательных примеров - библиотека jQuery и фреймворк React. Оба этих инструмента предназначены для написания фронтенда на JS/TS, поэтому их вполне можно сравнивать.
Для примера возьмём маленькую и лёгкую задачу - создать простейший кликер с одной кнопкой и счётчиком нажатий.
На нативном JS+HTML эта задача решается так (HTML и JS-код намеренно объединены в один листинг для удобства):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<span id="clickCount">0</span>
<button id="click">Click me</button>
<script>
const counter = document.querySelector('#clickCount');
const button = document.querySelector('#click');
let clicks = 0;
button.addEventListener('click', ()=>{
clicks++;
counter.textContent = clicks;
});
</script>
</body>
</html>
Предположим, что наш программист-кликатель захотел упростить себе жизнь и применить jQuery. Теперь его код выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="clickCount">0</span>
<button id="click">Click me</button>
<script>
const counter = $('#clickCount');
let clicks = 0;
$('#click').on('click', ()=>{
clicks++;
counter.text(clicks);
});
</script>
</body>
</html>
Добавилась строка с подключением библиотеки, изменились названия функций и методов для работы с DOM-деревом, но концепция сохранилась - сначала производится поиск элемента на странице, а потом с ним производятся какие-то действия - подписка на событие, изменение текста и т.д.
Если же нашему кликеролюбу захочется использовать React - его код будет выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [clickCount, setClickCount] = React.useState(0);
const handleClick = () => {
setClickCount(clickCount + 1);
};
return (
<div>
<span>{clickCount}</span>
<button onClick={handleClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Как видно, концепция разработки полностью изменилась, код стал выглядеть совсем иначе - теперь применяются компоненты, состояния и т.п.
Из этого примера можно сделать вывод - библиотеку легко встроить в существующий код, тогда как для программирования на фреймворке придётся переучиваться и менять методы разработки.
Но плохо ли это?
Для тренировки мозга новыми знаниями - нет. Для разработки - да, особенно, когда существует несколько разных фреймворков с разными подходами, миграция между которыми существующей кодовой базы превращается в боль и огромное количество рутинной работы. К тому же, из-за огромного распространения фреймворков начинающие программисты зачастую не умеют решать задачи без них и лепят их даже там, где можно обойтись легковесной библиотекой - особенно это заметно во фронтенде.
Что с этим делать?
Применять фреймворки только в тех случаях, когда их преимущества перевешивают недостатки - при разработке особо крупных проектов, а в остальных случаях обходиться набором библиотек.
This content originally appeared on DEV Community and was authored by ryzhpolsos
ryzhpolsos | Sciencx (2025-03-17T00:06:28+00:00) Проблема фреймворков. Retrieved from https://www.scien.cx/2025/03/17/%d0%bf%d1%80%d0%be%d0%b1%d0%bb%d0%b5%d0%bc%d0%b0-%d1%84%d1%80%d0%b5%d0%b9%d0%bc%d0%b2%d0%be%d1%80%d0%ba%d0%be%d0%b2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.