10 изменений JavaScript за 2023 год, которые вы могли упустить

Блогер Fireship рассказал о 10 изменениях в JavaScript и веб-разработке в 2023 году, которые вы могли пропустить. Речь в ролике идёт о Next.js, React, Angular, Vue, и Node.js.

Вот, о чём идёт речь в видео:

1. 2023 год оказался бурным: обвал банка, покупка Twitter Илоном Маском, увольнения друзей автора, аресты крипто-энтузиастов, выпуск Cybertruck Tesla и замена ChatGPT на рабочих местах.
2. В JavaScript произошли значительные изменения: почти каждый фреймворк решил обновиться в 2023 году.
3. Новая функция ECMAScript ‘object group by’ позволяет группировать объекты по определенному признаку, например, по возрасту.
4. Добавлены методы ‘array to sorted’, ‘to spliced’ и ‘to reversed’, которые не изменяют исходный массив, в отличие от ‘sort’ и ‘reverse’.
5. В HTML появились новые элементы, такие как тег ‘search’ для поисковых форм и элемент ‘dialogue’ для модальных диалогов.
6. iOS наконец разрешила веб-приложениям отправлять push-уведомления.
7. Next.js обновился до версии 13.4 с новой функцией ‘app directory’, позволяющей получать данные непосредственно в React-компонентах.
8. Фреймворк Nuxt.js в экосистеме Vue.js обновил свои инструменты разработчика и предложил компоненты через унифицированную экосистему JavaScript-инструментов.
9. Svelte ввел новую функцию ‘Runes’, изменяющую подход к реактивным переменным и управлению состоянием.
10. Angular представил новый синтаксис шаблонов, сигналы и ‘deferrable views’ для ленивой загрузки, а также обновил свой логотип.
11. Node.js улучшил модель разрешений и добавил собственный WebSocket клиент.
12. Bun — новая среда выполнения JavaScript, написанная на Zig, обещает улучшенный опыт разработки и высокую производительность.
13. HTMX получил награду ‘JavaScript Framework of the Year’, предлагая подход, сокращающий использование JavaScript.

Ниже представлен транскрибированный перевод ролика на русском языке.

2023 год был диким. Мой банк обанкротился, Илон купил Твиттер, почти все мои друзья были уволены, все мои любимые крипто-братья попали в тюрьму, Tesla успешно скрестила DeLorean с Pontiac Aztec, создав Cybertruck, и ChatGPT сделал меня устаревшим. Но все эти хорошие новости блекнут на фоне изменений, которые увидели веб-разработчики в мире JavaScript за последний год, когда почти каждый фреймворк решил переосмыслить себя в 2023 году. В сегодняшнем видео мы рассмотрим 10 недавних изменений в JavaScript, которые вы могли пропустить.

Обновления ECMAScript: группировка объектов

Каждый год в ECMAScript стандартизируются новые языковые возможности, после чего они реализуются в браузерах. Одна из моих любимых новых возможностей в этом году – это группировка объектов. Представьте, у вас есть массив объектов, в котором объекты имеют похожую схему. Это могут быть записи из базы данных, где каждый объект имеет поле возраста.

Вы можете использовать группировку, чтобы разделить детей и взрослых, определив функцию, которая группирует всех, кто моложе 21 года, в детей, и всех, кто старше, во взрослых. В результате получается объект, организованный в группы. Это хорошая маленькая утилита, но когда я чаще всего использую – это array to sorted, вместе с to spliced и to reversed. В JavaScript уже были методы sort и reversed, но проблема в том, что они изменяют исходный массив на месте. И это сбивает с толку, потому что другие методы, такие как map и filter, этого не делают. Вместо этого они копируют массив и возвращают новый.

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

Новые элементы HTML

Веб-разработчики также получили несколько крутых обновлений в виде совершенно новых элементов HTML. Например, тег search – это более семантический способ определения поля поиска на веб-сайте, который может заменить более общий тег form.

Это хорошо, но элемент dialogue намного мощнее, что позволяет создавать фактические модальные диалоги и управлять ими с помощью JavaScript с использованием встроенных методов, таких как showModal и close. Еще одна хорошая утилита, но это приводит нас к пункту три.

iOS позволил веб-приложениям делать push-уведомления

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

И это огромная победа для 0,0001% пользователей веб-сайтов, которые фактически разрешают веб-сайтам отправлять им уведомления push, что, скорее всего, ваш дедушка, который случайно нажал кнопку разрешения и теперь не знает, как ее отключить. Но теперь пришло время поговорить о веселых вещах, фреймворках.

Обновился Next.js

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

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

Люди жаловались на медленный dev-сервер, который работает на Rust, что странно, потому что все, что работает на Rust, должно быть быстрым. И люди сравнивали его новую функцию серверных действий с PHP. Одно из самых оскорбительных оскорблений, которое можно сделать в отношении фреймворка JavaScript, но самая большая проблема заключается в том, что запуск Next.js довольно сложно сделать правильно вне Vercel, и это привело к проектам, таким как OpenNext, которые берут на себя утомительную задачу запуска его везде. Next по-прежнему является доминирующим мета-фреймворком, но Nuxt.js и экосистема Vue также имели много крутых обновлений в 2023 году, таких как его инструменты разработчика.

Эти инструменты запускаются непосредственно в браузере и значительно упрощают понимание структуры сложного приложения. Но одна вещь, которую вы, возможно, не знали о Nuxt, – многие из его компонентов доступны через унифицированную экосистему инструментов JavaScript. Например, если вам не важен Vue.js и вы просто хотите веб-сервер, вы можете использовать Nitro для создания быстрого сервера с обычным JavaScript. Забавно, что я думаю, что экосистема Vue.js изменилась меньше всего в 2023 году, и как следствие, она кажется наиболее стабильной и предсказуемой экосистемой.

Новая функция в Svelte

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

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

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

Обновления Angular

Награду за наиболее измененный фреймворк в 2023 году, однако, получил Angular. У него длинный список новых функций, но наиболее заметные изменения для ненавистников Angular – это новый синтаксис шаблонов, который предоставляет более чистый способ обработки условий и циклов, заменяя вещи вроде ngf и ng4.

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

Улучшился Node.js

Много сумасшедших изменений на фронт-энде, но на бэк-энде Node.js тихо стал лучше. С версией Node.js 20 была выпущена новая модель разрешений, которая улучшает безопасность, контролируя, к каким функциям имеет доступ скрипт. Очень похоже на то, что сделал Deno несколько лет назад. И затем с выпуском Node.js 21 был представлен собственный клиент WebSocket, основанный на API WebSocket в браузере.

Новая среда Bun

Самым большим дисруптором на бэк-энде JavaScript в 2023 году, однако, стал Bun. Это новая среда выполнения JavaScript, написанная на Zig, которая вышла с потрясающим опытом разработчика и дикими заявлениями о производительности. И после первоначального выпуска было обнаружено немало ошибок, но она по-прежнему остается многообещающим новым способом делать бэк-энд на JavaScript в будущем.

Фреймворк HTMX

И с этим мы рассмотрели 10 различных способов, которыми JavaScript изменился в 2023 году. Но я почти забыл о самом большом из всех – HTMX, фреймворк, который показал нам, что любой может завоевать воображение экосистемы JavaScript, если вы достаточно пошутили и мемили на Twitter.

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

Именно поэтому сегодня я в восторге и почетно представляю команду HTMX с наградой JavaScript Framework of the Year, которая в основном является Нобелевской премией в мире JavaScript.