Ко всем статьям

Как выбрать подходящий frontend-фреймворк для проекта

Нужен ли вашему проекту JS-фреймворк, и как сделать правильный выбор — разбираемся вместе с frontend-разработчиком Hawking Bros

Что такое фреймворк?

JavaScript прошел долгий путь от простого языка сценариев для добавления динамических и интерактивных элементов на веб-страницу, до развитого языка, используя который можно разработать полнофункциональное веб-приложение. Это произошло не без помощи дополнительных инструментов, таких как библиотеки и фреймворки. В рамках данной статьи мы понимаем под фреймворком четкую структуру правил, которых надо придерживаться при написании кода, а также набор инструментов “из коробки”.

Чтобы было проще, давайте проведем простую аналогию с постройкой дома. Вы вряд ли добьетесь успеха, не имея чертежей и правильно подобранных материалов. Именно такую структуру, чертеж, и представляет собой фреймворк.

Кроме того, они значительно ускоряют и оптимизируют разработку. Зачастую потребность использования их в проекте связана с масштабированием, добавлением интерактива или нового функционала.

Фреймворки, которые мы будем рассматривать в нашей статье, относятся к категории фронтенд-фреймворков, они работают непосредственно на стороне клиента. Из всего многообразия мы остановимся только на трех: React, VueJS, и Angular. Это обусловлено их популярностью, поддержкой, функционалом, а также личным опытом автора.

React

Первый на очереди — React. По сути, это эффективная и гибкая JS-библиотека для создания пользовательских интерфейсов, разработанная Facebook в 2013 году. Тем не менее, эту библиотеку часто относят к категории фреймворков и сравнивают с другими опенсорс-фреймворками.

Я познакомился с React, когда он еще не был так популярен в коммерческих проектах, и в нем были классовые компоненты. В начале моего пути я просто занимался поддержкой интернет-магазина, написанного на данном фреймворке, потом появились проекты, где я разрабатывал на React с нуля.

Из преимуществ я бы выделил:

  • Virtual DOM — “виртуальное” представление пользовательского интерфейса в оперативной памяти и синхронизация с настоящим DOM) — это дает улучшенную производительность на клиентской стороне, 
  • JSX — расширение JS синтаксиса, которое позволяет использовать HTML-подобный синтаксис для описания структуры интерфейса — устраняет необходимости изучать новый язык и делает порог входа ниже,
  • Композиция элементов — позволяет создавать более сложные функции из простых,
  • Отсутствие четких требований к написанию проекта — что также может стать минусом, если у специалистов недостаточно квалификации 

Резюмируя, этот фреймворк позволяет создавать быстрые, удобные, реактивные веб-приложения.

При изучении рекомендую обратить внимание в первую очередь на официальную документацию — сейчас на русском достаточно информации для самостоятельной работы.

Angular

Angular — популярный JS-фреймворк для энтерпрайза, который используется для разработки комплексных приложений. Это веб-фреймворк с открытым кодом, созданный Google. Используя Angular, можно создать высокопроизводительные и удобные для пользователей мобильные, десктопные, и веб-приложения.

Прежде всего, он нацелен на разработку SPA-решений (Single Page Application).

Angular использует специфичный для фреймворка вариантный язык JS под названием TypeScript, с которым вам также придется познакомиться при работе. Также при разработке необходимо четко придерживаться гайдлайнов.

В отличие от Vue и React, высокая скоростью рендеринга UI которых реализуется за счет использования Virtual DOM, Angular, наоборот, использует Incremental DOM, что больше подходит для мобильных девайсов.

Angular вышел далеко за рамки простого фреймворка; это целая платформа с разнообразными наборами инструментов и структурными особенностями, которые помогают разработчикам писать чистый код быстрее и проще.

Vue

Vue — прогрессивный фреймворк для создания пользовательских интерфейсов, экосистема библиотек, которая позволяет разработчикам создавать комплексные и надежные одностраничные приложения. Фактически, Vue представляет собой комбинацию Angular и React, потому что он использует такие концепции, как директивы и компоненты, для управления и визуализации пользовательских интерфейсов. Vue предоставляет возможность управлять HTML, уже сгенерированным сервером, чего, например, не умеет делать React.

Отличительной чертой Vue.js является его адаптируемость, интеграция в проекты, использование с другими библиотеками JavaScript. Он также поддерживает декларативную визуализацию с использованием синтаксиса шаблона для предоставления данных в DOM. 

Среди положительных моментов Vue отмечают низкий порог входа для разработчиков JS, синтаксис на основе HTML и возможность постепенного внедрения в проект. 

В плане архитектуры Vue балансирует между React и Angular, предлагая и официальный гайд, и пространство для маневра.

Для наглядности мы внесли в таблицу фреймворки и ключевые критерии сравнения:

  React Angular Vue

Архитектура

 

Свобода решений Жесткий стиль Рекомендации

Модель

 

Virtual DOM Incremental DOM Virtual DOM

Привязка данных

 

Односторонняя Двусторонняя Двусторонняя

Функциональность из коробки

 

Рендеринг UI

Роутинг,
state-manager,
валидация форм,
модуль интернационализации,
сервер-сайд рендеринг,
модуль тестирования

 

Роутинг, state-manager

Порог входа

 

Средний Высокий Низкий

Вывод

Очевидно, что выбор фреймворка зависит не только от его технических характеристик, но и от экспертизы команды и требований самого проекта. Для быстрого старта и при отсутствии экспертизы команды уместен Vue, Angular стоит выбрать при ориентации на максимальную аудиторию и наличии четких требований к проекту, а React подойдет для инновационных проектов с гибкой архитектурой. При правильном использовании JS-фреймворки могут стать полезным инструмент для экономии времени и структуризации вашего кода.