Вы веб-разработчик и вам нужно создать сайт. Как вы должны построить один? Вы сразу начинаете писать статические файлы для немедленного обслуживания или начинаете настраивать среду проекта?

Во-первых, вы решили использовать фреймворк? Они сейчас в моде.

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

<script>
function newTodo() {
    const divBox = document.createElement("div")
    const input = document.createElement("input")
    input.type = "checkbox"
    
    const p = document.createElement("p")
    p.appendChild(document.createTextNode("Untitled todo"))
    
    divBox.appendChild(input)
    divBox.appendChild(p)
    
    document.getElementById("button-box").appendChild(divBox)
}
</script>
​
<div id="button-box">
    <div>
        <input type="checkbox" />
        <p>Do chores</p>
    </div>
    <button onclick="newTodo">New to-do</button>
</div>

…но как тогда сделать всю систему интерактивной? Как вы можете удалять задачи, редактировать задачи или помечать их как выполненные? Вам придется использовать целую систему состояний, которая обновляет документ только для того, чтобы управлять простым приложением todo!

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

Например, в Vue.js вы можете сделать что-то вроде этого:

<script setup>
import { ref } from "vue";
    
const items = ref([
    { title: "Do chores", completed: false }
]);
​
function newButton() {
    items.push({ title: "Untitled to-do", completed: false );
}
               
function deleteButton(index) {
    items.splice(index, 1);
}
</script>
​
<template>
<div>
    <div v-for="(item, i) in items" :key="i">
        <input type="checkbox" @click="item.completed = !item.completed" />
        <p>{{ item.title }}</p>
        <button @click="deleteButton(i)">Delete</button>
    </div>
    <button @click="newButton()">New to-do</button>
</div>
</template>

Этот короткий фрагмент дает понять разработчику, что именно происходит, и делает гораздо больше, чем чистая версия выше. Он может не только добавлять новые задачи, но и удалять их и отмечать! За счет небольшого изучения синтаксиса вы можете заставить фреймворк делать большую часть тяжелой работы за вас.

В этом примере вы говорите Vue, что хотите div для каждого элемента в вашем массиве с флажком, абзацем и кнопкой. Всякий раз, когда вы добавляете или удаляете элемент в этот массив, Vue отвечает за то, чтобы ваш веб-сайт соответствовал обновленному массиву, поэтому вам не нужно возиться с документом.

Компоненты

Работа с файлами с сотнями строк никогда не доставляла удовольствия. Поскольку HTML может быть отправлен только в одном файле, это означает, что сложные клиентские приложения, как правило, имеют слишком много строк для правильного чтения и понимания, если они не используют фреймворк.

И снова на помощь приходят фреймворки! Большинство из них имеют компонентную модель, которая позволяет повторно использовать большой объем кода, облегчая его чтение.

Например, еще раз в Vue:

<template>
<div>
    <p>Hello</p>
    <p>This is going to be used a lot!</p>
</div>
</template>
<script setup>
import UsedALot from "UsedALot.vue";
</script>
​
<template>
  <UsedALot />
  <UsedALot />
  <UsedALot />
</template>

Такое разделение логики позволяет вашему мозгу сосредоточиться на конкретных фрагментах кода, чтобы его было легче читать и понимать.

Веб-фреймворки предлагают множество преимуществ по сравнению с написанием в более императивном стиле. Однако за их абстракции приходится платить — дополнительные минимум 16 КБ в JavaScript должны быть получены с вашего сервера, что может увеличить затраты на пропускную способность и замедлить работу вашего сайта.

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