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

Аватарка пользователя Дух айтишной эмо школы

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

Блогер 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.

JavaScript
Новости
1168