З наближенням випуску React 19 обіцяються деякі чудові функції. Цей реліз не просто чергове оновлення, він має на меті перевизначити наш підхід до коду React. Обіцяючи надати покращену швидкість, ефективність та більш зручний досвід кодування, React 19 має на меті підняти веб-розробку на новий рівень. Давайте поглибимося в те, що React 19 готує для нас у майбутньому релізі.

🔹Компілятор React

Введення компілятора React у версії 19 означає значну трансформацію у розробці React, встановлюючи новий стандарт оптимізації продуктивності. З кодовою назвою "Forget", цей інноваційний компілятор розроблений для трансформації коду React у стандартний JavaScript, потенційно подвоюючи його ефективність.

Основна проблема, яку адресує "Forget", - відоме обмеження в React — непотрібне повторне рендеринг цілих компонентів, навіть коли змінюються лише незначні частини. Історично, розробники React використовували хук useMemo для кешування результатів між рендерингами, процес, який вимагав ручного втручання і часто призводив до більш складних структур коду. Компілятор React елегантно автоматизує цю оптимізацію, обіцяючи не лише підвищену продуктивність, але й перехід до чистішого та більш організованого коду.

Значним досягненням для компілятора React є його впровадження у виробниче середовище на Instagram, що демонструє його ефективність та стабільність. Однак важливо зазначити, що наразі цей компілятор залишається пропрієтарним, ще не випущеним як відкрите програмне забезпечення. Це обмежує ширший доступ спільноти та інтеграцію, але це значний крок вперед у демонстрації практичного застосування та переваг цієї технології у реальному, масштабному середовищі.

🔹Екшини (Action): Легше робота з даними

React 19 вводить Екшини, що спрощує роботу з даними у вашому додатку. Думайте про Екшини як про розумний спосіб з'єднати функції з речами, такими як форми у вашому додатку. Вони організовано обробляють дані, незалежно від того, чи дії відбуваються негайно, чи займають деякий час. Це робить написання коду для форм і оновлень даних простішим і більш організованим.

🔹 Серверні компоненти: Швидші веб-сайти та краще SEO

Компоненти сервера є однозначно чудовою новою функцією в React 19. Вони дозволяють частинам вашого веб-сайту рендеритися на сервері, а не лише у браузері користувача. Це означає, що ваш веб-сайт завантажується швидше, коли хтось відвідує його вперше, і це краще для SEO. Це особливо корисно для веб-сайтів, які мають багато контенту або потребують легкого знаходження у пошукових системах.

🔹Завантаження ресурсів ( assets) : Більше не треба чекати на зображення та стилі

Це все про забезпечення плавної роботи вашого веб-сайту. Чи коли-небудь ви бачили текст або зображення, що раптово з'являються на веб-сайті? Завантаження ресурсів виправляє це, переконуючись, що все завантажено і готове до показу користувачу. Це означає більш професійний вигляд для вашого сайту.

🔹Метадані: З SEO стане все простіше

React 19 полегшує управління SEO-частиною вашого веб-сайту. З Метаданими документа ви можете легше контролювати речі, такі як заголовок сторінки та описи по всьому вашому сайту. Це допомагає вашому веб-сайту краще ранжуватися у результатах пошуку та зберігати ваш бренд однаковим скрізь.

Дійсно захоплює бачити, як функції на кшталт компілятора React, Метаданих документа та екшинів розвиваються.

Вони починалися як просто ідеї, з якими експериментувала команда React, а тепер готуються до реального використання. Буде чудово побачити, як вони працюють у реальних проектах, і я дійсно з нетерпінням чекаю на можливість спробувати їх у React 19!

Переклад статті 👉https://javascript.plainenglish.io/react-19-is-changing-everything-abff82a13f3e

https://www.jetbrains.com/phpstorm/whatsnew/?map=4 - тут можете ознайомитись з новим оновлення PhpStorm 2024.1

Memoization є потужним прийомом оптимізації, що дозволяє значно підвищити швидкість виконання програм, особливо тих, що використовують рекурсивні функції або функції з високовитратними обчисленнями. Ідея memoization полягає у збереженні результатів виконання функцій, щоб у майбутньому при повторному виклику з тими ж аргументами можна було просто повернути збережений результат, минаючи необхідність перерахунку.

Переваги Memoization

🔹Основна перевага memoization полягає у значному зменшенні часу виконання програми за рахунок уникнення повторних обчислень.

🔹Для функцій, що виконують складні або ресурсоємні обчислення, memoization може сильно зменшити використання ресурсів.

🔹У рекурсивних функціях, таких як обчислення чисел Фібоначчі, memoization запобігає необхідності повторного обчислення вже відомих результатів.

Давайте розглянемо приклад memoization із використанням в реальному проекті, наприклад, для оптимізації функції, що обчислює результати складних обчислень або запитів до бази даних. Уявімо, що ми розробляємо веб-сайт електронної комерції, де потрібно відображати вартість товарів у різних валютах в залежності від курсу валют, що часто змінюється.

Без memoization кожен запит користувача на перегляд ціни товару у певній валюті вимагав би нового запиту до API для отримання актуального курсу валют, що може бути витратно з точки зору часу та ресурсів.

function currencyConverter() {
    const cache = {};
    return async function convert(amount, fromCurrency, toCurrency) {
        const key = `${fromCurrency}_to_${toCurrency}`;
        
        //Перевірка кешу для ключа: ${key}
        if (key in cache) {
            return cache[key] * amount;
        }

        // Якщо курс валют не знайдено у кеші. Запит до API для отримання курсу "fromCurrency" до "toCurrency"
        // Припустимо, fetchCurrencyRate() це функція, що робить запит до зовнішнього API для отримання курсу валют
        const rate = await fetchCurrencyRate(fromCurrency, toCurrency);

        //Отримано курс валют - "rate" і зберігаємо його в кеш
        cache[key] = rate;

        return rate * amount;
    }
}

Цей приклад показує, як мемоізація може бути використаний для підвищення продуктивності в реальних проектах, зменшуючи кількість звернень до зовнішніх сервісів та оптимізуючи швидкість відповіді сервера.

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

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

function currencyConverter() {
  const cache = {};
  const ttl = 3600000; // Час життя кешу в мілісекундах, наприклад, 1 година

  return async function convert(amount, fromCurrency, toCurrency) {
        const key = `${fromCurrency}_to_${toCurrency}`;
        const currentTime = new Date().getTime();

        if (key in cache && (currentTime - cache[key].timestamp) < ttl) {
            return cache[key].rate * amount;
        }

    const rate = await fetchCurrencyRate(fromCurrency, toCurrency);

    cache[key] = { rate: rate, timestamp: currentTime };

    return rate * amount;
  }
}

Радий вам представити JavaScript fwdays’24 — 14-та технічна конференція, яка присвячена JS, від команди Fwdays 🙌

🗓 Дата: 25 травня
🗣 Формат: офлайн (у Києві) та онлайн
🎙 Мови доповідей: українська та англійська

Спікери та їх доповіді:
📍Сергій Бабіч – Solution Architect у Edvantis.
У своїй доповіді “Як розпочати рефакторинг чужого коду, і при цьому не звільнитися за місяць”, Сергій розповість про те, з якими жахами довелося зіткнутися під час роботи над чужим кодом, як вдалося опанувати себе та почати одночасно додавати нові фічі й потихеньку осучаснювати старі.

📍Ілля Климов – 18 років пише на JavaScript, вже пʼятий рік – у GitLab.
Під час доповіді «Либідь, рак і щука: такий різний frontend у 2024» Ілля розкаже на чому встиг пописати (React Server Components, App Router, Qwik + Qwik City, HTMX + Alpine.js) і що з цього обрати.

📍Роман Савіцький – лідер веб та мобільної практики. Співзасновник BeerJS Zhytomyr.
Під час його доповіді “Javascript. Розвиток стандарту, коли всім начхати” спробуємо розібрати запитання: чи варто подивитись на JS, коли всі пишуть на TypeScript, що відбувається зі стандартом, що ми отримали минулого року, які новинки очікуємо цього та наступного року, і головне, коли стандартизують Observer?

Та не тільки!

Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3xCbDqf

Приєднуйтесь до JavaScript fwdays’24!

Що, якби ви мали реальний контроль над світлим/темним режимами для кожного сайту?

Про це можна почитати в цікавій статейці де на цю тему розмірковує Bramus Van Damme

https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/

Temporal — це новий підхід до роботи з датами та часом у JavaScript, який включено до новітніх стандартів ECMAScript 2023. Він надає зручні об'єкти та методи для легшої роботи з датами, часом та часовими зонами. Цей API дозволяє працювати з різними календарями та підтримує виконання датових обчислень без залучення додаткових бібліотек. Наразі Temporal доступний для використання в проектах через поліфіл, який можна буде видалити після остаточного впровадження Temporal у стандарт ECMAScript​

https://tc39.es/proposal-temporal/docs/

Про React 19: найцікавіше з оновлення - https://dou.ua/forums/topic/48550/

Мій власний фронтенд дайджест із новин і статей які я виділив для себе з яким вирішив поділитися з вами😁
Якщо вам зайшло, чи було корисно, обовязково лайк 😉


Даджет новин і статей #1

Використання API Popover для підказок HTML - https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/

Створення інтеграції чату з Google Gemini - https://www.raymondcamden.com/2024/04/30/building-a-chat-integration-with-google-gemini

Безпечне відкриття посилань у новій вкладці: «Target=_blank» та «rel=noopener» - https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/

Використання CSS Scroll-Driven Animations , для індикаторів прогресу прокрутки на основі розділів - https://frontendmasters.com/blog/using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators/ і ще ось ця стаття про CSS Scroll-Driven Animations https://developer.chrome.com/blog/scroll-driven-animations-video-course

Створення різноманітних геометричних фігур за допомогою CSS Shapes - The Modern Guide For Making CSS Shapes

CSS Anchor position API - https://developer.chrome.com/blog/anchor-positioning-api

Нова альтернатива innerHTML - https://fullystacked.net/innerhtml-alternatives/

Дайджет новин і статей №2

🔹Найпростіший спосіб розгорнути веб-сайт, щоб можна було поділитися ним з іншими людьми? - https://frontendmasters.com/blog/exactly-how-to-deploy-local-files-to-make-a-live-website/

🔹5 крутих функцій Chrome DevTools, про які більшість розробників не знають - https://javascript.plainenglish.io/5-cool-chrome-devtools-features-most-developers-dont-know-about-cf55d3b46c95

🔹Як зробити форми доступнішими використовуючи псевдокласи - https://css-tricks.com/accessible-forms-with-pseudo-classes/

Також, ви можете допомогти формувати дайджет скидаючі цікаві новини і статті про розробку і фронтент сюди - @denispopov_web

🔹На іменовані ідентифікатори елементів можна посилатися як на JavaScript-глобали - https://css-tricks.com/named-element-ids-can-be-referenced-as-javascript-globals/ ( цікава статейка. Вийшла ще в 2022 а я на ней тільки зараз наткнувся )

🔹Цікава статистика від State of HTML - https://2023.stateofhtml.com/ua-UA/demographics/

🔹Якщо слідкуєте за оновлення браузерів, то можете дізнатись що нового в 🔹🔹Chrome 125 - https://developer.chrome.com/blog/new-in-chrome-125
а також, що нового буде в DevTools - https://developer.chrome.com/blog/new-in-devtools-125

🔹Як краще зрозуміти errors та warnings краще разом з Gemini - https://developer.chrome.com/docs/devtools/console/understand-messages

🔹Про FireFox 126 - https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126

🔹І куди ж без Safari. Webkit фічі в Сафарі 17.5 - https://webkit.org/blog/15383/webkit-features-in-safari-17-5/

Також ви можете взяти участь у формуванні цього дайджесту і закинути цікаві статті або новини про фронтенд розробку сюди 👉 @denispopov_web

Дайджет новин і статей №3

🔹 Коли слід використовувати компоненти, а коли просто HTML? - https://chrissmith.xyz/blog/2024/when-should-we-use-components-and-when-should-we-just-use-html/

🔹 Як розширення Chrome впливають на продуктивність веб-сайту у 2024 році? - https://www.debugbear.com/blog/chrome-extensions-website-performance

🔹5 найкращих передових методів JavaScript - https://thenewstack.io/top-5-cutting-edge-javascript-techniques/

🔹 Підсумки реакт конф 2024 - https://react.dev/blog/2024/05/22/react-conf-2024-recap

https://javascript.plainenglish.io/react-conf-2024-highlights-b7cc29fb5109

🔹Альтернатива Websocket: як використовувати Firestore для прослуховування подій у реальному часі - https://canopas.com/websocket-alternative-how-to-use-firestore-to-listen-to-realtime-events-141e634d04bc

🔹ECMAScript 2024 - Promise.withResolvers() - https://2ality.com/2024/05/proposal-promise-with-resolvers.html

🔹Трохи про CSS Gap - https://ishadeed.com/article/the-gap/

🔹 Старі методи, нові трюки CSS - https://mxb.dev/blog/old-dogs-new-css-tricks/

🔹 Нова магія для CSS Анімаціі - https://chasem.co/2024/05/css-animations/

🔹CSS якірне позиціонування на практиці - https://geoffgraham.me/css-anchor-positioning-in-practice-winging-it-live/

🔹 CSS Timer - https://frontendmasters.com/blog/how-to-make-a-css-timer/

Зустрічайте Highload fwdays'24 — унікальну та єдину в Україні конференцію від Fwdays, присвячену практичним питанням розробки високонавантажених систем, архітектури, масштабування, роботи з базами даних, DevOps 🙌


🗓 Дата: 15 червня
🗣 Формат: офлайн (у Києві) та онлайн
🎙 Мови доповідей: українська та англійська

Спікери та їх доповіді:
📍 Олена Сирота –Software architect у Star, викладач у SET University.
У доповіді "Як обрати правильний тип скейлінгу" ми спочатку проаналізуємо підходи до масштабування, а потім виберемо найкращий для нашої системи.

📍Тарас Кльоба – Microsoft, Senior Partner Solutions Architect, Data & Artificial Intelligence. Має понад 14 років досвіду в ІТ-індустрії, банківській справі та кібербезпеці
У доповіді "NATO Hackathon Winner: AI-Powered Drug Search" буде йти мова про те, як можна ефективно використовувати функції PostgreSQL і служби штучного інтелекту Azure для значного покращення функціональності пошуку в будь-якій програмі.

📍 Greg Young – творець Command Query Responsibility Segregation, незалежний консультант, автор книги про паттерни.
У доповіді, "Event Souring Patterns", мова піде про серію паттернів від AW: Design Patterns, Enterprise Integration Patterns та ін, засновані на книзі про паттерни, автором якої є сам Greg Young.

Та не тільки!

Використайте промокод POPOVHL10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3KB3SEl

Приєднуйтесь до Highload fwdays'24!

Якщо вам не лінь, можете прийняти участь в щорічному опитуванні State of Frontend 2024 - https://stateoffrontend2024.typeform.com/survey

Як використовувати Rem в CSS для доступного дизайну - https://www.a11y-collective.com/blog/what-is-rem-in-css/

Випробування нового HTML-елементу <permission> - https://developer.chrome.com/blog/permission-element-origin-trial?hl=en

Поради щодо написання хорошого CSS - https://andrewwalpole.com/blog/opinions-for-writing-good-css/

BEM-модифікатори у чистому CSS-Nesting - https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/

Чистий круговий текст CSS (без використання моноширинних шрифтів) - https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/

Випущено Htmx 2.0, що має на меті замінити складні фреймворки JavaScript зрозумілими атрибутами HTML - https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/