2020 JavaScript Rising Stars

По многим причинам 2020 год был очень необычным. Самое примечательное, что впервые за пять лет абсолютным победителем Rising Stars стал не Vue.js, а Deno... очень неожиданно!

Deno — среда выполнения JavaScript-кода от создателя Node.js Райана Дала.

Её часто считают продолжением Node.js, и опираясь на его 10-летний опыт работы в новой среде были исправлены многие недостатки и недоработки существующей платформы.

Среди отличительных особенностей можно отметить следующее:

• Встроенный по умолчанию компилятор TypeScript (хотя ничего не мешает писать код на обычном JavaScript);
• Отсутствие какого-либо централизованного менеджера пакетов, поэтому JavaScript-зависимость может быть загружена с любого URL-адреса;
• Из коробки есть решения многих распространённых задач, которые в Node.js обычно потребовали бы установки сторонних пакетов;
• Deno в максимальной степени ориентируется на стандарты веба (например, Fetch API);
• Файлы импортируются при помощи ECMAScript-модулей;
• Имеется собственный исполнитель тестов и отладчик.

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

Успешное развитие Deno говорит о двух довольно больших тенденциях:

• Заметное увеличение использования TypeScript как во фронтенде, так и в целом на стороне клиента;
• Всплеск количества динамически импортируемых ES6-модулей через такие инструменты как Snowpack (см. раздел «Инструменты сборки»).

Vue.js и React продолжают противостоять друг другу, находясь на вершине категории фронтенд-фреймворков.

За ними на третьей позиции теперь следует Angular, который поменялся местами с Svelte, занимавшего эту строчку рейтинга в 2019 году.

А пятерку лидеров замыкает совсем молодой проект Alpine.js — минималистичный реактивный фреймворк для браузера от автора Laravel LiveWire.

Он вдохновлён концепциями Vue.js и Angular, поскольку в нём есть и пользовательские HTML-директивы, и двусторонняя привязка...

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

Из-за своей простоты и лёгкости для придания интерактивности веб-страницам, новенький инструмент хорошо интегрируется с современными фреймворками, например, с Elixir Phoenix. Уже есть даже специальный стек PETAL, который включает в себя как Alpine.js, так и Tailwind CSS.

Категорию фреймворков Node.js возглавляют два разных типа проектов.

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

А с другой стороны, у нас есть более классические решения, работающие только на сервере, к ним, например, относится Nest (лидер в прошлом году) или Fastify.

Как и в 2018 году, в категории фреймворков ведущее место занимает Next.js. В самом начале он был известен как инструмент для рендеринга React-приложений на сервере. Сейчас это известнейший фреймворк для создания фулстек-приложений с использованием React.

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

Что касается фулстек-фреймворков, то мы видим два новых претендента — Blitz и Redwood, которые призваны создать разработчикам максимальное удобство для разработки полноценных веб-приложений.

Интересно наблюдать, как появившийся 11 лет назад фреймворк Express до сих пор актуален в JavaScript.

Приглашённый автор: Ли Робинсон (Lee Robinson)

Ли Робинсон — разработчик, писатель и архитектор в Vercel.

Экосистема React в 2020 году прошла под эгидой стабильности. Хотя в новой семнадцатой версии React не было сделано никаких критических изменений, в ней была заложена основа для будущей работы — серверные React-компоненты.

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

Next.js стал самым популярным инструментом для разработки React-приложений. Его гибридный подход станет первым применением анонсированных серверных React-компонентов.

Укрепилась поддержка библиотек React Query, Recoil и React Hook Form, которые сконцентрировались вокруг использования хуков. Каждый из этих пакетов упрощает разработку приложений на React. В сочетании с отлично проработанными библиотеками компонентов, сейчас у React-разработчиков гораздо больше инструментов, чем когда-либо было раньше.

Самой важной новостью в сообществе Vue.js является выпуск третьей версии фреймворка.

В этом крупном обновлении появился новый Composition API, который должен устранить известные ограничения второй версии Vue.js:

• внутри компонентов было сложно разбить код по логическим частям;
• теперь стало легче повторно использовать код в разных компонентах (во Vue 2 примеси, фабрика примесей и cлоты с ограниченной областью видимости не были удачным решением для этого);
• более улучшенная и активная поддержка TypeScript.

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

Кроме этого, в 2020 году был представлен новый инструмент сборки под названием Vite, работающий на ES-модулях. Это самый быстрый способ работать с приложениями на Vue.js из командной строки.

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

Речь идёт про Scully, статического генератора сайтов, который выводит Angular в мир Jamstack. Проект запустился в декабре 2019 года и имеет отличную документацию, которая поможет вам в освоении этого инструмента.

В 2020 году было три крупных релиза Angular.

Выпущенная в феврале девятая версия завершила переход на компилятор Ivy, в результате чего удалось уменьшить размер бандлов и сделать множество других улучшений сборки. Позже появились две других версии: 10 и 11.

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

Приглашённый автор: Себастьян Лорбер (Sébastien Lorber)

Себастьян один из первых, кто начал использовать React, сейчас он работает над опенсорс-проектом Docusaurus от Facebook.

2020 был отличным годом для инструментов сборки: мы увидели много новых трендов.

Snowpack и Vite сделали ставку на ES-модули: на этапе разработки они не упаковывают код в бандлы, поэтому имеют чрезвычайно быструю скорость работы, однако при создании продакшен-сборок по-прежнему собирают код воедино (до тех пор, пока поддержка модулей в браузерах не увеличится).

Чтобы быть максимально эффективными и производительными, swc и esbuild используют преимущества Rust и Go; оба, кстати, поддерживают TypeScript.

Webpack часто называют очень сложным, и похоже, что такие более простые альтернативы как Parcel и Rollup достаточно выросли для использования в реальных проектах. Webpack по-прежнему остаётся стандартным инструментом сборки, который вместе с новым слоем кеширования может значительно улучшить производительность компоновки.

Монорепозитории становятся мейнстримом: для работы с ними активно применяются Yarn и Lerna, к которым присоединился ещё npm (с выходом седьмой версии).

Самые интересные лично для меня инструменты в 2021 году — Rome, Toast, Turborepo.

В этом году мы впервые добавили эту категорию, чтобы подчеркнуть успех фреймворка Tailwind CSS и используемый им CSS-подход «utility-first».

По сравнению с более традиционными CSS-фреймворками вроде Bootstrap или Bulma, в нём предусматривается использование определённого способа именования, давая разработчикам стилизовать страницы и компоненты путём комбинации разных имён CSS-классов.

По данным прекрасного отчёта State of CSS, именно этот CSS-фреймворк имеет самый высокий показатель удовлётворенности.

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