Обзор веб-фреймворков

Разбираемся, что же такое фреймворк.

Веб-фреймворк — это каркас для написания веб-приложений. Он определяет структуру, задаёт правила и предоставляет необходимый набор инструментов для разработки.

​

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

Типы веб-фреймворков

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

Соответственно:

• Бэкенд-фреймворки
• Фронтенд-фреймворки
• Фуллстек-фреймворки

​

Бэкенд-фреймворки

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

• Django, Flask — Python;
• Symfony, Laravel — PHP;
• Express.js — JavaScript (NodeJS);
• Ruby on Rails — Ruby;
• MVC ASP.NET Framework - .NET;
• Spring – Java;

​

Зачем использовать фреймворки?

Можно написать требуемый исходный код с нуля. 

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

Зачем использовать фреймворки?

Использование фреймворков. 

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

Фронтенд-фреймворки

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

• Angular;
• Vue.js;
• Svelte;
• React — формально это не фреймворк, а библиотека, но значение этого инструмента так велико, что его постоянно сравнивают с другими веб-фреймворками.

Фуллстек-фреймворки

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

К фуллстек также относятся фреймворки Next.js и Nuxt. Первый создан поверх React.js, а второй работает на базе Vue.js. Такие веб-фреймворки могут быть сложными для начинающих.

​

Фуллстек-фреймворки

Фреймворки и микрофреймворки

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

Примеры использования микрофреймворков

Например, если ваше приложение основано на Django и вам нужны веб-сокеты, то вы можете воспользоваться микрофреймворком aiohttp. Другой пример: если ваше приложение не очень большое и вам нужна только простая маршрутизация URL и шаблоны с несложным контекстом, вы можете использовать Flask с Jinja2 (или другим шаблонизатором) вместо Django.

Архитектура веб-фреймворков

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

Архитектура веб-фреймворков

Типичной для большинства веб-фреймвороков моделью разделения слоёв будет являться модель MVC.

• Контроллер содержит логику и преобразует входные данные� в модели, обрабатывает их и отдаёт представления.
• Модель содержит все данные и �бизнес-правила приложения
• Представление отвечает за �визуальное отображение данных.

​

Особенности веб-фреймворков

Теперь давайте посмотрим на некоторые общие особенности, которые делают фреймворки для веб-приложений многофункциональными и удобными на практике.

Система веб-шаблонов — набор разных методологий и программного обеспечения, реализованных для создания и развёртывания веб-страниц. Для обработки веб-шаблонов используются шаблонизаторы. Они обычно являются одним из основных инструментов фреймворка, отвечающим за веб-публикацию.

Особенности веб-фреймворков

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

Особенности веб-фреймворков

Маршрутизация.

Пользователь должен видеть, где он находится в приложении в любой момент времени. А видит он свое текущее местоположение в адресной строке браузера. Следовательно приложение должно уметь сопоставлять определённый URL с соответствующей ему страницей. То есть, если мы введём в адресную строку например https://health-imperium.com/appointmens, то приложение должно направить нас на страницу списка приёмов, но не на какую-либо другую.

Особенности веб-фреймворков

Маршрутизация.

Если говорить коротко, то способность обработки событий, когда пользователь кликает на стрелку "Назад" в браузере, либо на какой-либо пункт в меню в браузере и перенаправление вас на необходимую страницу и есть маршрутизация.

Особенности веб-фреймворков

Реактивность.

Например, у Вас есть какие-то данные, которые выводятся в окно браузера (на страницу). При любых манипуляциях с данными приложение отслеживает все действия с ними и изменения, сравнивает их с тем что “отрисовано” в браузере и производит необходимые изменения в отрисованной части для полного соответствия текста в браузере и данных в исходном коде. И все это происходит без перезагрузки страницы.

Большая пятёрка

React

В JavaScript-мире React — это, определённо, лидер. В этой библиотеке используются идеи реактивного программирования, она вводит во фронтенд-разработку и множество собственных концепций.�Для того чтобы гибко использовать React в разработке веб-проектов, нужно изучить множество дополнительных инструментов. Вот, например, далеко не исчерпывающий список подобных инструментов, представленный библиотеками, которые можно использовать совместно с React. Это — Redux, MobX, Fluxy, Fluxible, RefluxJS. В React-разработке, кроме того, можно использовать jQuery AJAX, Superagent, Axios и Fetch API.

React

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

React-приложения состоят из компонентов, которые содержат логику работы приложения и HTML-разметку для формирования интерфейса. Для того чтобы улучшить взаимодействие между компонентами, разработчик может воспользоваться Flux или похожей JavaScript-библиотекой.

React

В React-программировании используются такие понятия как состояние (state) и свойства (props) компонента. Они представлены соответствующими объектами. Их использование позволяет организовать хранение данных в компоненте и обмен данными между компонентами. Например — передачу данных из программной логики, реализуемой компонентом, в интерфейс приложения, или передачу данных от родительских компонентов дочерним компонентам

Элементы экосистемы React

• Сама библиотека React и React Router — средство для управления маршрутами в приложении.
• Пакет react-dom, предназначенный для работы с DOM.
• Инструменты разработчика React для браузеров Firefox и Chrome.
• JSX — язык разметки, который позволяет описывать HTML-элементы в JavaScript-коде.
• Средство командной строки create-react-app, которое предназначено для создания шаблонных React-проектов.
• Различные вспомогательные библиотеки. Среди них, например, можно отметить библиотеку Redux, используемую для управления состоянием приложений, и библиотеку Axios, используемую для обмена данными с серверными API.

Angular

Современный Angular — это продвинутый модульный фреймворк для фронтенд-разработки. Раньше для подключения Angular к странице достаточно было просто добавить в её HTML-код соответствующий тег, теперь же разработчик может импортировать в свой проект необходимые ему модули Angular.��Angular известен своей гибкостью. Именно поэтому всё ещё актуальны версии Angular 1.x. Однако многие разработчики в наши дни пользуются Angular 2+ из-за MVC-архитектуры фреймворка, которая значительно изменилась в сторону архитектуры, основанной на компонентах.

Angular

Тому, кто хочет пользоваться Angular, придётся, при освоении этого фреймворка, столкнуться с некоторыми трудностями. Так, для создания Angular-приложений практически обязательно использовать TypeScript. Хотя это и усложняет работу с Angular, у такого положения дел есть свои плюсы. В частности, это повышает надёжность приложений за счёт продвинутого контроля типов, это даёт программисту дополнительные средства разработки.

Angular

Angular — это полноценный JS-фреймворк, дающий современному веб-программисту всё необходимое для продуктивной работы. �На Angular стоит обратить внимание тем, кому хотелось бы получить в своё распоряжение обширный набор стандартных средств и свести к минимуму использование сторонних библиотек.

​

Части экосистемы Angular представлены на следующем слайде

Элементы экосистемы Angular

• Библиотека Zone.js, которая позволяет управлять контекстами выполнения кода.
• Язык TypeScript для более строгой типизации.
• Обмен данными в Angular-приложениях можно организовать с использованием RxJS и наблюдаемых (Observable) объектов.
• Angular Augury — средство для отладки Angular-приложений.
• Технология Angular Universal, предназначенная для организации серверного рендеринга Angular-приложений.

Vue

Идеи, лежащие в основе Vue, позаимствованы из Angular и React, но Vue, во многих отношениях, лучше этих двух инструментов фронтенд-разработки.

​

При работе с Vue логика компонента, его макет и стили хранятся в одном файле. Так же, за исключением стилей, материалы проектов хранятся и в React. Взаимодействие компонентов в Vue обеспечивается с помощью объектов, хранящих свойства и состояние компонентов. Этот подход тоже, ещё до того, как он появился в Vue, был использован в React.

Vue vs Angular

Vue, что роднит его с Angular, позволяет смешивать HTML-разметку и JavaScript-код.

Для того чтобы интегрировать данные компонента в шаблон, нужно использовать директивы Vue. Такие, как v-bind или v-if.

Если вы пытаетесь сделать выбор между Vue и Angular, то причины, по которым можно предпочесть Vue, можно свести к тому, что Angular, в сравнении с Vue, выглядит переусложнённым крупномасштабным проектом, в природе которого заложено стремление ограничивать разработчика. Vue же гораздо проще чем Angular и не так сильно ограничивает программистов.�Ещё одно преимущество Vue перед Angular и React заключается в том, что для работы с этим фреймворком не придётся учить TypeScript.

​

Vue vs React

Одна из причин, по которой Vue стоит рассматривать как достойную альтернативу React, заключается в том, как здесь организовано управление состоянием приложения. В React-проектах, при использовании связки React+Redux, по мере роста размеров приложения усложняются и процедуры, необходимые для управления его состоянием. Это может свестись к тому, что программисту, вместо работы над самим приложением, приходится тратить немало времени на настройку механизмов Redux. В Vue для управления состоянием используется библиотека Vuex. Она похожа на Flux и создана специально для Vue. �Работать с ней гораздо удобнее, чем с Redux.

Элементы экосистемы Vue

• Для управления состоянием Vue-приложений используется библиотека Vuex, в основу которой положены концепции, родственные Flux.
• Существуют инструменты разработчика для Chrome и Firefox, облегчающие создание Vue-проектов.
• В экосистеме Vue имеется загрузчик vue-loader для webpack, позволяющий использовать компоненты Vue в формате однофайловых компонентов.
• Для работы с серверными API можно воспользоваться HTTP-клиентом vue-resource и библиотекой Axios.
• Vue поддерживает фреймворк Nuxt.js, в возможности которого входит поддержка приложений, которые рендерятся на сервере. Nuxt.js можно считать конкурентом Angular Universal.

Ember

Ember похож на Backbone и Angular. Это, кроме того, один из старейших JavaScript-фреймворков. Но, несмотря на это, он, в плане возможностей, не отстаёт от своих более молодых конкурентов. Например, он поддерживает технологию отслеживаемых изменений свойств, которая упрощает наблюдение за изменениями состояния приложения и облегчает визуализацию этих изменений.

Ember

• Ember обладает довольно-таки замысловатой архитектурой, которая позволяет быстро создавать огромные клиентские приложения. В нём реализованы типичные MVC-идеи. Ember-приложения строятся из адаптеров, компонентов, контроллеров, вспомогательных объектов, моделей, маршрутов, сервисов, шаблонов, утилит, дополнений.�

Элементы экосистемы Ember

• Ember CLI — инструмент командной строки для быстрого прототипирования приложений и для управления зависимостями.
• Стандартный сервер разработчика Ember.
• Ember Data — библиотека для работы с данными.
• Handlebars — движок шаблонов, использующийся в Ember-приложениях.
• QUnit — фреймворк для тестирования Ember-проектов.
• Ember Inspector — инструменты разработчика для Chrome и Firefox.
• Ember Observer — каталог дополнений для Ember CLI.

Backbone.js

Backbone — это JavaScript-фреймворк, основанный на архитектуре, подобной MVC. Скажем, то, что в MVC называется «контроллером» (Controller) в Backbone называется «представлением» (View). Представления Backbone могут использовать различные системы шаблонизации. Например — Mustache, Handlebars, jQuery-tmpl. В Backbone-проектах можно использовать и сторонние библиотеки. Надо отметить, что единственной жёсткой зависимостью Backbone является библиотека Underscore.js.

Backbone.js

Backbone — это лёгкий в использовании фреймворк, который позволяет быстро разрабатывать одностраничные приложения. Среди вспомогательных средств, используемых совместно с Backbone.js, можно отметить такие, как Chaplin, Marionette, Thorax.

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

Элементы экосистемы Backbone

• Библиотека Backbone включает в себя события, модели, коллекции, представления и маршрутизатор.
• Библиотека Underscore.js, от которой зависит Backbone, содержит набор вспомогательных функций, которые помогают писать кросс-браузерный JS-код.
• При разработке Backbone-приложений можно использовать различные системы шаблонизации.
• Средство командной строки Backbone CLI упрощает разработку приложений.
• Библиотеки Marionette, Thorax и Chaplin помогают создавать приложения, отличающиеся особыми архитектурными решениями.

Спасибо за внимание :)