Посмотрите, что готовит 2022 год для веб-разработки.

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

Поэтому за несколько дней до конца года в этой статье мы рассмотрим, что готовит 2022 год для веб-разработки.

Вечнозеленые растения 🌱

Угловой

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

Благодаря возможности создавать веб-приложения (начиная с версии 5 можно создавать прогрессивные веб-приложения, которые гарантируют высокую производительность и могут очень хорошо работать даже в автономном режиме), нативные мобильные приложения и настольные приложения для основных операционных систем, Angular в настоящее время используется популярными такие компании, как Paypal, Netflix, Youtube для PS3, The Guardian и т. д.

Итак, вопрос: «Чего ожидать от Angular в 2022 году?».

Последние обновления, сделанные командой над Typescript v4.4, и поддержка RxJs v7.4, безусловно, являются интересными идеями, как и внимание к кэшированию сборки, которое сократило время сборки на 68%. .

Кроме того, команда Angular заявила, что будет гораздо более жесткая проверка типов в отношении реактивных форм (неизбежно совместимых с предыдущими версиями кода).

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

Итак, команда Angular в 2022 году подмигивает Micro-Frontends.

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

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

Реакция

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

Хотя он появился только в 2011 году для ленты Facebook, React стал невероятно популярным, таким образом позиционируя себя среди самых популярных библиотек на Stack Overflow, имея невероятно активное сообщество.

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

Зачем тогда изучать React в 2022 году?

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

На сегодняшний день React застрял на версии 17, однако на официальном сайте было объявлено о новом обновлении на новый год до версии 18.
Несомненно, потрясающие новости для разработчиков, которые смогут насладиться автоматической пакетной обработкой среди наиболее важных изменений.
В частности, мы говорим об автоматической пакетной обработке, когда React группирует несколько обновлений вместе в одно состояние рендеринга для повышения вычислительной производительности.

Среди новых функций, которые мы найдем в новой версии, — startTransition для одновременного рендеринга.
Таким образом, API улучшает взаимодействие с пользователем, помечая определенные движения как Tпереходы, позволяя React всегда получать информацию о том, какие обновления важны, а какие нет, при этом предоставляя библиотеке свободу действий. прерывать Переходы в любое время для более срочных обновлений.
Зачем нужен этот API? Это помогает поддерживать отзывчивость приложения даже во время обновлений на большом экране.

Наконец, был сделан еще один шаг для отрисовки на стороне сервера, также известной как SSR. Это компонент, который позволяет вам генерировать HTML из компонентов React непосредственно на сервере и делиться этим HTML с пользователями.
Таким образом, пользователи могут просматривать предварительный просмотр страницы через SSR еще до того, как пакет javascript загрузится и запустится.
Однако javascript не всегда быстро обрабатывается в серверной части, и эта задержка известна как Время гидратации.
Поэтому в новой версии React будут добавлены новые архитектурные улучшения. введен за исполнение ССР.

Vue.js

Vue (произносится как «представление») — это среда JavaScript, созданная для создания пользовательских интерфейсов. Выпущено в 2014 году сотрудником Google для настольных и мобильных приложений с платформой Electron для создания кроссплатформенных настольных приложений. Основная причина для этой структуры заключается в том, чтобы захватить лучшее из Angular в отношении привязки данных и управляемого данными способа работы с DOM, чтобы не касаться DOM напрямую.

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

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

На данный момент основными выпусками являются v2 и v3.
Между одной версией и другой нет существенных различий в синтаксисе. Единственная причина, по которой кто-то может решить остаться на второй версии, заключается в том, что у них уже есть проект на этой старой версии, а время и стоимость миграции могут быть выше.
Не вызывает сомнений то, что на сегодняшний день не все доступные зависимости совместимы. с последней версией Vue, хотя это препятствие становится все меньше и меньше.

С новой версией производительность, безусловно, увеличилась (иначе кто бы стал обновлять существующие проекты? 😜), а также улучшилась поддержка Typescript и различных других функций самого фреймворка.
Мой совет, однако, всегда начинать с последней версии, какой бы ни была рассматриваемая структура, чтобы не начинать с ненужного начального пробела.

Наиболее обсуждаемой и важной новой функцией версии 3 является Composition API, который будет не чем иным, как подходом к логике повторного использования и организации кода.
Поскольку это совершенно необязательно, следовательно, можно продолжить со старым подходом, который включает создание компонентов с помощью Option API. Поэтому, чтобы добавить логику в компонент, мы заполняем такие свойства, как данные, методы и т. д., но таким образом нужно точно знать, какие свойства доступны в шаблоне. Composition API призван решить эту проблему, предоставляя механизмы, доступные в настоящее время через свойства компонентов, как функции javascript.

Ember.js

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

Это определение фреймворка, объясненное таким образом developer.mozilla.org, заставляет нас остановиться на понятии компонент-сервис, т. е. компонентов, которые представляют собой отдельные связки поведения, стиль и разметка (намного больше, чем другие, упомянутые выше).

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

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

Что произойдет в 2022 году?
Ember продолжит следовать своим традициям и в версии 4.0, кроме удаления устаревшего API, не добавит никаких новых функций, кроме удаления Internet Explorer. поддерживать.

Дополнительная экипировка, чтобы выделиться 🎯

Веб-сборка

WebAssembly — одна из самых обсуждаемых тенденций в Интернете. Хотя он совсем недавно, его уже можно увидеть в производстве.

А если подробно, что такое WebAssembly и почему о нем так много говорят?

WebAssembly — это новый тип кода, который можно запускать в современных веб-браузерах. Это низкоуровневый язык, похожий на ассемблер, с компактным двоичным форматом, который работает почти с исходной производительностью и предоставляет такие языки, как C/C++, C# и Rust, с целью компиляции, чтобы их можно было запускать в Интернете. Он также предназначен для работы вместе с JavaScript, что позволяет им работать вместе.

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

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

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

API веб-воркеров

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

Это дает преимущество в производительности, поскольку трудоемкие процессы могут выполняться в отдельном потоке, позволяя основному процессу (обычно пользовательскому интерфейсу) работать без блокировки и/или замедления.

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

Gatsby JS и Next.js

Часто бывает, что вам нужно попробовать свои силы в создании нового статического сайта без особых претензий и необходимости делать это быстро.
По этой причине такие фреймворки, как GatsbyJS и Next.js, оба React на основе, обслуживайте разработчиков, ускоряя время разработки благодаря готовой структуре, богатым шаблонам и высокооптимизированному набору инструментов для начала разработки.

Однако, если быть точным, Next.js считается наиболее надежным и гибким для создания сайтов или приложений на основе событий.

GraphQL

GraphQL — это язык запросов для вашего API, который позволяет разработчикам указывать именно те данные, которые им нужны, не беспокоясь о том, где эти данные и как получить к ним доступ.
Чтобы это произошло, GQL координирует работу различных серверных систем, чтобы обеспечить выполнение запроса, так же как SQL-запрос позволяет вам легко работать с несколькими таблицами базы данных с помощью одной команды.

Итак, каковы преимущества изучения этого нового метода доступа к данным?

Подумайте о больших проектах, в которых вам нужно вызывать 10/20 различных API для заполнения страницы на вашем внешнем интерфейсе. Наоборот, можно получить разные ресурсы в одном запросе, делегируя задачу GQL, что делает все очень быстро и эффективно.

Среди самых известных пользователей — Facebook, Github, Pinterest, Coursera и многие другие.

Кроме того, считается лучшей практикой структурировать и писать с помощью GQL, потому что это упростит процесс создания и оптимизации ваших страниц.

Выводы

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

Итак, теперь вопрос, который я вам задаю:

Что вы планируете изучать и/или углублять в 2022 году?
Есть ли что-то, что, по вашему мнению, нужно добавить в этот список, что станет настоящей бомбой 💣 года?

Дайте мне знать в комментариях, и если вам понравилась эта статья, не стесняйтесь нажимать кнопку 👏 столько раз, сколько хотите, это побудит меня написать другие статьи :)

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.