🥳 Как вам новый JavaScript фреймворк?

🔗 Оригинальный пост: ссылка

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

👨‍💻 Лично я, почти всю информацию на просторах интернета ищу как раз таки на английском. Знание английского очень сильно мне помогло повысить скорость и качество работы.

🔗 А вот некоторые источники:
- https://medium.com/
- https://dev.to/
- https://bytes.dev/
- https://thisweekinreact.com/
- https://overreacted.io/

🔍Недавно наткнулся на статью, где автор разбирает концепции современных JavaScript фреймворков.

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

⚙️Параллельно в этом супе еще варятся такие штуки как Proxy API, WeakMap, HTML templates, и т.д.

☄️Как по мне, статья очень крутая. Ссылка тут.

🔥В JavaScript были добавлены такие крутые методы для массивов:

Array.prototype.with(index, value)

Возвращает новый массив, где на позиции index будет указанное новое значение value.

Вот пример:
Меняем в массиве возрастов значение на индексе 1 с 15 на 16:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] исходный массив остался неизменным

И вот еще:

Array.prototype.toReversed() // Изменяет порядок элементов в массиве на обратный не меняя исходный массив
Array.prototype.toSorted() // Сортирует массив не меняя исходный
Array.prototype.toSpliced() // Работает как .splice(), но исходный массив остается неизменным

Ссылки:
- with
- toReversed
- toSorted
- toSpliced

▶ Приходите завтра на стрим в 19:00. Задавайте вопросы. Буду работать над проектом своим.

https://www.youtube.com/watch?v=Y79bg7JWfHc

📣 Выложил видео, где разбираю задачу с собеседования в одну из крупных российских компаний.
☺️ Позиция - Frontend разработчик.

▶️ Данное видео доступно у меня на Boosty.

🔗 Ссылка - https://boosty.to/maxwellcoding/posts/6c18c942-d014-4998-a1ea-a1274dcfbe9f

🔜 Далее на Boosty выйдет разбор решения тестового задания также на позицию Frontend разработчика, но на этот раз уже в другую крупную компанию.

📣 Выложил на YouTube видео, где я собеседую подписчика по вопросам JavaScript и TypeScript на уровень Middle.

🖥 Я собрал список вопросов из собеседований, которые сам проходил.

🧐 Уверен, что вы найдете там такие вопросы, которые раньше не встречали.

👨‍💻 Контент будет очень полезен для подготовки к вашим собеседованиям.

🔗 Ссылка - https://youtu.be/1vuyPc5wmmQ?si=EKSMM7YywZlaq3Sv

🆕 В JavaScript появился новый Intl API.

Форматирование дат:
Подобно методу toLocaleDateString в объекте Date, Intl можно использовать для форматирования дат, но с ним мы получаем некоторые дополнительные опции, такие как timeZone.

const date = new Date(Date.now());

new Intl.DateTimeFormat("en-US", {
  timeZone: "America/Los_Angeles",
  minute: "numeric",
  hour: "numeric",
}).format(date);

// 9:45 AM (возвращает текущее время в указанной тайм зоне)

Форматирование чисел:

new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "liter",
  unitDisplay: "long",
}).format(1); // '1 litre'

Форматирование списков:

const list = ["JavaScript", "PHP", "Python"];

new Intl.ListFormat(
  "ru-RU", 
  { style: "long", type: "conjunction" }
).format(list); // JavaScript, PHP и Python

🔗 Это еще не все. Почитать можно тут - ссылка.

❗AppCenter и CodePush ВСЁ!

📣 Компания Microsoft объявила о закрытии App Center, одного из основных инструментов для сборки мобильных приложений, который прекратит свою работу 31 марта 2025 года.

👨‍💻 Разработчикам, использующим App Center для сборок Android/iOS или для обновлений (с помощью CodePush), придется искать другие решения. Альтернативой App Center может стать EAS Build, а CodePush - EAS Update.

🥺 Я не мог обойти эту новость стороной, т.к. сам пишу аппки на React Native и пользуюсь App Center.

🔗 Подробнее можете почитать тут - ссылка.

▶ Приходите сегодня на стрим в 19:00. Задавайте вопросы. Продолжу работать над проектом.

https://www.youtube.com/watch?v=DhmIWr1LrMI

🆕 1 апреля 2024 года состоялся релиз Bun 1.1, который включает в себя ряд значительных улучшений и нововведений.

👩‍💻 Теперь у нас есть полная поддержка Windows, а это значит, что среда выполнения Bun, запуск тестов, менеджер пакетов и бандлер, теперь работают под Windows. И все это работает очень быстро.

🇬🇧 Почитать на английском - ссылка
🇷🇺 Почитать на русском - ссылка
▶️ Видео - ссылка

😒 Bun - это современная среда выполнения JavaScript типа Node.js, со встроенной поддержкой JSX и TypeScript. Она разработана с акцентом на быстром запуске, высокой производительности и самодостаточности. Внутри Bun есть транспилятор JavaScript, встроенный в среду выполнения. Это означает, что при работе с Bun можно запускать файлы JavaScript, TypeScript и даже JSX/TSX без каких-либо зависимостей.

✍️ Лично я сейчас работаю над материалом по миграции моего очень старого проекта с 👩‍💻 Create React App (JavaScript + NPM) на 👩‍💻 Vite (TypeScript + Bun).
🔜 Следите за анонсами, будет очень интересно.

▶ Сегодня продолжу работать над проектом на Next JS на стриме. Проведу в 19:00 по мск. Буду рад ответить на вопросы.

👨‍💻 С прошлого стрима у нас остались проблемы касательно сортировки данных пользователей по их активности на GitHub, баланса между SSR и CSR, дополнительно куда-то еще капнем, т.к. я только недавно начал работать с Next JS. Уверен, что будет очень интересно. Приходите!

https://www.youtube.com/live/Q-6eLMXeBlc

🚦Сигналы нативно в JavaScript.

✍️ Такое предложение было недавно создано и сейчас находится на первой стадии рассмотрения. (Стадии)

Сигналы используются в реактивном программировании. Они помогают отслеживать изменения значений, после чего автоматически происходит изменение данных, использующих эти значения. Данный подход реализован в современных JavaScript фреймворках. (Что такое реактивность?)

Но в этом посте мы говорим исключительно про JavaScript вне фреймворков.

Проблема:

let a = 10;
const b = a + 5;

console.log(b); (*)

a = 50;

Мы знаем, что на строке *, даже после переопределения значения переменной a (=50), переменная b сохранит старое значение.

Если сигналы станут частью JavaScript, у нас появится возможность автоматически менять одни значения на основе других. Вот как это выглядит:

const a = new Signal.State(0);
    
a.set(12);
        
effect(() => {
  const b = a.get();
    
  console.log(b);
})
    
a.set(15);

Функция effect следит за изменением значений своих зависимостей (не напоминает что-то? 👀) и выполняет код внутри себя. В итоге сперва мы в консоли получим 12, а затем 15.

👨‍💻 Кстати, можно поиграться уже с сигналами тут.

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

⚡️Мой студент с текущего потока Intense IT устроился на стажировку.

Стек: JavaScript, React.

👏 Приятно видеть, когда желание и целеустремлённость в итоге приводят к результатам.

👩‍💻 Сложно ли найти работу на React? Особенно в качестве первой работы. Кто-то говорит, что сложно, а кто-то нет.

⌨ В любом случае, на начальном этапе советую откликаться не только на вакансии по React, но и React Native.

📱React Native это React фреймворк для разработки мобильных приложений. Очевидно, что такой подход увеличит шансы найти работу.

👨‍💻 Я свою первую работу нашел на React Native зная только HTML, CSS, JS, и React. И так сложилось, что какую бы работу я после ни искал, везде попадается проект на React Native.🆘

📱 Снял shorts на эту тему: https://www.youtube.com/shorts/AbQ-Dqwfh7c

👩‍💻 Вышла минорная версия React - 18.3. Она не содержит никаких критических изменений, но будет выдавать новые предупреждения об устаревших функциях, чтобы помочь нам перейти на React 19.

⚠️ Предупреждения, например, касаются использования строковых рефов, defaultProps в компонентах FC/memo или при использовании SPREAD с ключами. Подробнее ниже по ссылкам.

👩‍💻 PR - ссылка
👩‍💻 Chagelog - ссылка

⌨️ Вам когда-нибудь доводилось пользоваться методом массивов .fill? Данный метод позволяет заполнить часть или все элементы массива одним и тем же значением.

🧐 Когда у нас есть современные методы массивов, мы, естественно, начинаем избегать использования обычных циклов for в пользу .map, .reduce и т. д.

👨‍💻 Допустим, мы хотим выполнить функцию произвольное количество раз, скажем, 10. Как это сделать, избежав использования цикла for? Первое, что приходит в голову - использование Array конструктора с .map.

Array(10).map(() => {
  
}) // [,,,,,,,,,]

😞 Если вы запустите этот код, то заметите, что он не работает. При выполнении Array(10), создается массив из 10 незаданных или «пустых» значений. И методы массивов не будут работать с пустыми значениями.

👍 Именно здесь нам поможет .fill.

Array(10).fill().map(() => {
  
}) // [undefined, undefined, ..., undefined]

👍 Тут мы уже получим массив из 10 неопределенных (undefined) элементов, а не пустых.

😮 Я только что узнал, что у браузеров есть встроенный таймер отмены запроса.

fetch('https://someApi.com' {
  signal: AbortSignal.timeout(5000),
})

⌛ Если запрос займет больше 5 секунд, то он автоматически отменится и завершится с ошибкой DOMExceptionError , где error.name будет равен строке TimeoutError.

🧐 Но если нам нужен более гибкий вариант, то можно использовать AbortController.

const controller = new AbortController();

setTimeout(() => {
  controller.abort('Что-то пошло не так')
}, 5000);

fetch('https://someApi.com' {
  signal: controller.signal,
})

⚠️ Текстом ошибки будет то, что мы передали в .abort().

🔗 По этой ссылке может чуть подробнее почитать.

📣 Держите крутое видео:
- Какую структуру данных выбрать? Массив или Объект?
- Как эффективнее экономить память в проектах на JavaScript?

⌨️ Я ответил на эти вопросы в ролике, где рефакторю проект подписчика. Видео залил на свой Boosty.
🔗 Держите ссылку.

⚡️Напоминаю, что на на моем Boosty также есть следующее:
- Задача с собеседования на Frontend позицию. JavaScript. Алгоритмы: разбор плохого кода и рефакторинг на более эффективный;
- Рефакторинг проекта подписчика. TypeScript. React. React Native: улучшаем типизацию, линтинг, устраняем баги, и оптимизируем код;
- Рефакторинг проекта подписчика. Redux Saga & Redux Toolkit: связываем Redux Toolkit с Redux Saga с нуля, устраняем баги, типизацию, и т.д.

🔜 В ближайшее время разберу и выложу тестовое в Avito. Так что подписывайтесь и не пропускайте данный контент.

👨‍💻 Как поживает ваш код, а в частности функции?

📱 Снял shorts, где объясняю то, что на скриншоте.

🔗 Ссылка - https://www.youtube.com/shorts/AfXJfJJttBs