0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: dom, javascript, frontend, react, vue, фронтенд, typescript, js, fetch, superagent, axios, jquery, jquery 3+, zepto.js, lodash</p>
1
<p>Теги: dom, javascript, frontend, react, vue, фронтенд, typescript, js, fetch, superagent, axios, jquery, jquery 3+, zepto.js, lodash</p>
2
<p>Однажды я открыл веб-студию и чуть не прогорел. Я уже неплохо знал React и Node.js, но другие фрилансеры всегда были на шаг впереди меня - они делали то же самое, но быстрее и дешевле.<strong>Первое правило коммерческой разработки</strong>- выбирай подходящий инструмент для задачи.</p>
2
<p>Однажды я открыл веб-студию и чуть не прогорел. Я уже неплохо знал React и Node.js, но другие фрилансеры всегда были на шаг впереди меня - они делали то же самое, но быстрее и дешевле.<strong>Первое правило коммерческой разработки</strong>- выбирай подходящий инструмент для задачи.</p>
3
<p>Важно различать: - веб-приложение - клиент к системе для браузера, - старый добрый сайт - набор страниц с текстом, картинками и ссылками друг на друга.</p>
3
<p>Важно различать: - веб-приложение - клиент к системе для браузера, - старый добрый сайт - набор страниц с текстом, картинками и ссылками друг на друга.</p>
4
<p>Конечно, бывает ещё 1000 вариантов посередине. Надо сделать сайт? Выбрасывайте фреймворк!</p>
4
<p>Конечно, бывает ещё 1000 вариантов посередине. Надо сделать сайт? Выбрасывайте фреймворк!</p>
5
<h2>Серверный HTML</h2>
5
<h2>Серверный HTML</h2>
6
<p>Сделаем форму для отзывов. Как валидировать ввод? Какую библиотеку использовать для отправки данных на сервер -<strong>fetch</strong>,<strong>superagent</strong>, возможно,<strong>axios</strong>? Браузер уже умеет это сам:</p>
6
<p>Сделаем форму для отзывов. Как валидировать ввод? Какую библиотеку использовать для отправки данных на сервер -<strong>fetch</strong>,<strong>superagent</strong>, возможно,<strong>axios</strong>? Браузер уже умеет это сам:</p>
7
<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><h2>jQuery</h2>
7
<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><h2>jQuery</h2>
8
<p>Добавим немного интерактива на фронте - галерею фотографий, чтобы полистать.<strong>React</strong>?<strong>Vue</strong>?<strong>TypeScript</strong>? Рано! Если у приложения нет сложной бизнес-модели (не так уж и важно, на какое фото смотрит пользователь), не стесняйтесь, хватайте<strong>jQuery</strong>!</p>
8
<p>Добавим немного интерактива на фронте - галерею фотографий, чтобы полистать.<strong>React</strong>?<strong>Vue</strong>?<strong>TypeScript</strong>? Рано! Если у приложения нет сложной бизнес-модели (не так уж и важно, на какое фото смотрит пользователь), не стесняйтесь, хватайте<strong>jQuery</strong>!</p>
9
<p>jQuery-плагины очень стабильны, а их юзабилити оттачивалось 10 лет. Смотрите, как просто сделать галерею через<a>slick</a>:</p>
9
<p>jQuery-плагины очень стабильны, а их юзабилити оттачивалось 10 лет. Смотрите, как просто сделать галерею через<a>slick</a>:</p>
10
<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><p>Если в проекте нет требований по поддержке всех легаси-браузеров, смело берите<strong>jQuery 3+</strong>или даже<a>Zepto.js</a>.</p>
10
<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><p>Если в проекте нет требований по поддержке всех легаси-браузеров, смело берите<strong>jQuery 3+</strong>или даже<a>Zepto.js</a>.</p>
11
<h2>lodash-шаблоны</h2>
11
<h2>lodash-шаблоны</h2>
12
<p>Наконец, в ваш любимый lodash уже встроен шаблонизатор! Если вы хотите просто сгенерировать HTML по данным из API, то это делается так:</p>
12
<p>Наконец, в ваш любимый lodash уже встроен шаблонизатор! Если вы хотите просто сгенерировать HTML по данным из API, то это делается так:</p>
13
const userList = _.template(` <ul> <% _.forEach(users, function(user) { %> <li><%- user %></li> <% }); %> </ul>`); const mount = document.querySelector('.user-list'); mount.innerHtml = userList({ users: ['vlad', 'peter'], });<p>Кстати, первоначальный рендер таким образом получается быстрее, чем в любом фреймворке - сборкой<strong>DOM</strong>занимается сам браузер, а он хорош в этом. С другой стороны, есть 2 проблемы: обновлять элементы и приделывать хендлеры придётся руками.</p>
13
const userList = _.template(` <ul> <% _.forEach(users, function(user) { %> <li><%- user %></li> <% }); %> </ul>`); const mount = document.querySelector('.user-list'); mount.innerHtml = userList({ users: ['vlad', 'peter'], });<p>Кстати, первоначальный рендер таким образом получается быстрее, чем в любом фреймворке - сборкой<strong>DOM</strong>занимается сам браузер, а он хорош в этом. С другой стороны, есть 2 проблемы: обновлять элементы и приделывать хендлеры придётся руками.</p>
14
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
14
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
15
15