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

Курсы

Программирование
PHP Developer. Basic
-50%
Специализация PHP Developer iOS Developer. Professional Golang Developer. Professional Python Developer. Basic iOS Developer. Basic Архитектура и шаблоны проектирования MS SQL Server Developer Highload Architect Специализация C++ Developer Cloud Solution Architecture Специализация Java-разработчик Android Developer. Professional Программист С Специализация Fullstack developer VR/AR - разработчик Microservice Architecture Software Architect Team Lead Web-разработчик на Python Rust Developer NoSQL C# Developer. Professional Разработчик программных роботов (RPA) на базе UiPath и PIX Kotlin Backend Developer React.js Developer Node.js Developer Flutter Mobile Developer Symfony Framework C# Developer. Basic Unreal Engine Game Developer Groovy 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 комментариев
Для комментирования необходимо авторизоваться