Структура 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-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )

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

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

[Пояснення] Браузер та завантаження JavaScript від @reactbeginners

😎Тема корисна, а ще її буває питають на співбесідах, то ж давайте розбиратися.

✍️ Коли браузер завантажує нашу сторінку - спершу він бачить її просто як звичайний текст. Оскільки працювати з текстом не зручно, відбувається токенізація - розбиття тексту на токени, які паралельно перетворюються на Document Object Module або DOM який вже буде відмальовуватися на сторінці. Цікавим моментом є те, що браузеру не потрібно чекати завантаження всієї сторінки - він буде відмальовувати контент паралельно із завантаженням. Це значно прискорює момент коли наш користувач зможе побачити контент і це дійсно круто.

Але що відбудиться, коли браузер зустріне тег script?

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

Якщо браузер зустріне звичайний скрипт (який ще називається синхронним):

<script src="/index.js"></script>

Він зупинить парсинг HTML і почне завантажувати цей скрипт. Коли завантаження закінчиться, він виконає цей скрипт. І лише після його виконання браузер продовжить парсинг та відображення сторінки. Така поведінка призводить до того, що, поки ваш скрипт вантажиться та виконується, новий контент на сторінці не з'являється (хоча дещо на фоні все ж таки буде відбуватися, але це вже оптимізації самих браузерів). Така поведінка не дуже сприяє гарному користувацькому досвіду.

Тому з'явилися спеціальні атрибути, які змінюють цю поведінку.

1️⃣ Перший атрибут це async:

<script async src="/index.js"></script>

Він каже браузеру буквально наступне:

- Коли ти побачиш цей скрипт, не потрібно зупинятися. Просто почни його завантажувати у фоновому режимі, а коли завантажиш, от тоді вже виконуй.

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

Але! Коли скрипт завантажиться, він почне виконуватися, а це зупинить парсинг та відображення сторінки, якщо вона не встигла повністю завантажитися. Ще один мінус в тому, що є ймовірність, що деякі елементи сторінки не встигнуть завантажитися і скрипт не зможе з ними працювати. Плюс до цього - порядок виконання асинхронних скриптів не гарантований, вони виконуються по мірі завантаження.

2️⃣ Другий атрибут це defer

<script defer src="/index.js"></script>

Його завантаження теж відбувається у фоновому режимі і не блокує відображення контенту. Але виконання скрипту буде відкладено до повного завантаження сторінки. Таким чином відображення змісту сторінки не буде заблоковане виконанням скрипту, а контент, в свою чергу, завжди буде готовий до взаємодії з кодом. Якщо у вас декілька defer скриптів, вони будуть виконані в тому самому порядку як на сторінці.

З цікавого, якщо застосувати async та defer разом, буде вибрана стратегія defer

Більш детальніше англійською тут

Ілюстрацію цього всього веселого - дивись постом вище

@reactbeginners

❤️Створимо казку разом!❤️

Завтра день Святого Миколая і це чудова нагода покодити щось цікаве.

Давайте зберемося сьогодні, у Вівторок, о 19:00 і спробуємо написати інтерактивну казку на Next.JS

В програмі:

=> Дитяча казка про дівчинку Юсю та Снігокрай
=> Доросла казка про Next.JS та експорт в статику
=> 18+ казка про деплоймент Next.JS на GhPages

Ефір буде тривати до переможного кінця, але сподіваюся не більше ніж 3 години.

Приходьте, буде цікаво 😍

П.М. Так, мені привезли мікрофон 😅
П.П.М. репозиторій

@reactbeginners

❤️А це маленький подарунок, який буде розіграний серед тих, хто поширить цей ефір в соціальних мережах.

Для того щоб взяти участь у розіграші потрібно поширити лінк на ефір на Ютуб та надіслати мені скріншот, щоб я додав вас у список 😎

Приймаються дописи в LinkedIn, Instagram, Facebook)

Дякую тій людини хто його мені віддав на ефір 😍

@reactbeginners

Ми починаємо!

☕️ Беріть чай | кава і приєднуйтесь
🏃 Це буде дооовгий забіг

🔨Чотири з половиною години йшов Ефір🔨

😢 І в кінці кінців Next.JS мене таки підвів. Те що працювало локально - не працювало на сервері. Виявилося (хто б міг подумати) що Next не гарантує однакову поведінку для локальної розробки та під час експорту в статику.

😎Але ні мене, ні слухачів це не зупинило і ми просто переписали апку з Next.JS на чистий React. І, ви не повірите, але воно працює 😊 Хоча, звісно, дизайнер з мене дуже посередній.

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

Ефір можна подивитися тут
Репозиторій тут


❤️Дякую всім хто був зі мною на цьому майже марафоні - Ви круті!
😍Вітаю всіх із днем Святого Миколая
💪Вітаю всіх із днем Збройних Сил України.

А це вам маленький подарунок