Что такое фреймворк в программировании
Перейти к содержимому

Что такое фреймворк в программировании

  • автор:

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

Поговорили с Александром Мищенко, тимлидом Нетологии, преподавателем и программистом, о том, что такое фреймворки. Объясняем термин, который часто ставит в тупик людей, только начинающих знакомиться с программированием.

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

Александр Мищенко

Тимлид направления «Контент и методология» в Нетологии

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

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

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

Какие бывают фреймворки

Если говорить о программировании, то фреймворков существует огромное количество. Есть веб-фреймворки, такие как Ruby on Rails, Django или FastAPI: предоставляют набор инструментов, библиотек и шаблонов для разработки веб-приложений. Они упрощают создание серверной части приложений и обеспечивают стандартизированный подход к разработке.

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

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

Как выглядит фреймворк

Фреймворк можно рассматривать как некую рамку или набор инструментов, которые применяются для выполнения определённой задачи. Чтобы получить представление о фреймворке, нужно обратиться к его документации, где описаны основы работы и порядок выполнения задач.

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

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

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

Как применяют фреймворки

У нас есть цель, к которой мы стремимся, и инструменты — фреймворки, которыми мы пользуемся. Давайте разберёмся, как используются фреймворки для достижения поставленной цели.

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

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

Представим, что вам нужно выбрать между Django и FastAPI для Python-разработки.

Django — это крупный фреймворк с большим набором функциональности. Django был очень популярен в конце 2000-х годов и в начале 2010-х, и он хорошо подходил для разработки веб-приложений, когда разработчику было необходимо создать сайт с нуля.

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

В чём отличие фреймворка от библиотеки

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

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

В программировании переиспользование кода является ключевым аспектом — с этим связано примерно 90% работы. Фреймворки и библиотеки помогают в этом. Библиотеки дают готовый код, а фреймворки структурируют готовые библиотеки.

Что такое фреймворккурс

Старт в программировании

Узнать больше

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

Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Что такое фреймворк: простыми словами для начинающих

Если вы заинтересовались программированием и, в частности, веб-разработкой, понятие «фреймворк» будет встречаться наряду с «китами» HTML, CSS и JavaScript в каждом учебнике. В мире, где все постоянно усложняется, нецелесообразно писать код с нуля, поэтому принято использовать шаблоны. Фреймворк – это тот самый «каркас» (слово framework так и переводится), фундамент, на котором строится программа. Рассмотрим это понятие подробнее.

Для чего нужны фреймворки

зачем нужны фреймворки, как они работают

зачем нужны фреймворки, как они работают

Такие платформы широко применяются для автоматизации, реализации типовых проектов или проверки концепции. Перед каждым разработчиком стоит задача: создать приложение за минимально короткие сроки, но с максимальной надежностью. При написании кода «вслепую» вероятность выбора ошибочного пути сильно повышается. А если взять на вооружение уже многократно опробованный, защищенный и безопасный фреймворк, шансы на успех многократно растут.

Задачи, которые решает фреймворк:

      • Ускорение разработки. Основной и самый очевидный плюс. Зачем писать код кнопки добавления товаров в корзину для каждого интернет-магазина по отдельности, если можно это сделать один раз и в дальнейшем использовать многократно. Модульная система, к тому же, снижает количество ошибок – уже проверенный и работающий код останется таковым навсегда.
      • Упрощение процесса. У фреймворков есть общие черты. Конечно, изучение одной платформы не означает, что вы будете автоматически знать все остальные, ведь у каждой есть нюансы. Но разобраться будет проще. Плюс, доработкой системы совместно занимаются программисты со всего мира, так как код в большинстве случаев открытый. Вы всегда можете попросить совета у опытных коллег и получить отклик.
      • Безопасность. Фреймворки безопаснее самописных решений, поскольку, опять же, являются продуктом «коллективного разума». Классические инструменты взлома давно учтены и не страшны вашему проекту.

    Фреймворки позволяют избавиться от «рутины» программирования и сконцентрироваться на идее, логике пользовательского интерфейса. В то же время они существенно отличаются от CMS, так как многие параметры компонентов придется дорабатывать вручную.

    Чем фреймворк отличается от библиотеки

    отличия фреймворка от библиотеки

    отличия фреймворка от библиотеки

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

    Фреймворк включает в себя библиотеки, но он также задает «каркас» будущего веб-приложения. То есть, у вас в руках появляется четкая схема построения «домика из Lego». Некоторые фреймворки дают больше свободы, другие – меньше. Все зависит от языка программирования и исходных данных.

    Строение фреймворка

    Каждый framework построен по классической архитектуре Model–View–Controller (сокращенно MVC). Принципы, заложенные в систему, используются повсеместно благодаря эффективности, которую они показывают. Смысл заключается в разделении структуры программы на компоненты, работающие с данными, отображающие информацию и закрепляющие логику бизнес-процессов. Рассмотрим каждый вид по отдельности:

        1. Model. Такие компоненты занимаются работой с базами данных. Благодаря им происходят обмен, хранение, обновление информации в системе. Например, для таск-менеджера (приложения-планировщика) «модели» хранят списки запланированных дел, сведения о предстоящих задачах, актуальные таймеры, отвечающие за напоминания, и т. д.
        2. View. Если коротко, компоненты View гарантируют отображение страницы на экране и позволяют посетителю взаимодействовать с отдельными элементами. Они способны подстраиваться под разные браузеры, операционные системы и платформы. За графику, анимацию, различные переходы также отвечают эти блоки.
        3. Controller. Контроллеры наделяют статичные компоненты Model и View действием. Они задают принципы, по которым будут преобразовываться данные, отвечают за то, какие отображения появляются друг за другом после щелчка мышки. Цель – обработка поступающих запросов и выдача подготовленного результата.

        В качестве примера рассмотрим ситуацию из жизни – процесс приготовления хлеба в домашней хлебопечке. Мука, вода, дрожжи, различные вкусовые добавки и другие ингредиенты – это Model. Они выступают в качестве «ячеек хранения». После загрузки в хлебопечку и нажатия кнопки «Пуск» вступает в работу Controller. По заданному рецепту прибор берет компоненты Model и преобразует их. Готовый хлеб – это View. То есть, результат в виде отображения.

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

        Как было сказано выше, web-интерфейс базируется на трех технологиях – HTML, CSS, JavaScript. Задача HTML – разметить страницу для будущего оформления, CSS – оформить ее графически, а JavaScript – задать принципы взаимодействия с пользователями.

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

        В зависимости от того, с какой стороны работает фреймворк (у пользователя или на сервере), их делят на виды:

            • Бэкенд-фреймворки. Связаны с сервером и работают на нем. Главная задача – обеспечение бесперебойной работы базы данных и сайтов с приложениями, обращающихся к информации. Функциональность у таких систем сильно ограничена, поэтому создать какой-то сложный интерфейс без дополнительных инструментов не получится. Чаще всего они применяются для проектирования базовых страниц и форм сбора, обработки данных, а также защиты от взлома. Примеры для языка PHP – Laravel и CakePHP.
            • Фронтенд-фреймворки. Отвечают за внешнее представление сайта или приложения и работают непосредственно в браузере. Такой фреймворк гарантирует, что проект правильно отобразится на любом распространенном программном обеспечении пользователя. В этой среде происходит настройка пользовательского интерфейса с графикой, анимацией, выводом информации и т. д. Примеры для языка JavaScript – Vue.js и Angular.js.
            • Фуллстек-фреймворки. Универсальный вариант. Такие фреймворки способны работать как в браузере у клиента, так и непосредственно на сервере. Примеры – Meteor и Nuxt.

          Сегодня существуют кроссплатформенные фреймворки, способные запускаться на разных операционных системах (Windows, macOS, Linux), а также платформах (от смартфонов до ПК). Получается, требуется написать всего один вариант кода, который везде будет отображаться одинаково правильно. Плюс очевиден: скорость разработки повышается до максимума. Но приходится приносить в жертву производительность и качество интерфейса. К тому же, новичкам такие фреймворки покажутся крайне сложными. Примеры кроссплатформенных систем – Kivy, React Native, Electron, Flutter, Xamarin.

          ТОП-5 фреймворков на разных языках программирования

          Ошибочно полагать, что фреймворки несут только преимущества для разработчиков. Во-первых, они содержат огромное количество функций, использовать которые в полном объемы вы скорее всего не будете. Но изучить структуру и принципы целиком придется, иначе не появится полное понимание. Во-вторых, фреймворк по определению ограничивает свободу программиста, поскольку содержит правила, от которых нельзя отклоняться. Придется их принять для ускорения и упрощения работы. Рассмотрим пятерку популярных фреймворков на языках программирования PHP, Python, JavaScript.

          ТОП-5 фреймворков на PHP

          ТОП-5 фреймворков на PHP

          Laravel

          Лидер в рейтинге популярности, используется чаще остальных. К тому же, он отличается удобством и высоким уровнем безопасности. Laravel применяется для проектирования как простых, так и сложных сайтов, web-приложений и программ. Четко заточен под одновременную работу над кодом сразу нескольких специалистов (благодаря строгому разделению компонентов между собой).

          CodeIgniter

          Главный плюс CodeIgniter – простота освоения. Его часто выбирают новички в работе с фреймворками на PHP. Интерфейс интуитивно понятен, сборка работает быстро и без лишних «зависаний». Скорость кодирования повышается до максимума. Популярная сфера применения CodeIgniter – тестирование проектов на разных стадиях разработки.

          Symfony

          Symfony – база, на основе которой разрабатывался Laravel, один из первых фреймворков на PHP. Призван упростить работу над крупными и сложными проектами. Наделен множеством настроек, способен интегрироваться с различными системами управления сайтом и фреймворками на JavaScript, сложен для изучения.

          Yii

          Еще один фреймворк с высоким порогом входа: его освоение потребует времени. Yii отлично работает в паре с jQuery, максимально эффективен, когда дело доходит до AJAX, позволяет очень тонко настраивать пользовательские интерфейсы. Но основное отличие от конкурентов – мгновенная загрузка. Скорости, на которых работает Yii, порадуют требовательных программистов.

          CakePHP

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

          Python

          ТОП-5 фреймворков на Python

          ТОП-5 фреймворков на Python

          Django

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

          Pyramid

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

          Flask

          В классической версии фреймворка Flask реализован только базовый функционал для создания простейших страниц – идеальное решение для первых шагов в программировании. В будущем, по мере набора опыта, платформа позволяет расширять ассортимент функций. Благодаря простоте Flask очень быстр и прост в настройке.

          Bottle

          Еще один легковесный фреймворк, связанный только со стандартной библиотекой Python. Bottle подходит для простых веб-приложений. Отличается высокой производительностью, понятным интерфейсом, гибкостью настройки. Поддерживает несколько видов шаблонов, HTTP-серверов, динамические URL.

          Web2py

          Фуллстек-фреймворк, работающий в облаке – устанавливать и настраивать отдельное приложение не придется. Отличается безопасностью и наличием полной обучающей документации – можно быстро найти ответы на любые вопросы. Web2py снабжен сервером, базой SQL, онлайн-интерфейсом, быстро взаимодействует со сторонними инструментами.

          JavaScript

          ТОП-4 фреймворка на JavaScript

          ТОП-4 фреймворка на JavaScript

          Vue

          Высокопроизводительный, доступный новичкам и эффективный фреймворк. В последние годы Vue.js активно набирает популярность, его используют для известных сайтов вроде Chess.com. Система по-настоящему реактивна, масштабируема и хорошо подходит новичкам в JavaScript. Обучающие материалы в достатке.

          React

          Самый популярный фреймворк на JavaScript, если судить по количеству проектов. Его развитием и лицензированием занимается Facebook, из-за чего одно время повышался уровень недовольства среди пользователей. Сейчас ситуация стабильная, и React не собирается сдавать лидирующие позиции.

          Что такое фреймворк и как выбрать фреймворк для фронтенда: советы бывалых

          Опытные разработчики из продуктовых и аутсорс-компаний рассказали, по каким принципам выбирают фреймворки для фронтенда.

          Иллюстрация: Simon Lee / Unsplash / Bhalej / Walcker / Cleanpng / Adrian Ciurea / Turbosquid / Themes.getbootstrap / Meery Mary для Skillbox Media

          Тимур Тукаев

          Фреймворк — это программная платформа, которая упрощает разработку программного продукта, определяет структуру проекта и помогает удобно объединять в нём разные компоненты.

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

          Что такое фреймворки и чем они отличаются от библиотек и паттернов проектирования

          Для начала разберёмся, в чём суть фреймворков. По сути, любой фреймворк — это программный каркас. И его можно сравнить с макаронами: так, вам не придётся самостоятельно намешивать тесто, придавать ему особую форму и сушить макароны на подоконнике перед готовкой: достаточно купить в магазине упаковку «ракушек» или «бабочек», отварить и добавить сыр или соус по вкусу.

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

          Фреймворки иногда путают с библиотеками и паттернами проектирования. Но разница между ними существенна.

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

          А фреймворки накладывают достаточно жёсткие рамки на правила проектирования программы. К тому же внутри фреймворка может быть много разных библиотек. Примеры библиотек: jQuery и React (да-да, это именно библиотека).

          Паттерн проектирования — это просто абстракция, схема, метод решения проблемы, который помогает правильно выстроить программный продукт. Нередко в основе фреймворков лежит какой-то паттерн проектирования — например, Django, Laravel и Ruby on Rails реализуют модель MVC (Model-View-Controller).

          MVC помогает разделить логику приложения на три независимых части:

          • Model. Получает данные от контроллера и выполняет необходимые операции и передаёт их во View.
          • View. Получает данные от Model и отправляет их пользователю в удобном виде.
          • Controller. Обрабатывает действия пользователя, проверяет данные на входе и передаёт их в Model.

          Сергей Черненко

          Magento Tech Lead Front-End at Overdose

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

          Но действительно ли они справляются со своей задачей? Отчасти. Фреймворк — дополнительный слой абстракции, который требует от разработчика дополнительных навыков: помимо знания нативного языка, необходимы и знания по самому фреймворку. И на старте это может быть гораздо сложнее. Однако с опытом использование уже знакомых фреймворков действительно ускоряет разработку и делает её приятнее.

          Примеры веб-фреймворков (для фронтенда и бэкенда):

            — фреймворк, написанный на Ruby для разработки веб-приложений. — PHP-фреймворк для создания веб-приложений. — PHP-фреймворк для создания веб-приложений. — фреймворк на JavaScript для создания веб-приложений. — фреймворк для веб-приложений на Python. — фреймворк для создания сайтов и веб-приложений на базе HTML, CSS, JavaScript. Иногда его называют библиотекой, но корректнее относить его к фреймворкам. — основанный на TypeScript фреймворк для создания веб-приложений. Курируется Google и особенно популярен в корпоративной среде. — JavaScript-фреймворк для создания пользовательских интерфейсов.

          Виктор Карпов

          разработчик из Amazon, живёт в Эдинбурге, Великобритания. Автор Telegram-канала Coding interviews

          В разработке интерфейсов каждый программист сталкивается с похожими задачами:

          • Как сделать переходы между разными экранами при изменении URL в строке браузера без перезагрузки страницы?
          • Как получать данные от API?
          • Как динамически обновлять интерфейс в ответ на действия пользователя?
          • Как разделить данные и представление, чтобы можно было рисовать различные части интерфейса по одним и тем же данным?

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

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

          Иногда слово «фреймворк» понимают в узком смысле — как некоторую библиотеку и набор инструментов, с помощью которых как раз и разрабатывается приложение; а иногда в широком — как некую архитектуру приложения, которой придерживаются разработчики конкретного продукта в команде. Я предпочитаю разделять эти понятия.

          Фреймворк решает типовые задачи и не знает о бизнес-области, в которой применяется: React, Angular, Vue.js — то, что поможет организовать роутинг (где-то как часть оригинального фреймворка, а где-то — как стороннее решение поверх, но не так важно), разделение моделей (данных) и вьюшек (шаблоны), перерисовку частей интерфейса при изменении данных.

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

          Классика и новичок Svelte

          Виталий Матвиевич

          старший разработчик, «МойОфис»

          Исторически сложилось, что мой родной фреймворк — Vue.js. Легковесный, простой, подробно документированный, со множеством коробочных решений — отлично подходит для стартапов, любых MVP, с крупными проектами тоже справится отлично при умелом обращении.

          https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8

          С выпуском третьей версии пришло много улучшений, но были и проблемы: для SSR-проектов удобно использовать Nuxt, но Nuxt 3 пока слишком далёк от production-ready-состояния — и неясно, когда он там окажется. Так что либо живёшь с Nuxt на Vue.js 2, либо решаешь задачи с SSR без Nuxt.

          Искать разработчиков под Vue.js непросто, что нужно учитывать при планировании проекта (если у вас долгострой и надо набрать пять человек, будет больно). Если проект необходимо собрать быстро и нет планов по кратному масштабированию команды, то Vue.js — идеальное решение, на мой взгляд.

          В «МойОфис» я сейчас работаю на React — этот фреймворк как будто чуть более требователен к уровню разработчика, документирован чуть хуже, зато у него очень большое и активное сообщество. А ещё он отлично подходит для монструозных долгостроев, нет проблем с масштабированием, он упоминается в большом количестве вакансий и используется многими разработчиками — что хорошо и для бизнеса, и для соискателей вроде бы. С другой стороны, из-за обилия вакансий искать разработчиков и масштабировать команду не сильно проще, чем в случае с Vue.js.

          С технической точки зрения в React.js мне не очень нравится уход в функциональные компоненты, но в остальном это мощный, контролируемый, популярный инструмент. Ну и круто, что есть React Native, а значит, можно в родном стеке собрать мобильное приложение приемлемого качества (у Vue.js есть Vue Native, но на деле это просто надстройка над React Native, что меня в итоге не впечатлило).

          Из новых фреймворков я бы обратил внимание на Svelte, который, по сути, является компилятором: ни виртуального DOM, ни фреймворка в рантайме — интересный сдвиг парадигмы. Близко ещё его не смотрел, вакансий не видел, но, насколько успел понять, Ozon уже мигрирует на Svelte с Vue.js. Так что технология явно заслуживает внимания.

          Выбор фреймворка в аутсорс‑разработке

          Илья Башилов

          руководитель фронтенд-направления глобальной IT-компании SimbirSoft

          SimbirSoft — сервисная компания, поэтому на практике у нас всегда есть три варианта развития событий.

          1. Заказчик приходит с готовым требованием того или иного фреймворка. Это происходит в том случае, если у него, например, есть команда на поддержку.

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

          3. Заказчик просит нас провести анализ и понять, на каком фреймворке лучше сделать IT-продукт. В большинстве случаев это React, поскольку в будущем окажется проще найти разработчиков для поддержки проекта, а сама разработка получится менее затратной в сравнении, например, с Angular.

          Есть несколько критериев выбора фреймворка/библиотеки: масштабность проекта, прозрачность и понимание функциональных возможностей, которые нужно реализовать, наличие специалистов на рынке и уровень их экспертности.

          Для enterprise-проектов с большой долей вероятности подойдёт Angular. Если будущая бизнес-логика ещё не до конца известна, лучше обратить внимание на React.

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

          Для MVP хорошо подойдёт Vue.js. Но если нет свободных специалистов, React тоже прекрасно справится с этой задачей.

          Мы уверены, что в ближайшее время React, Vue.js и Angular останутся актуальными. На наш взгляд, уделять время изучению устаревших фреймворков, например jQuery и AngularJS (не путайте с Angular), нужно только в особых случаях — скажем, если вы работаете с легаси-проектом, на котором были использованы эти технологии.

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

          Что касается новых фреймворков, сейчас набирает популярность Svelte. Он интересен с точки зрения принципов работы: основную часть переносит на этап компиляции, а не выполняет в браузере, тем самым не нагружая его. Однако коммерческая ценность Svelte пока под вопросом. Если его и изучать, то, наверное, только ради общего развития.

          React, Solid, Vue.js, Web Components и Svelte

          Иван Плесских

          фронтенд-разработчик и преподаватель

          Расскажу о разнице между React, Solid, Vue.js, Web Components и Svelte. Важное замечание: все они поддерживают TypeScript.

          React

          React — не совсем фреймворк, его принято относить к библиотекам.

          Плюсы:

          • Стандарт де-факто в индустрии — очень большое сообщество, есть что угодно на любой случай.
          • Небольшое количество концепций — проще выучить.
          • Минималистичность и универсальность — можно скрестить с чем угодно. — текущий стандарт для шаблонизации (собственно, он и стал таковым благодаря React), поддерживается всеми инструментами.
          • С MobX React становится похож на урезанный Vue.js.

          Минусы:

          • Из-за минималистичности и того, что это библиотека, а не фреймворк, приходится выбирать, как именно его «готовить»: обилие библиотек и подходов порождает проблему выбора.
          • Производительность на среднем уровне, и за ней нужно хотя бы изредка следить — как минимум встречаются лишние ререндеринги компонентов.
          • Концепция хуков слегка костыльна — необходимо вручную отслеживать зависимости (но это решается, например, тем же MobX).
          • Работа с состоянием классовых компонентов тоже не слишком интуитивна из-за асинхронности (и нереактивности React).
          • В принципе, легко затянуть глобальное состояние внутрь компонента и потом с болью его оттуда выдирать — приходится внимательно следить за архитектурой. Это тоже следствие отсутствия «фреймворковости».

          Vue.js

          Плюсы:

          • У Vue.js хорошая производительность благодаря встроенной системе реактивности и компилятору шаблонов.
          • Минимум бойлерплейта (причина та же, что и в пункте выше).
          • Расширенная функциональность для работы с компонентами или DOM: сигналы, слоты, директивы.
          • Фреймворк от создателей идёт в комплекте по необходимости — хорошая модульность.
          • Более простой аналог хуков в виде setup-функции — не нужны зависимости (тоже благодаря реактивности).
          • Есть поддержка стандартного JSX.
          • Большое сообщество.
          • Систему реактивности можно использовать и отдельно — по аналогии с MobX.

          Минусы:

          • Необходимо понимать принципы реактивности — отличается от традиционных библиотек наподобие RxJS.
          • Из-за языка шаблонов сложнее синтаксис: поддерживается инструментами хуже, чем JSX, — специфичен для Vue.js.
          • Сложнее интегрировать с другими подходами по управлению данными из-за наличия preferred way.
          • В целом достаточно большое количество концепций, из-за чего выучить его сложнее.

          Далее идут уже менее распространённые библиотеки.

          Solid

          Solid — это React плюс MobX минус Virtual DOM.

          Библиотека с очень интересной концепцией — полностью построена на реактивности, как и Vue.js, при этом работает без Virtual DOM, но с JSX. Сложнее React, зато одна из самых быстрых — потому что работает напрямую с DOM, изменяя только необходимые её части, которые выявляются в момент компиляции JSX и отслеживаются с помощью реактивности. Сообщество пока крайне маленькое, но сама идея очень примечательна и может перерасти во что-то большее. Поддерживает все фичи React.

          Svelte

          Svelte чем-то похож на Solid: его шаблоны и код компилируются на этапе сборки, выдавая очень близкий к оптимальному код, как если бы его писали вручную. В плане концепции и синтаксиса Svelte сильно отличается от обычных библиотек, которые работают в рантайме. Скорость условно на уровне React и Vue.js, но запускается быстрее. Уже есть небольшое сообщество.

          Web Components

          Это фреймворк от GitHub. Можно писать и на чистом JS или TS, используя веб-компоненты, — таким путём идёт сам GitHub. Сильная инкапсуляция компонентов через Shadow DOM (что влечёт и свои проблемы — например, глобальные стили придётся подключать в каждом компоненте) и максимальная нативность.

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

          Выбор фреймворка по сообществу

          Виктор Карпов

          разработчик из Amazon, живёт в Эдинбурге, Великобритания. Автор Telegram-канала Coding interviews

          Каждый из фреймворков для фронтенда имеет свои особенности, хоть и решает одну задачу, у каждого есть свои плюсы и минусы. Однако нельзя сказать, что условный React лучше Angular (или наоборот), — потому что конкуренция заставляет их расти и развиваться.

          Имеет смысл выбрать любой и инвестировать своё время и силы в изучение и работу с конкретным фреймворком. Что, на мой взгляд, действительно важно при выборе фреймворка, так это сообщество. Чем оно больше, тем лучше. Потому что от этого напрямую зависит качество документации, количество вопросов-ответов на Stack Overflow, полезных решений с открытым исходным кодом вокруг фреймворка.

          Фреймворки против CMS

          Александр Шулепов

          руководитель интернет-агентства Shulepov Code

          Расскажу о своём опыте. Мы с командой пилим проект, посвящённый подбору тренеров по большому теннису, — 40-30.ru. Пока успели доделать анкеты, форму регистрации и чаты между клиентами и заказчиками.

          Вообще, мы нередко делаем сайты на CMS — например, том же WordPress. И по сравнению с разработкой на CMS фреймворки — это дорого и долго.

          Однако у CMS, хотя они тоже в каком-то смысле являются фреймворками, есть ограничения — на них сложно собирать кастомные решения, многое упирается в стандартные функции. Например, всё очень непросто с разработкой личных кабинетов: если вам нужны ЛК с кучей сценариев, CMS такой проект вытянуть не смогут. А с фреймворком мы можем сделать то, что захотим, — и тут нас ограничит только наша фантазия и знания.

          Изначально я планировал собирать проект на Laravel. Хороший PHP-фреймворк — даже некая экосистема. Но я не стал рисковать, поскольку проект у нас планируется серьёзный: как Profi.ru, только с фокусом на большом теннисе. Ещё мне все советовали React, объясняя, что на нём, в принципе, сейчас и делают все сложные проекты.

          Однако я пообщался с разработчиком, и в итоге мы выбрали Angular — фреймворк, разработанный Google. На моё решение повлияли два момента:

          • Мне интересен новый опыт.
          • В команде есть человек, который отлично разбирается в Angular.

          Количество вакансий на разных фреймворках в СНГ и на Западе

          Константин Бирюков

          Frontend Developer в LightBox. Увлекается игровой индустрией, любит путешествия, Vue.js и картографические JavaScript-библиотеки

          Любой фреймворк призван упростить жизнь программистам на стадиях создания архитектуры, разработки и поддержки проекта. Кроме того, во фреймворках на архитектурном уровне заложено множество принципов оптимизации.

          Три самых важных и популярных в последние несколько лет фреймворка: React, Vue.js и Angular. Каждый из них имеет свои особенности, но в целом все они справляются со своей главной задачей на отлично. Безусловно, существуют и другие фронтенд-фреймворки, но я предположу, что более 95% проектов и вакансий содержат требования именно по этим мастодонтам.

          Важные критерии для выбора фреймворка — наличие разработчиков и порог входа.

          Количество вакансий. Если мы заглянем на один из самых популярных сайтов по поиску работы в РФ, hh.ru, и выберем Россию, то на 29 марта 2022 года увидим 4463 упоминания React в вакансиях, 2157 упоминаний Vue.js, 1883 упоминания Angular. Этот топ-3 прекрасно отражает популярность фреймворков в России на текущий момент.

          Времена величия и популярности Angular в странах СНГ постепенно уходят, хотя он и занял свою нишу — большие и серьёзные финтех-проекты. Поэтому зачастую немалая часть Angular-проектов — это поддержка легаси-кода, хотя, конечно же, и новые проекты иногда решают делать на Angular. Этот фреймворк также горячо любим многими разработчиками, имеет свой особый путь и философию и очень контрастирует с React и Vue.js.

          Порог входа. Angular достаточно «тяжеловесный» во всех смыслах этого слова — плюс у него довольно высокий порог входа. Для контраста: Vue.js можно освоить за один день на уровне, достаточном для написания простенького проекта, — и даже начать выполнять простые задачи на более крупном проекте. React по сложности занимает промежуточное положение между Angular и Vue.js.

          Производительность. С точки зрения производительности React и Vue.js одинаково хороши, а Angular немного отстаёт.

          Мобильная разработка. В экосистеме React есть технология React Native, которая позволяет создавать мобильные приложения, используя ту же самую React-модель — это даёт React дополнительный балл. У Vue.js подобная технология тоже есть, но такого широкого применения она не получила — хотя и используется в некоторых проектах.

          Популярность на Западе. Уместно будет сравнение российского рынка с западным, в частности с США. Я, как Vue-разработчик, столкнулся с тем, что на Vue.js работу в США найти крайне сложно и большинство вакансий с требованием Vue.js в США — это работа в очень маленьких стартапах (менее пяти человек) с отсутствием адекватного финансирования.

          Я пользовался множеством ресурсов для поиска работы в США, но, как правило, самым действенным всегда был LinkedIn. Если мы заглянем в LinkedIn и выберем United States, то на 29 марта 2022 года увидим 142 565 упоминаний React, 77 556 упоминаний Angular и всего лишь 17 294 упоминания Vue.js. React лидирует с большим отрывом, а Vue.js с таким же большим отрывом отстаёт.

          Примечание: числа с LinkedIn и hh.ru — не количество вакансий, а количество упоминаний технологии в вакансиях. Например, можно встретить Angular, React и Vue.js в одной вакансии — порой работодателю достаточно, чтобы вы знали хотя бы один из фреймворков, если вы готовы освоить нужный уже в процессе работы. Тем не менее на больших цифрах статистика упоминаний показывает вполне достоверный результат.

          В итоге я прошёл несколько десятков собеседований и убедился на практике: всем нужен React — от крупных корпораций до небольших стартапов. При этом популярность React в США только растёт. Такая же тенденция прослеживается и в странах СНГ, хотя тут серьёзно растёт и популярность Vue.js.

          Свои личные проекты я стараюсь делать на Vue.js — он прост, комфортен для разработки, субъективно привычен, имеет эталонную документацию и замечательное комьюнити. Однако на работе я использую React. В результате получается своего рода круговорот: чем больше компаний предлагают работу на React, тем больше разработчиков станут его учить. И чем больше разработчиков будут знать React, тем больше компаний будут начинать или даже переписывать проекты на React.

          Также я заметил, что в США даже многие крупные проекты написаны на «ванильном» JS (+ jQuery), а компании нанимают сотрудников, чтобы переписать их на один из фреймворков. И какой фреймворк они обычно выбирают? Правильно, React. Поскольку на React можно найти больше квалифицированных разработчиков. В результате имеем то, что имеем: React в США стал практически стандартом индустрии. Несмотря на огромную любовь к Vue.js, изучить React пришлось и мне 🙂

          Как мы на Svelte кассы в X5 писали

          Антон Крылов

          руководитель группы разработки интерфейсов складов «Яндекс.Маркета»

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

          И тут я прочитал статью, в которой были бенчмарки Svelte. Когда мы занимались профилированием, то поняли, что выходили за рамки по оперативной памяти — разрабатывали мы под старенький IBM. Было решено в качестве эксперимента попробовать написать маленькую часть приложения на Svelte.

          Сравнивали по следующим показателям:

          • Оперативная память: React — 5 МБ, Svelte — 3 МБ.
          • Скорость добавления товара в корзину: React — 120 мс, Svelte — 20 мс.
          • Общая производительность: гоняли в девтулзах профайлер.
          • Помимо всего прочего, смотрели на DX и скорость разработки — и здесь Svelte тоже опережал React 🙂

          В итоге всё приложение для операторов и касса самообслуживания были сделаны на Svelte. Но это были другие времена, мы были молодые и беззаботные, а сейчас алгоритм выбора фреймворка у меня примерно следующий:

          • Понять, насколько просто нанять разработчиков. Основной рынок — это React и Vue.js.
          • Если у вас уже есть команда — понять, на чём сотрудники уже умеют писать и готовы ли переучиваться на что-то новое.
          • Если вы эксперт в каком-то из фреймворков — нужно понять, есть ли у вас время на обучение новых разработчиков (но, опять же, смотрите пункт 1).
          • Сравнить фреймворки по синтетическим бенчмаркам (например, вот этим).
          • Сравнить DX в разных фреймворках.
          • Понять, есть ли нужные для вас библиотеки в выбранном фреймворке.
          • Понять, подходит ли вам парадигма данного фреймворка — возможно, какие-то вещи в нём будет сложно реализовывать или вам нужна реактивность (подробнее можно почитать в статье на dev.to).
          • Посмотреть: возможно, в вашей компании уже есть много библиотек под определённый фреймворк.

          Ну, и обобщённый совет: фреймворк — лишь инструмент, под каждый проект можно выбирать свой на основе того, что нужно для выполнения требований, что удобно для вас как для команды и что нравится конкретно вам. Хотя, конечно, можно писать всё на React (но лучше так не делать).

          Фреймворк вашего следующего веб-приложения

          Vladimir Yuldashev

          Каждый раз когда стоит задача выбора фреймворка для написания нового проекта, мы (веб-разработчики) скорей всего выбираем то, что уже хорошо знаем и постоянно используем. Мир PHP фреймворков достаточно богат и самыми крупными игроками являются: CodeIgniter, Kohana, Symfony, Yii, Zend Framework. Но я хочу обратить ваше внимание на принципиально новый, а вернее принципиально новую ветку лучшего фреймворка, с которым мне доводилось иметь дело. Встречайте, Laravel 4!

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

          Для начала давайте выясним что такое фреймворк на самом деле. Согласно википедии, фреймворк это:

          Структура программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. Употребляется также слово «каркас», а некоторые авторы используют его в качестве основного, в том числе не базируясь вообще на англоязычном аналоге

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

          Что такое Laravel

          Laravel это набор лучших практик из мира PHP разработки. От фреймворка веет одновременно и простотой и профессионализмом, которым обладают его разработчики.

          Простота начинается на этапе установки. Ведь достаточно вбить всего одну строчку в командной строке и дождаться пока все установится:

          А профессионализм заключается в том, что фреймворк несет в себе и проповедует использование таких паттернов как:

          • DI (Dependency Injection)
          • Repository
          • Observable
          • Singleton
          • Facade
          • Factory
          • Iterator
          • etc…

          И Laravel предоставляет вам возможность использовать их крайне эффективно. Например, чтобы осуществить DI какого-то класса достаточно написать:

          Laravel сам создаст экземляр класса `UserRepository`. И если в `UserRepository` тоже требуется DI каких-то классов, Laravel так же создаст их экземпляры. (прим. чем хорош и полезен DI и какие еще есть способы реализации его разбирать в данном посте не будем).

          Так же стоит упомянуть о том, что Laravel легко расширяем, то есть если вы используете сервер очередей, а Laravel не умеет работать с ним, то вам достаточно написать класс (драйвер) для работы с вашим сервером очередей — наследуясь от класса Queue и реализуя интерфейс QueueInterface, а затем прописать в соответствующем конфиге, что для очередей следует использовать такой-то класс.

          Одним из самых главных плюсов Laravel является краткость и читабельность его кода. Например, чтобы поставить задачу в очередь достаточно написать:

          или для вызова события:

          Кратко, лаконично и элегантно, не так ли?

          Следует так же упомянуть об ORM в Laravel (какой же фреймворк если в нем нет ORM?), который называется Eloquent (прим. что в переводе означает — красноречивый, выразительный). И он действительно оправдывает свое название. Чтобы выбрать первую запись из таблицы `users`, для которой у нас есть модель `User` требуется написать:

          или чтобы осуществить поиск по пользователям, которые активны и отсортировать их по дате регистрации достаточно написать следующее:

          Код читается очень легко и приятно.

          Допустим, у нас есть таблица `roles` и таблица, которая связывает роли пользователей и сами роли — `user_roles`. Чтобы добавить связь в классе `User` нужно просто написать 3 строчки:

          и если вы захотите выбрать пользователей вместе с их ролями код будет выглядеть следующим образом:

          И снова срабатывает wow-эффект 🙂

          Для того чтобы ознакомиться со всеми возможностями и прелестями Eloquent ORM я рекомендую заглянуть в официальную документацию и открыть для себя кучу интересных возможностей (http://laravel.com/docs/eloquent).

          Laravel невероятно удобен и крут для создания RESTful API, ведь в методе контроллера достаточно написать:

          и Laravel преобразит данную модель в JSON. Очень удобно. Так же есть другие возможности для создания RESTful API, которые следует изучить в официальной документации.

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

          Документированность

          Еще ни один фреймворк не был столь кратко и понятно документирован как Laravel. Вам нужно знать как работать с очередями? Пожалуйста, заходите в раздел Queues и читаете как работать с ними. При чем оказывается, что вариантов работы с ними имеется несколько — выбираете понравившийся или подходящий к вашей задаче и вперед! Хотите узнать как расширить ядро? Пожалуйста, и на это есть ответы с примерами.

          Обо всем уже позаботились

          Выше я писал как просто использовать возможности фреймворка. И это не только прекрасный ORM, удобная отдача данных, но так же невероятно красивый и гибкий роутинг, тестируемость всего и вся, шаблонизатор Blade, Schema Builder и т.д. Кстати о тестах, вам больше не надо беспокоиться о том, что когда вы используете Mock объекты в своих тестах, фреймворк может отработать неожиданным образом или не то как вы планировали. Laravel уже содержит тесты на весь свой функционал. Вам не нужно тестировать фреймворк. Тестируйте свой код. Разработчики отнеслись с большой ответственностью к тестам и работоспособности фреймворка.
          Вам не надо больше удивляться тому, что где-то происходит магия и что-то функционирует не так, как должно быть. Здесь работает все именно так, как написано в документации.

          Кто стоит за кулисами?

          Taylor Otwell

          Главный разработчик фреймворка. Именно он думает о том как должен выглядеть фреймворк и его API, и решает вводить или нет тот или иной функционал.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *