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

Курсы

Программирование
iOS Developer. Basic
-23%
Python Developer. Professional
-13%
Разработчик на Spring Framework
-23%
Golang Developer. Professional
-17%
Python Developer. Basic
-16%
iOS Developer. Professional
-13%
Node.js Developer
-15%
Unity Game Developer. Professional
-11%
React.js Developer
-12%
Android Developer. Professional
-7%
Software Architect
-12%
C++ Developer. Professional
-8%
Разработчик C#
-8%
Backend-разработчик на PHP
-8%
Архитектура и шаблоны проектирования
-12%
Программист С Базы данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Agile Project Manager Нереляционные базы данных Супер - интенсив по паттернам проектирования Супер-практикум по использованию и настройке GIT IoT-разработчик Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-17%
DevOps практики и инструменты
-18%
Архитектор сетей
-21%
Инфраструктурная платформа на основе Kubernetes
-22%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив по управлению миграциями (DBVC)
-16%
Administrator Linux. Professional
-5%
Administrator Linux.Basic
-10%
Супер-интенсив «ELK»
-10%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться