Нужны ли фронтендеру алгоритмы и паттерны проектирования?

На самом деле, наверняка вы уже их используете, но можете ещё лучше.

Многих пугает слово алгоритм, кажется, что это что-то сложное, но на деле это просто законченный набор инструкций. Получается, что вы используете алгоритмы и в обычной жизни, например, когда готовите по рецепту, или добираетесь по навигатору из точки А в точку Б, или решаете квадратное уравнение.

Когда разработчики говорят об алгоритмах, они имеют ввиду не все алгоритмы, а только популярные решения стандартных задач. Многие алгоритмы были придуманы ещё до компьютеров: например, алгоритм поразрядной сортировки был запатентован в девятнадцатом веке в США для обработки данных, полученных после переписи населения.

Для решения одной и той же задачи могут подходить разные алгоритмы. Представьте, у вас есть список, в котором нужно найти элемент. Предположим, что это список товаров в интернет-магазине и пользователь вводит в фильтр название товара, которое начинается с буквы «Е». Как это сделать?

Если список отсортирован по алфавиту, вам подходит двоичный поиск — вы смотрите в середину списка, находите там товар, название которого начинается например, на «К». Список отсортирован, поэтому вы точно знаете что нужный вам товар находится в левой от вас части списка, потому что «Е» в алфавите стоит раньше, чем «К». Теперь вы берете левую часть списка и повторяете ту же процедуру с ней.

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

Выбирать алгоритм нужно под задачу. Поймите с какими данными вы работаете и отталкивайтесь от этого. Существуют алгоритмы для работы со списками, массивами, деревьями и так далее. Чтобы выбрать алгоритм нужно понимать не только его плюсы, но и минусы: они тоже хорошо известны и описаны. Например, есть сайт, который помогает вам выбрать правильный алгоритм сортировки, наглядно показывая сравнение работы разных алгоритмов на разных списках.

Теперь поговорим о паттернах проектирования. Паттерны — это просто устойчивые конструкции в программировании. Все программисты в мире решают более-менее похожие задачи и для решения этих задач уже выработаны популярные решения. Есть известная книга на эту тему — книга «Банды четырёх», которая так и называется «Design Patterns». Ещё есть две отличные книги от Эдди Османи:

• Паттерны проектирования JavaScript
• Паттерны для масштабируемых JavaScript-приложений

Паттерны помогают сэкономить время на организации кода и сосредоточиться на решении задачи. Есть паттерны, которые говорят вам как правильно написать какие-то отдельные решения в коде, например паттерн «перечисление»; есть паттерны, которые описывают как лучше разделить код приложения по папкам и что писать в конкретных файлах, например паттерн MVC и его родственники MVP и MVVM; а есть паттерны, которые рассказывают как между собой должны общаться разные модули, например паттерн «инверсия контроля».

Может показаться, что для того, чтобы применять паттерны, нужно очень глубоко понимать программирование и работать над сложными задачами, но на деле это не всегда так: часто разработчики используют паттерны, даже не подозревая об этом, потому что некоторые паттерны встроены прямо в языки программирования.

Представьте, что у вас на сайте есть кнопка, на которую нажимает пользователь. И есть алгоритм, который вы хотите запустить, когда пользователь нажимает на эту кнопку. Чтобы связать их между собой используется «обработчик событий» — реализация паттерна «наблюдатель», которая заложена в JavaScript прямо на уровне языка.

var firstModule = function() {
  console.log('Hi');
};

button.onclick = function(e) {
  firstModule();
};

Так нужно ли фронтендеру изучать алгоритмы и паттерны? Да, вы всё равно сталкиваетесь с ними в своей работе каждый день и если вы делать это осознанно, то сможете решать свои задачи эффективней.

Видеоверсия

Вопросы можно задавать здесь.