Иногда фреймворк не нужен

Однажды я открыл веб-студию и чуть не прогорел. Я уже неплохо знал React и Node.js, но другие фрилансеры всегда были на шаг впереди меня — они делали то же самое, но быстрее и дешевле. Первое правило коммерческой разработки — выбирай подходящий инструмент для задачи.

Важно различать: — веб-приложение — клиент к системе для браузера, — старый добрый сайт — набор страниц с текстом, картинками и ссылками друг на друга.

Конечно, бывает ещё 1000 вариантов посередине. Надо сделать сайт? Выбрасывайте фреймворк!

Серверный HTML

Сделаем форму для отзывов. Как валидировать ввод? Какую библиотеку использовать для отправки данных на сервер — fetch, superagent, возможно, axios? Браузер уже умеет это сам:

<form action="/feedback" method="POST" >
  <div>
    <label>Имя</label>
    <input name="name"></input>
  </div>
  <div>
    <label>Оценка</label>
    <input name="stars" type="number" min="0" max="5" value="3"></input>
  </div>
  <div>
    <label>e-mail</label>
    <input name="email" type="email"></input>
  </div>
</form>

jQuery

Добавим немного интерактива на фронте — галерею фотографий, чтобы полистать. React? Vue? TypeScript? Рано! Если у приложения нет сложной бизнес-модели (не так уж и важно, на какое фото смотрит пользователь), не стесняйтесь, хватайте jQuery!

jQuery-плагины очень стабильны, а их юзабилити оттачивалось 10 лет. Смотрите, как просто сделать галерею через slick:

<div class="gallery">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <img src="http://kenwheeler.github.io/slick/img/fonz2.png">
  <img src="http://kenwheeler.github.io/slick/img/fonz3.png">
</div>
<script>
  $('.fade').slick({ infinite: true });
</script>

Если в проекте нет требований по поддержке всех легаси-браузеров, смело берите jQuery 3+ или даже Zepto.js.

lodash-шаблоны

Наконец, в ваш любимый lodash уже встроен шаблонизатор! Если вы хотите просто сгенерировать HTML по данным из API, то это делается так:

const userList = _.template(`
<ul>
  <% _.forEach(users, function(user) { %>
    <li><%- user %></li>
  <% }); %>
</ul>`);

const mount = document.querySelector('.user-list');
mount.innerHtml = userList({ 
  users: ['vlad', 'peter'],
});

Кстати, первоначальный рендер таким образом получается быстрее, чем в любом фреймворке — сборкой DOM занимается сам браузер, а он хорош в этом. С другой стороны, есть 2 проблемы: обновлять элементы и приделывать хендлеры придётся руками.

Есть вопрос? Напишите в комментариях!