Аллен Конуэй, главный инженер-программист и научный сотрудник Cognizant Digital Engineering
Текущее состояние среды веб-клиентов для создания надежных приложений корпоративного качества огромно.
Существует огромное количество вариантов выбора при создании новых приложений с нуля и при переписывании с целью модернизации. К счастью, основные варианты, которые преобладали, более целенаправленны и стабильны, чем 5–7 лет назад, когда постоянный отток производил победителей и проигравших с точки зрения фреймворков JavaScript (например, Durandal, Aurelia) на рынке с открытым исходным кодом.
Двигаясь вперед, надвигается печально известный «Веб 3.0» и перспектива децентрализованной сети, основанной на технологиях блокчейна, которая, как побочный продукт, была частично напряжена из-за текущих глобальных событий и нерегулируемой природы, окружающей криптовалюты.
Сегодня Web 3.0 — это скорее гипотеза, чем фактическая дорожная карта к «vNext» в Интернете. Все группы Web 1.0, 2.0 и 3.0 представляют собой абстрактные понятия о поведении веб-доставки и о том, как мы взаимодействуем с ними, и в меньшей степени об изменениях в конкретных базовых технологических стеках. В основе всех различных веб-версий был и остается в значительной степени JavaScript. Изучение виртуальных машин блокчейна с открытым исходным кодом и репозиториев монет показывает, что они частично продолжают использовать JavaScript или TypeScript.
Сеть и то, как мы с ней взаимодействуем, изменятся, а зонтичные определения сети, такие как Веб 2.0 или Веб 3.0, предоставят исторический и будущий контекст для тех периодов, в которых была реализована сеть. Однако вместо того, чтобы сосредотачиваться на абстрактных веб-определениях, цель здесь состоит в том, чтобы сузиться до состояния конкретных технологий, лежащих в основе современных веб-приложений.
Четыре основных современных подхода к созданию клиентских веб-приложений
В основе разработки веб-клиента лежит веб-компонент.
Существует множество библиотек JavaScript для веб-компонентов, но сами по себе они не полностью полезны. Старая пословица «если у вас нет фреймворка, вы его создадите» напрямую применима к разработке JavaScript. Без фреймворка вам понадобится поддержка маршрутизации, управления состоянием, безопасности, HTTP-вызовов и дополнительных аспектов полнофункционального приложения, чтобы заставить библиотеку работать.
Следовательно, современные веб-приложения должны либо поддерживать все основные функции (т. е. фреймворк), либо строиться вокруг библиотеки в ядре, поддерживаемой богатой экосистемой, обеспечивающей вышеупомянутые функции. Рассмотрим Angular, React, Vue и WebAssembly.
Реакция
В настоящее время в версии 18 и праздновании десяти лет на рынке, десятилетие владения и принятия React создало огромное сообщество разработчиков открытого исходного кода, заполненное вспомогательными библиотеками и опциями, чтобы сделать каждую реализацию полностью настраиваемой и конфигурируемой.
По своей сути React представляет собой единую библиотеку движка рендеринга и менее упрямо относится к вспомогательному набору дополнительных функций, которые должны быть всеобъемлющими. Эта открытость обеспечивает гибкость для групп разработчиков в выборе того, какая реализация лучше всего подходит для их конкретных потребностей, и может меняться от приложения к приложению. Желательно иметь опытного архитектора React, который будет руководить этими решениями, чтобы выбор не был произвольным.
Платой за гибкость React является несогласованность его реализаций в отрасли. При найме разработчиков не существует стандартного плана реализации React, поэтому одна команда может реализовать React совершенно иначе, чем другая. Это может привести к дополнительной кривой обучения, чтобы дать разработчикам возможность быстро ознакомиться со спецификой каждой реализации. Однако, если разработчик хорошо разбирается в основных веб-технологиях, таких как HTML, JS/TS и CSS, это не должно быть слишком сложной задачей.
React — лучший выбор для многих компаний из списка Fortune 500 с общедоступными веб-сайтами, включая Netflix, Facebook и PayPal. Учитывая, что Meta создала и продолжает оказывать финансовую поддержку React, справедливо предположить, что он будет использоваться еще много лет.
Короче говоря, React — это опора Интернета и хороший выбор для создания современного веб-приложения.
Угловой
Angular — наиболее полное готовое решение для полнофункциональной среды веб-клиента при создании веб-приложений. Дело не в том, что других конкурирующих фреймворков и библиотек нет или они неполные, а скорее в том, что они требуют большего принятия решений и предварительного составления вспомогательных библиотек.
Вместо этого это комплексное решение обеспечивает более последовательную реализацию и шаблоны использования в более широком сообществе. Привлекая разработчиков Angular в качестве новых сотрудников с предыдущим опытом, вполне вероятно, что они смогут быстрее набрать скорость и просто пройти обучение в конкретной области.
Angular имеет еще более длительный срок пребывания в сообществе разработчиков открытого исходного кода, чем React, впервые появившись на рынке более 12 лет назад, и он поддерживается Google. Как и следовало ожидать от зрелой, широко используемой технологии, сообщество Angular может похвастаться богатым опытом и знаниями. С переписыванием и улучшениями Angular продолжает выпускаться два раза в год и в настоящее время имеет версию 15.
Angular, как и другие основные фреймворки и библиотеки веб-клиентов, имеет современный акцент на том, чтобы сделать веб-компоненты центральным составным строительным блоком с поддержкой всей инфраструктуры функций вокруг него.
Одна из сильных сторон Angular на предприятии связана с потоком данных и архитектурой, аналогичной концепциям MVC, с дополнительной поддержкой внедрения зависимостей и сервисов. Из-за этого фактора аналогичные шаблоны, используемые в гигантах, таких как ASP.NET, предлагают знакомую парадигму для реализации веб-сайтов. Противоположность этому знакомству с шаблонами, не зависящими от стека, с Angular — это React, который более глубоко укоренен в концепциях и шаблонах чистого JavaScript (например, функциональное программирование, JSX, CSS в JS).
Фреймворк используется во внешних реализациях крупных инвестиционных компаний, таких как Vanguard и Schwab, а также в потоковом гиганте SiriusXM. В целом Angular остается первоклассным выбором для организаций, создающих современные корпоративные приложения, которые широко используются сообществом.
Вью
В последние годы Vue стала общепринятой основной библиотекой JavaScript, популярность которой растет благодаря тенденции сочетать лучшие концепции React и Angular вместе.
Преимущество Vue в том, что он может быстрее обучать разработчиков React или Angular общеизвестным концепциям. Благодаря простой настройке Vue легко запускается и работает на небольших статических сайтах без необходимости сложных сборок и развертываний. Это не сценарий, необходимый для всех вариантов использования, но преимущество, которое выделяется на фоне других решений.
Версия 3 Vue получила значительные улучшения и капитальный ремонт, когда была переписана на TypeScript. Основной релиз-кандидат фреймворка всего около шести лет, поэтому у него нет такого статуса, как у React и Angular в сообществе.
Тем не менее, у него есть сильные поклонники с открытым исходным кодом. Vue хорошо зарекомендовал себя в опросах разработчиков благодаря своему органичному сочетанию лучших качеств других фреймворков, целенаправленно объединенных для создания качественного опыта разработчиков. Крупные компании, в том числе Publix и Frontier Airlines, использовали Vue для своих веб-сайтов.
Основным недостатком Vue является то, что как общественный проект ему не хватает центрального финансового спонсора, которым пользуются React (поддерживаемый Meta) и Angular (поддерживаемый Google). Сама природа программного обеспечения с открытым исходным кодом заключается в том, что сообщество в целом улучшает и поддерживает работу, потому что она имеет ценность в ее существовании. Любой проект сообщества, не имеющий финансовой поддержки, потенциально более подвержен риску отсутствия постоянной поддержки по сравнению с проектами с открытым исходным кодом, обеспеченными финансовой поддержкой.
Для компаний, выбирающих программное обеспечение корпоративного уровня для обеспечения своего будущего, более консервативным решением будет выбор решения с финансовой поддержкой, которая поддерживает его стремление оставаться на переднем крае в области совместимости и обновлений безопасности. Это не обязательно означает, что бизнесу следует избегать выбора такой библиотеки, как Vue, но это означает, что для обеспечения стабильности необходимо отдать предпочтение React и Angular.
Веб-сборка
WebAssembly (WASM) радикально изменил парадигму, позволив системам запускать скомпилированный код в браузере. Это сильно отличается от традиционно развернутых веб-приложений, созданных с помощью JavaScript, который интерпретируется браузером во время выполнения. Эффективность JavaScript достигается за счет минимизации, файлов меньшего размера и улучшенного кодирования, но это не сравнится с запуском предварительно скомпилированного двоичного кода, такого как байт-код WebAssembly.
Более того, WebAssembly обладает уникальной способностью использовать множество языков помимо JavaScript, выполняя предварительную компиляцию и перевод в WASM при запуске в браузере. Это открывает двери для популярных языков, таких как C# и стек Blazor, чтобы снова иметь возможность разрабатывать современные веб-клиентские приложения без необходимости работать исключительно на JavaScript. Реальная выгода от открытия этой новой двери заключается в том, чтобы вновь привлечь сообщество разработчиков программного обеспечения к веб-разработке на основе браузера с использованием языков, которые они знают лучше всего и, возможно, уже имеют большие инвестиции и глубоко укоренившиеся знания, чтобы использовать их на интерфейсе как хорошо.
За пять лет, прошедших с момента выпуска, WebAssembly превзошла свое происхождение как технология, основанная на браузере, и сегодня используется во многих самых сложных приложениях в мире, от Disney+ до Shopify. Даже почитаемые терминалы Bloomberg, которые сегодня отображают финансовые данные с помощью собственного механизма обработки табличных данных, написанного на C++, который обернут встроенным интерфейсом браузера Chromium, на котором размещаются тысячи приложений JavaScript, признают, что WebAssembly потенциально может улучшить производительность терминала. .
Несмотря на то, что WebAssembly все еще относительно молод, он демонстрирует большие перспективы для будущего веб-разработки на основе браузера.
Бонус: стройность
Я также хотел отметить Svelte как потенциального конкурента с открытым исходным кодом. Хотя Svelte может не иметь такой известности, как Angular или React, или преимуществ WebAssembly, он использовался для крупных брендов, включая Apple и Ikea.
Svelte полагается на преобразование кода во время компиляции, готового для браузера, чтобы предотвратить отправку больших файлов и полезных данных, которые обрабатываются во время выполнения, что приводит к более производительному результату. Как и Vue, Svelte может похвастаться сильным сообществом и пользуется популярностью в большинстве опросов разработчиков. Подобно Vue, ему также не хватает центрального финансового спонсора, поэтому крупные организации могут сомневаться в его долговечности и широте при рассмотрении таких важных факторов, как безопасность и внедрение.
Но Svelte, безусловно, заслуживает оценки в этой области как конкурирующее решение для веб-клиента.
2023 г. и далее
Сегодня доступно множество мощных и гибких вариантов разработки веб-клиентов. От стартапа, создающего прототип, до зрелого предприятия и перспективного конструктора веб-приложений — существуют инструменты для создания цифрового ландшафта будущего.
Один ключевой момент, который каждая организация должна учитывать при выборе своей структуры: ДНК команды, которой поручено создание приложения. Их знания и опыт могут привести к тому, что сочетание навыков и выбранной веб-реализации приведет к более продуктивному результату. Команда, хорошо подходящая для правильной структуры, может сэкономить время и деньги компании, создавая приложения более высокого качества с лучшей архитектурой.
Независимо от того, в каком направлении движется ваш бренд, взвешенный выбор всегда будет оправдан. И в сегодняшний золотой век JavaScript существует множество надежных и постоянных вариантов, которые помогут вам создать и удовлетворить любые технические требования в современном веб-ландшафте.
