Веб-фреймворки

Веб-фреймворки представляют собой удобные инструменты для создания сложных веб-структур – сайтов, одностраничных приложений (Single Page Application(SPA)), микросервисов и т.д. К основным преимуществам веб-фреймворков можно отнести удобную модель управления бизнес логикой сложных приложений, стандартизацию структуры проектов, с учётом заложенных в модели разработки общепринятых норм, большое количество оптимизированного экосистемного программного обеспечения и многое другое. Кроме того, стандартизация процесса разработки на базе фреймворка, упрощает поддержку проектов для опытных разработчиков, и позволяет «новичкам» быстрее освоиться. Крупным компаниям с долгосрочными, высоконагруженными проектами выгоднее использовать именно фреймворки, однако, надо понимать, что простые приложения, всё же, легче и удобнее реализовывать на чистых языках программирования, например, JavaScript.

React

Начнём наш обзор с React, так как он явно выделяется на фоне остальных, хотя бы тем, что по-прежнему официально позиционируется как библиотека, а не как веб-фреймворк.

React представляет собой JavaScript библиотеку (далее по тексту условимся наравне использовать термин фреймворк) с открытым исходным кодом.

React был создан в 2011 году компанией Facebook. Официальным «отцом-разработчиком» является Джордан Валке. В мае 2013 года был открыт исходный код библиотеки. На данный момент (декабрь 2020), актуальная версия React – 17.0.1.

В феврале 2015 года был представлен React Native - инструмент для разработки на основе синтаксиса React нативных решений для Android, iOS и UWP-приложений, который на данный момент является самым популярным среди аналогичных вариантов (NativeScript от Angular или Weex от Vue). Исходный код React Native был открыт в марте 2015 года.

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

Говоря о циркуляции данных в приложении, стоит отметить такие концепции как Two Way Binding, использующуюся в Angular, V-model из Vue или аналогичные удобные директивы, из других фреймворков, позволяющие реализовать двунаправленный поток данных. В React же основной концепцией циркуляции данных является FLUX-концепция, заключающаяся в однонаправленном потоке между UI (User Interface), BL (Bisines Logic) и их компонентами. FLUX-концепция относительно сложна в плане реализации и требует написания большого количества кода, однако обладает определёнными преимуществами с точки зрения производительности и безопасности.

В основе синтаксиса React лежит разметка JSX (или TSX), представляющая собой некоторую совокупность HTML и JavaScript (JS) или HTML и TypeScript (TS) кода соответственно. Также, есть возможность писать на чистом JavaScript или TypeScript.

Касаемо скорости работы, следует упомянуть использование в React технологии Virtual DOM (Virtual Document Object Model), позволяющей получить преимущество относительно классической DOM, использующейся в Angular.

Говоря об актуальности, React выгодно использовать при написании крупного, сложного приложения с большим количеством динамических взаимодействий, где требуется серьёзная оптимизация. Например, SPA с многочисленными сокетами, iframe’ами и т.д.

Как уже было сказано, гибкость React обеспечивается наличием большого количества подходов для создания и структурирования проектов. Например, модель передачи данных может быть различной. Есть возможность передачи данных напрямую, с использованием «props» или с помощью подключения сторонних библиотек, таких как Redux, MobX и т.д.

Также в React присутствует возможность использования Context’а и реализована полная поддержка TypeScript, получающего в последнее время всё большую популярность. Введённые в версии 16.8.0 «хуки» (hooks), позволяют функциональным компонентам использовать состояния и другие возможности, не прибегая к использованию классов. Стоит отметить, что сами разработчики React, в лице Facebook, в последнее время активно продвигают функциональное программирование, акцентируя на его простоте и относительной доступности для начинающих. Однако, компонентный подход также можно использовать, что является дополнительной монетой в копилку гибкости React.

Что касается разработки для мобильных платформ - React Native является общепризнанным лидером среди конкурентов в данной области (NativeScript от Angular и Weex от Vue) и, вероятно, не сдаст позиций в будущем.

Как было отмечено ранее, несомненным плюсом использования React является поддержка данного Фреймворка IT-гигантом в лице Facebook, что уменьшает риски для крупных компаний и позволяет реализовывать долгосрочные масштабируемые проекты на базе React без опасения прекращения развития технологии. Кроме того, данная библиотека используется огромным сообществом разработчиков, и, соответственно, имеет множество обучающих материалов в открытом доступе и готовых «решений» для разного рода проблем, возникающих при разработке.

Angular

Angular, в отличии от React, официально позиционируется как фреймворк с открытым исходным кодом, а языком для разработки на нём служит TypeScript (стоит упомянуть,что и сам Angular, начиная с версии 2, написан на TypeScript). Это позволяет достичь высокого комфорта в работе для опытных разработчиков, однако вызывает большие трудности у начинающих. Именно поэтому Angular признан самым сложным в освоении фреймворком, среди рассматриваемых в этой статье.

История Angular начинается в 2009 году c создания AngularJS Мишко Хевери и Адамом Абронсом, однако, уместнее будет обратить внимание на Angular, начиная с версии 2, выпущенной 15 сентября 2016 года, и полностью написанной на TypeScript. За разработку и развитие Angular отвечает команда разработчиков из небезызвестного IT-гиганта Google, что является несомненным плюсом и гарантирует поддержку и развитие фреймворка в будущем. На данный момент (декабрь 2020), актуальная версия фреймворка - Angular 11, выпущенная в ноябре 2020.

Основной разработки на Angular является классово-модульный подход и использование готовых встроенных решений для масштабирования, тестирования и оптимизации приложений. У Angular очень строгая структура проектов, в отличии, например, от React, а благодаря статической типизации TypeScript, разработчик уже на этапе разработки избавляется от многих ошибок, допустимых на ранних этапах в JavaScript-фреймворках.

Жёсткая структурированность приложений на Angular вынуждает разработчиков, как новичков, так и опытных, следовать определённым паттернам, при разработке, что благоприятно сказывается на переключении между проектами. Достигается, своего рода, универсальность для всего и вся. Однако, у этой медали есть и обратная сторона. Действительно опытный программист, порой, оказывается ограничен в инструментах для углубления и оптимизации на низких уровнях. По части циркуляции данных, в Angular используется концепция Two Way Binding, позволяющая данным циркулировать двунаправлено.

Ещё одним плюсом Angular относительно конкурентов является его, так называемая, «коробочность». Суть данного свойства заключается в том, что Angular самодостаточен, при разработке на нём нет необходимости в обращении к сторонним инструментам (например, плагинам для работы с сервером, валидации и т. д). Всё уже идёт «из коробки» (отсюда и термин «коробочность»). Разработчику достаточно установить фреймфорк – и он получает полноценный инструмент для практически любых задач.

Однако, подход «всё включено» обладает недостатком (хоть и не критичным) в виде большого размера фреймворка относительно конкурентов. Так, например, при создании небольшого сайта, разработчику не требуется широкий функционал, по умолчанию присутствующий во-фреймворке, однако приходится устанавливать весь пакет. Также, к минусам Angular можно отнести, как было упомянуто ранее, высокий порог входа для новичков и малое количество обучающих материалов в свободном доступе.

Это уже достаточно серьёзная проблема. Например, для программирования на Vue или React новичку достаточно знать JavaScript и некоторые концепты, присущие данным фреймворкам. В случае же с Angular, необходимо понимать TypeScript и знать библиотеку RxJS, которые, в действительности являются очень удобными инструментами, но, вносят дополнительный уровень абстракции для начинающих. Ещё одним недостатком Angular является использование в нём модели DOM, которая является более медленной в сравнении с Virtual DOM, использующейся в React и Vue. Однако и здесь инженеры из Google сделали ряд оптимизаций (например, DOM-манипуляции отделены от логики приложения, что улучшает тестируемость кода).

Говоря об актуальности, Angular хорошо подходит для написания средних и крупных приложений, в первую очередь благодаря своей «коробочности» и удобности для опытных разработчиков, а также, в силу строгой структурированности проектов и статической типизации TypeScript.

Что касается мобильных платформ, NativeScript от Angular не получил особой популярности среди разработчиков, и очень сильно уступает React Native.

Vue

VueJS – прогрессивный JavaScript фреймворк с открытым исходным кодом, который может использоваться и как библиотека.

Первая версия Vue появилась в октябре 2015 года. «Отцом разработчиком» проекта является Эван Ю (Evan You), бывший сотрудник компании Google. В сентябре 2016 года была выпущена версия 2.0, привнёсшая возможность рендеринга на стороне сервера (SSR – Server Side Rendering). В сентябре 2020 года произошёл релиз версии 3.0, актуальной на данный момент (декабрь 2020) и обладающей рядом серьёзных оптимизаций и улучшений, в числе которых практически полное переписывание Vue на TypeScript (96,8%), и возможность использования TypeScript при разработке приложений, введение API-composition и многое другое.

На протяжении большего количества времени существования, рассматриваемый фреймворк поддерживался лишь одним разработчиком, уже упомянутым Эваном Ю, что сильно снижало интерес больших компаний ко Vue, так как не давало гарантий стабильной поддержки и развития технологии. Однако, в последнее время, над фреймворком трудится уже команда разработчиков из различных компаний (Netlify, Netguru, Baidu, Livestorm) и его популярность растёт.

Основным плюсом Vue является его простота в плане освоения и эффективного использования. То есть, даже обладая минимальными знаниями, можно создавать многое, а на изучение фреймворка уходит буквально 2-3 дня. Конечно, в последней версии (3.0) появилось много нового, однако Vue по-прежнему остаётся самым простым в освоении фреймворком относительно «старших братьев» в лице React и Angular.

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

К очередному достоинству можно отнести высокую производительность за счёт использования модели Virtual DOM, поддержка которой была полностью переработана во Vue 3.0, что позволило достичь ещё большей скорости работы даже в сравнении с React, аналогично использующим Virtual DOM.

В Vue, как и в React, существует возможность использования сторонних библиотек управления состоянием приложения, например, Redux.

Одно из серьёзных улучшений версии 3.0 – введение нового API, а именно, API – Composition (аналог хуков React), представляющего собой новый синтаксис, который позволяет использовать функции для реализации кода с ориентацией на реализуемые им возможности, а не на объекты. По части циркуляции данных, во Vue используется концепция двунаправленности, так называемая V-model (аналог Two Way Binding от Angular).

Для мобильной разработки на Vue существует Weex – кроссплатформенный UI-фреймворк, созданный Alibaba Group и инкубированный Apache Software Foundation (ASF). Также, в арсенале Vue имеется NativeScript-Vue – ещё один вариант для создания нативных приложений. Однако по части популярности среди разработчиков, ни одно из представленных решений не способно соревноваться с React Native, по-прежнему использующимся в, порядка, 70% случаев.

В последнее время Vue получает всё больше внимания со-стороны разработчиков, коммунити растёт огромными темпами. Появляется много готовых «решений», обучающих материалов и т.д. Однако, команда разработчиков, стоящая за данным фреймворком, по-прежнему не может сравниться в плане «мощностей» ни с Google (Angular), ни с Facebook (React), что является негативным фактором, при выборе компаниями технологии реализации крупных бизнес-проектов.

В плане актуальности, Vue всегда носил статус «народного» фреймворка на котором принято реализовывать небольшие и средние приложения. Теперь же, с выходом версии Vue 3.0, данный фреймворк всё чаще используется в крупных проектах, имеет серьёзные перспективы, и, скорее всего, в недалёком будущем будет способен составить достойную конкуренцию React и Angular.

Заключение

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