😍 Дякую всім хто долучився.
❤️ Дякую всім хто донатив (знаю навіть одного переможця з нашого каналу)

Як вам ефір? Які враження?

🔥 Next.JS 14.0🔥

🎉 26 жовтня вийшов мажорний реліз Next.JS v.14. І я вже навіть зібрався зробити на нього відео огляд, але після ознайомлення і деяких експериментів весь огляд можна звести до 🤷‍♂️

Ні, в теорії нові можливості виглядають цікаво:

=> Прискорення на 54% запуску локального серверу та прискорення HMR на 94% (але все ще за прапорцем --turbo)

=> Серверні дії: код який ви можете позначити як такий, що має виконуватися на сервері і оминути процес створення API.

Але на практиці... Прискорення звісно приємна річ, але не критична. А серверні дії ще більше ускладнюють модель застосунку, виглядають як чорна магія та надто обмежені (як на мене)

👉 Єдине що радує це нові навчальні матеріали.

😕 Ось такий вийшов новий мажорний реліз next14, відео огляд якого міг би зайняти 30 секунд.

Всім гарного дня, бережіть себе і допомагайте ЗСУ

@reactbeginners

Уже розпочалася премʼєра 😉 Єслі шо, то це покращена та перемонтована версія стриму, що відбувався цієї середи. А просто зараз триває премʼєра відео, бавлюся з функціями ютуба 😉

Приємного перегляду!

https://youtu.be/02PwesoqG-A

Таки так - подався з нашим каналом #React для Початківців на Першу Премію DOU.

UPD: спочатку треба потрапити в шорт ліст, підтримка вже потім ❤️

Навряд чи зможу виграти, бо конкуренція ну дуууууже важка але точно буде цікаво 🙂

Дякую всім хто приймав та приймає участь!

Принципи побудови структури проекту

👉 Спробував коротко викласти, свій алгоритм побудови структури (не архітектури) проекту (наступний пост)

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

Тому, якщо вам все зрозуміло - ставте 👍, якщо потрібне додаткове відео - 🤯, а якщо не згодні або є запитання - прошу до коментарів.

ПОСТ НИЖЧЕ
⬇️⬇️⬇️⬇️⬇️

Принципи побудови структури проекту

=> Кожна сторінка знаходиться в окремій теці і рахується окремим незалежним модулем
=> => Якщо компонент використовується виключно на одній сторінці, він лежить в теці цієї сторінки
=> => Інакше компонент лежить в теці яка призначена для загальних компонентів
=> Модулі можуть залежати лише від загальних модулів. Залежність від специфічних модулів не допускається
=> За замовчуванням, компоненти групуються за приналежністю, а не за типом
=> => Якщо компонент потрібен лише для navbar, він знаходиться в теці navbar
=> => Інакше він знаходиться в теці яка призначена для загальних компонентів (проекту або модулю)
=> Групування за типом допускається виключно в загальних модулях
=> Якщо в модулі один компонент використовується в декількох місцях, модуль може мати власний модуль загальних компонентів
=> Загальні компоненти мають якомого менше залежностей і ніколи не залежать від специфічних модулів
=> Для складних проектів, допускається два модулі загальних компонентів - одна для компонентів що не містять бізнес-логіку, інша для тих що містять, але використовуються по всьому проекту
=> Дані правила рекурсивні

➕Під компонентами розуміються будь-які елементи системи - React компоненти, сервіси, класи, тощо.

➕Правила можуть бути спрощені, наприклад, специфічні під модулі можуть імпортувати компоненти з інших підмодулів якщо:

а) Вони обидва належать одному й тому самому модулю ТА
б) Такі імпорти не створюють циклічну залежність, коли А залежить від Б, а Б, свою чергу від А.

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

@reactbeginners

Дякую всім хто чесно ставив 🤯

📹 Тепер чекайте на відео - має вийти в понеділок або вівторок, на наступному тижні. Побачите наскільки все може бути просто на живому прикладі. Спробую вкластися в 10 хвилин)

❓А поки ось вам питання на подумати:

Навіщо нам взагалі потрібна структура проекту? Чому не можна (або можна) все писати в одному, двох, трьох файлах?

💪Трохи гарних новин про відео з Next.JS💪

Матеріали (презентація та тексти) для перших трьох відео про Next.JS готові:

1️⃣ Вступ до Next.JS та його можливості
2️⃣ Види компонентів в Next.JS
3️⃣ Стилізація в Next.JS

Залишається відзняти та змонтувати 😎

Кожне відео буде складатися з короткої теорії та короткої практики - будемо робити мікро проект про попередній відео курс - React для початківців.

Ось такі плани на найближче майбутнє. А ще я хочу запросити Сергія на посиденьки на тему "Чи не завищені вимоги до It?" Але то вже трохи пізніше)

Бережіть себе, допомагайте ЗСУ, скоро побачимося!

Не забувайте оброблювати помилки під час запитів на бекенд 😁

І не вірте що запит буде миттєвим, показуйте людям лоадер (так, у нас це не заборонено)

Всім тихих вихідних!

@reactbeginners

Структура React застосунку - 21/11, 19:00

👉 Обіцяне відео про структуру React застосунку виходить вже завтра, у вівторок о 19:00. Вийшло 15 хвилин у досить швидкому темпі, але встиг розповісти трохи про:

=> Навіщо нам потрібна структура
=> Якими принципами керуюся
=> Як її робити на практиці

➕Ще й підсумки якісь влізли

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

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

П.М. А ще з середи мене не буде кінця тижня, так що не дивуйтеся мовчанню - просто треба деякі особисті справи закрити.

Ще один офлайн в Києві - Skelar FrontEnd Meetup

😎 Мене запросили в гості на ще одну офлайн подію - Skelar FrontEnd Meetup, яка пройде 30.11 (четвер) о 19:00 в Києві на Подолі. В планах поговорити розвести срач про TypeScript, тестування, Low Code, та практичні завдання на інтерв'ю.

🧐 Формат 3Х3 (три за, три проти) мінімум аргументів, максимум емоцій. Що з того вийде - не маю жодного уявлення, якщо чесно. Але має бути цікаво.

😍 Участь безкоштовна, також є можливість прийти online. Тож хто бажає прийти - ось реєстрація

Відео вже доступне до вашого перегляду. Буду вдячний за коментарі та поширення.

П.М. Це останнє повідомлення на цьому тижні. Якщо раптом це буде не так, не ставтеся до нього серйозно.

❓Чим #React кращий за чистий #JS? Або взагалі навіщо потрібні фреймворки?

Якщо коротко - швидкість розробки та боротьба зі складністю.

Якщо довго, то

1️⃣Розробка проекту за допомогою будь-якого фреймворку має відбуватися швидше (тому що вам не потрібно створювати власні інструменти)
2️⃣ Фреймворк має* допомагати вам писати код, який простіше масштабувати та підтримувати в майбутньому.
3️⃣ Фреймворк це уніфікація. Розібратися з кодом написаним на популярному фреймворку куди простіше ніж вивчати фреймворк самописний, на який перетворюється більшість проектів на чистому JS.

Звичайно є купа "але":

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

По-друге, фреймворк має* вам допомагати писати більш підтримуваний код. Але "має" не значить зобов'язаний. Що на React, що на куди більш суворому #Angular можна таке налапшати що потім навіть археологи не розберуть.

І, по-третє, будь-який фреймворк вас обмежує. Чистий JS дає більше можливостей як "накосячити" так і зробити щось справді чудове.

Тому React кращий за чистий JS для більш-менш типових проектів. Після інвестиції часу в навчання - ви отримаєте змогу писати швидше, а код, скоріше за все, буде легше підтримувати та розширювати (але це не факт 😉 )

@reactbeginners

Нарешті вчора була змога більш-менш грунтовно поковиряти паралельний роутинг в Next.JS

😅 Скажу чесно - вийшло далеко не з першого разу, Next крові з мене попив нормально, але задуману ідею таки вийшло зробити і виглядає вона досить не погано (принаймні поки що).

❓Якщо ми назбираємо тут хоча б 31 ❤️, напишу про це більш детальний пост.

Всім гарного робочого дня, бережіть себе!

@reactbeginners

Оце ви налайкали. Що робити, домовилися, треба виконувати.

🗓Отже буде:

1️⃣ Пост про те що таке паралельні роути та навіщо вони треба
2️⃣ Пост-опис про те як їх варити
3️⃣ Демо репозиторій, щоб код можна було потикати паличкою

Все на свіжому Next@14 та app router (на іншому і не заведеться)

✍️Завтра і почнемо.

Паралельні роути в Next.JS, частина перша - що та навіщо.

💡Ідея паралельних роутів дуже проста:

Це, всього на-всього, можливість відобразити декілька компонентів на одній сторінці, але так, наче це повноцінні сторінки.

👉А вже з цього випливає, що до цих компонентів застосовуються звичні нам правила сторінок в Next.JS:

=> Вони серверні за замовчунням - відповідно ми можемо зробити асинхронний запит прямо в середині компоненту та не створювати в ньому стейт

=> Підтримують loading.tsx - вам достатньо додати цей файл з дефолтним експортом, і цей компонент буде відображений під час виконання асинхронного запиту. (не треба оброблювати стан loading)

=> Підтримують error.tsx - додаємо файл з дефолтним експортом і не мучаємося з обробкою помилок

=> Прив'язані до URL, відповідно керувати їх появою та зникненням можна просто змінюючи URL (наприклад по кліку на Link). При цьому інші під сторінки залишаються на місті, не стрибають та не рендеряться наново.

=> А ще це чудо техніки підтримує паралельне та навіть умовне завантаження!

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

😅Нажаль лише в теорії. На практиці не все так просто і чудово як пише документація. Є баги, є проблеми, є взагалі чортіщо (рестарт серверу може допомогти). З цим і будемо розбиратися в наступному пості, тож не перемикайтесь!

@reactbeginners

Паралельні роути в Next.JS, Частина друга - максимально простий приклад з багами 😂

😎З тим що таке паралельний роутинг ми умовно розібралися. Тепер давайте подивимось це на простому прикладі - створимо два незалежних віджети які будуть вантажитися паралельно з власною обробкою помилок та стану завантаження:

=> Створіть новий Next.JS проект за допомогою create-next-app@latest parallel-demo

=> В теці app створіть теки @widget1 та @widget2. Назви можуть бути довільними, але обов'язково починатися з @.

Знак @ пояснює Next-у що там будуть паралельні роути. Важливо, що назва такої теки не приймає участі в роутингу. Так шлях app/@widget/login/page.tsx буде розрахований як app/login

=> В кожній з тек створіть файл page.tsx з дефолтним експортом. В компоненті напишіть щось гарне, щоб ви бачили що компоненти відображаються.

=> Тепер відкрийте layout.tsx що лежить теці app та додайте до нього наступний код:

export default function RootLayout({
  widget1,
  widget2,
}) {
  return (
    <html lang="en">
      <body>
        {widget1}
        {widget2}
      </body>
    </html>
  );
}

Зверніть увагу, що тепер наші віджети передані через пропси і мають таку саму назву як і назва теки, що починається з @

=> Тепер створіть новій файл в руті і покладіть туди наступний код:

export function delay({ data = 'hello world', error = '', delay = 1000 } = {}) {
  return new Promise((res, rej) =>
    setTimeout(() => (error ? rej(error) : res(data)), delay)
  );
}

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

=> В перший компонент додайте виклик функції без аргументів, а в другій, передайте якийсь текст у властивість error і не забудьте зробити await:

import { delay } from '../delay';

export default async function W2() {
  const sadString = await delay({ error: 'Sorry bro' });
  return <>W2: {sadString}</>;
}

Тепер у вас на екрані має з'явитися дуже не гарна помилка, яка руйнує весь застосунок:

> Unhandled Runtime Error: Error: Error: Sorry bro

=> Але це дуже просто виправити. В теці другого віджету створіть файл error.tsx з дефолтним експортом і якимось змістом. Збережіть файл і тепер, замість компоненту що не зміг завантажитися, ви побачите красиву, або не дуже помилку. Але весь інший контент залишається цілим і ваш користувач все ще може працювати з застосунком!

Залишився останній крок - індикація завантаження:

=> В кожному з віджетів встановіть delay в 7000 та 4000 відповідно. Тепер ваша сторінка буде вантажитися 7 секунд, що геть не зручно для користувача. Давайте зробимо завантаження паралельним!

=> В теку з кожним віджетом додайте файл loading.tsx з дефолтним експортом. Якщо у вас з'явилася помилка default export is not a react component - перезапустіть сервер, або дайте компонентам різні імена.

❤️ Тепер, після завантаження сторінки, ви побачите, що наші віджети вантажаться індивідуально і виводяться на екран по мірі надходження даних, скажіть краса?

❗️Пам'ятайте, що назви loading.tsx, page.tsx та error.tsx є зарезервованими і змінювати їх не можна.

Код для погратися лежить тут

@reactbeginners

"За і проти" у фронтенді починається вже за 30 хвилин

В програмі:

> TypeScript проти програміста
> Хто має тестувати: розробник чи manual QA
> No-code, low-code проти програміста
> Live coding на інтервью: потрібен чи ні

І я таки туди доїхав :)

Дякую Skelar за гостинність, а з вами вже побачимось в ефірі, сподіваюся не бекати))

Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал по React від Максима Рудного.

🤝 Це не реклама, радше партнерство, адже у нього, до прикладу, є міні курс по GraphQL якого немає у мене, є матеріалу по React-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )

❤️Канал українською (при чому він його зробив до того як це стало мейністрімом), тож прошу.

А якщо ви його вже бачили - цікаво було б почути відгуки!