Иногда фреймворк не нужен | OTUS
⚡ Открываем подписку на курсы!
Проходите параллельно 3 онлайн-курса в месяц по цене одного.
Подробнее

Курсы

Программирование
iOS Разработчик. Продвинутый курс Программист 1С Реверс-инжиниринг. Продвинутый курс
-16%
Java Developer. Professional
-17%
JavaScript Developer. Professional
-18%
Flutter Mobile Developer
-15%
MS SQL Server Developer
-14%
Unity Game Developer. Basic
-19%
Супер - практикум по использованию и настройке GIT
-18%
Супер-интенсив "СУБД в высоконагруженных системах"
-18%
Web-разработчик на Python
-11%
Backend-разработчик на PHP
-8%
PostgreSQL
-10%
Базы данных
-19%
Android-разработчик. Базовый курс Разработчик Python. Продвинутый курс Разработчик на Spring Framework AWS для разработчиков Cloud Solution Architecture CI/CD Vue.js разработчик Разработчик Node.js Scala-разработчик Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

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

JS_Deep_4-5020-e2c992.10_site.png

Однажды я открыл веб-студию и чуть не прогорел. Я уже неплохо знал 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 проблемы: обновлять элементы и приделывать хендлеры придётся руками.

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

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться