Де рендеряться клієнтські компоненти?

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

Запрошую до перегляду та поширення)

Список опублікованих відео наразі наступний:

Відео № 1 - Вступ до курсу Next.JS
Відео № 2 - Що таке Next.JS
Відео № 3 - Мій перший застосунок
Відео № 4 - NextJs, компоненти та їх види

Мій акаунт в twitter закривається:

Сьогодні Елон Маск закликав своїх прибічників звертатися до Сенату США щоб зупинити допомогу Україні. Це настільки мерзенно, що у мене майже немає слів.
Тому я закриваю свій акаунт в Твітері і зроблю все щоб жодна з компаній де я буду працювати, ніколи не мала з ним справу.

Вибачайте за політику, це вже занадто.

https://twitter.com/drag137/status/1757348056943525948

Маск, Маском, але чи існують в Next.JS справжні клієнтські компоненти?

Не буду спойлерити - просто подивіться це відео)

#анонс
Онлайн співбесіда наживо рівня Strong Junior ReactJS з Дмитром Тілугом — переможцем другого випуску нового проєкту "Резюме Ґриль"!

Із провідного спеціаліста в авіаційній сфері до frontend розробника. Дмитро вирішив, що це хороша ідея і після успішної 10-ти річної карʼєри кардинально змінив професію. Не боїться казати “не знаю” на співбесідах та займається прибиранням заради задоволення.

А як ви раптом втомилися від запитань по самісінькому React, то маю вас втішити — готую нові й цікаві питання, тож нагостріть вушка!

***
А таємний експерт цього етеру — з компанії Svitla Systems, глобальної IT-компанії з більш ніж 20-річним досвідом, головний офіс якої знаходиться в Каліфорнії, а операційна діяльність поширюється на більш ніж 10 країн, зокрема США, Канаду, Мексику, Коста-Ріку, Аргентину, Україну і Польшу.

Svitla об’єднує понад 1000 спеціалістів з різних технологій. Серед клієнтів як інноваційні стартапи, так і компанії із Fortune 500.

***
⚡️ Strong Junior ReactJS // Співбесіда наживо // Дмитро Тілуг
⏰ 16 лютого, 19:00
📺 Сергій Бабіч та Дивовижний світ веброзробки

Іноді в Next.JS буває потрібно виконати якийсь код лише на клієнті. Як це зробити?

Перший варіант: застосувати справжні клієнтські компоненти за допомогою прапорця SSR:false та use client; Але це крайній варіант, тому що весь компонент буде виключений із первинного рендеру на сервері.

Другий варіант: виконати цей код в середині useEffect. За загальним правилом, ефекти виконуються виключно на клієнті і ви можете безпечно звертатися до, наприклад, об'єкту window або document. Але цей варіант не спрацює, якщо вам потрібно виконати код до ініціалізації React застосунку.

Тому існує третій варіант:

if (typeof window !== 'undefined') {
  console.log(`HELLO CLIENT`);
}

В середині цього if ви також можете безпечено працювати з DOM API.

А от перевірка накшталт if (window?.addEventListener) вже не спрацює, ви отримаєте помилку ReferenceError: window is not defined

Майте це на увазі.

@reactbeginners

Опублікував я вчора на LinkedIn пост про ноутбуки і зустрів два цікавих коментаря на цю тему

Перший:

Якщо фронтенд розробник читає книги про алгоритми, то його треба гнати з роботи, бо він готується бігати по співбесідах ) Бо типу більше ніж на співбесідах це ніде не потрібно

Другий (мовою оригіналу, вибачайте) про книгу "Грокаємо Алгоритми":

Книжечка конечно красивая, показывает причастность читателя к миру айти и достойна лайка, ну а серьезно, как часто эти алгоритмы нужны в реальной жизни, а не на собеседовании, когда все уже заложено в библиотеках и фреймворках?

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

Так от що я хочу сказати - це дуже далеко від істини.

І світ, і розробка зараз розвиваються дуже активно. Постійно з'являються та удосконалюються нові речі - штучний інтелект, машинний зір, системи автоматичного прийняття рішень (привіт Тесла), квантові обчислення та багато іншого. Та що далеко ходити - автонаведення дронів по не людям. Думаєте це роблять якісь вчені? Такі ж хлопці та дівчата як ми з вами! І таких задач багато, вони продовжують з'являтися. А за рахунок можливості працювати віддалено - ви цілком можете прийняти участь у їх вирішенні.

Але щоб прийняти участь - потрібно вчитися і алгоритми разом зі структурами даних є частиною цього навчання. Банально, якщо ви не знаєте популярних алгоритмів пошуку шляху, скоріше за все ви не створите кращий. Якщо ви не знаєте які є моделі для роспізнавання і як вони працюють, ви не дотренуєте свою до найкращого результату. І для цього вам навіть не треба вчити іншу мову - більшість із цього доступна з JavaScript-ом)

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

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

@reactbeginners

Тут один із наших підписників декілька місяців тому зробив свій телеграм канал про JavaScript.

Реклами у нас немає, але порекомендувати дружній канал з корисним тематичним контентом про JS/HTML/CSS думаю буде не гріх. Тим паче це ще й "найкращий" канал, ну як тут втриматися 😅

То ж запрошую до ознайомлення, можливо вам буде корисно)

Apple вимикає нормальну підтримку PWA (progressive web app) застосунків, мотивуючи це неможливістю забезпечити безпеку користувачів у випадку використання не сафарі браузера)

От так от легким помахом ноги велитенська купа роботи інших людей іде в смітник.

Тепер pwa-шки будуть відображатися як звичайні вкладки.

Обожнюю підхід еппл - це точно буде інтернет експлорер 2.0

І це стосується нас усіх, один дуже непоганий варіант зробити кросплатофрмений застосунок на react скоріше за все прикриють(

Понеділок, 19.02, 19:00 - нове відео про Next.JS: Практика з компонентами

Сьогодні виходить чергове відео з серії Next.JS. Цей раз подивимося на серверні та універсальні компоненти на практиці, напишемо кілька простеньких, подивимось де вони рендеряться.

Повний список виглядає зараз так:

Відео № 0.0 - Вступ до курсу Next.JS
Відео № 1.1 - Що таке Next.JS
Відео № 1.2 - [Практика] Мій перший застосунок
Відео № 2.1 - NextJs, компоненти та їх види
Відео № 2.2 - Справжні клієнтські компоненти в Next.JS
Відео № 2.3 - [Практика] NextJs, компоненти та їх види
Відео № 3.1 - заплановане на цей тиждень

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

@reactbeginners

Любі друзі, перестаньте мучитися і мучити інших (І я зараз не про ввійти в айті).

Коли ви (або хтось) затягнули лібу, яка прямо дуже потрібна, але капець як не зручна - врятуйте світ, себе та команду: напишіть на неї обгортку. Просто напишіть компонент, або клас, що сховає від вас складність та спростить взаємодію з лібою/компонентом до прийнятного рівня. Так, потрібно буде трохи більше часу, так, треба буде подумати і можливо поговорити з командою як зробити краще. Але воно того варто на всі 100% і окупиться вже наступного разу коли вам або комусь доведеться працювати з цим компонентом.

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

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

Пішов страждати далі, ваш @reactbeginners

А ну давайте маленький тестик

Як ви знаєте, в #React функціональні компоненти рендеряться заново, в тому числі, коли рендериться їх батьківський компонент (якщо не використовувати React.memo)

Тепер власне тест:

Маємо звичайний, майже класичний React counter:

function Counter({ children }) {
  const [c, setCounter] = useState(0);
  const increment = () => setCounter(c + 1);
  return (
    <button onClick={increment}>
      {children} {c}
    </button>
  );
}

Єдиний нюанс з ним - він приймає в пропс children, який відмальовує всередині. В середину ми передаємо отакий примітивний компонент:

function ClickMeText() {
  console.log('ClickMeText rendered');
  return <>Clicked: </>;
}

Цей компонент - просто текст, який також містить консоль лог, щоб ми бачили коли він рендериться. В цілому виглядає це так:

const App = () => <Counter>
  <ClickMeText />
</Counter>

Тепер питання: Я запустив сторінку та ТРИЧІ клікнув на каунтер. Скільки ClickMeText rendered я побачу в консолі, за умови що strict mode вимкнено?

1 раз - ставимо ❤️
3 рази - 👍
4 рази - 🔥

З вас смайлики, з мене пояснення)

Почнемо з короткого демо того, скільки разів буде перерендерений наш текстовий компонент😉

А от чому вийшла саме така кількість - питання набагато цікавіше)

То ж чому один раз? На справді, все досить просто

Перше що потрібно зрозуміти це те, що React.children це звичайний пропс, який приймає все що завгодно. Ви можете покласти туди і текст, і масив і ReactNode, як ми робимо в цьому прикладі. ReactNode - в свою чергу, це не наш компонент, це результат обчислення нашого компоненту у формі об'єкту. Ви можете зробити console.log(children) і подивитися що в цього об'єкту в середині.

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

Саме тому ми і бачимо ClickMeText rendered один єдиний раз. Спочатку рендериться <App/>, потім рендериться <ClickMeText/>, потім рендериться <Counter/> в який через пропс потрапляє результат обчислення <ClickMeText/>. Коли ми натискаємо на кнопку, змінюється стейт <Counter/> і він, Counter, обчислюється заново. Але в пропси передаються ті самі значення що й минулого разу.

Ось і уся магія, сподіваюся пояснення вийшло відносно простим.

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

@reactbeginners

😍 Отак от - TypeScript мова року за темпами зростання популярності

За рік TypeScript набрав 1.8%, досяг 15.1% відсотка користувачів і підійшов у притул до лідера. А лідер вгадайте хто? Правильно JavaScript яким користується, наразі, 15.4% розробників.

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

А от якої п'яної миші 1С зріс на 0.1% я зрозуміти не можу 😢

До чого це я? Вчіть TypeScript, він корисний! ❤️‍🔥

Детальну аналітику можна подивитися на DOU

@reactbeginners

Робили давненько і щось захотілося мені повторити, в світлі останніх подій.

Тому запрошую усіх бажаючих, в цей четвер, 22.02, на 19:00 поговорити про вогнепальну зброю для початківців.
Вхід - будь-який донат від 20 грн на збір мого колеги Ігоря Б на машину для ЗСУ.

Поговоримо про:

1. Види зброї в цілому
2. Першу зброю для початківця
3. Отримання дозволу на вогнепальну зброю

Запису не буде, місця обмежені - максимум 15 людей. Запрошення в зум кину в ТГ завтра після обіду.

Якщо у когось є питання накшталт "Чому це фронтендщик щось планує задвигати за зброю" - зможете задати це питання завтра.

💰Банка
✍️Реєстрація

Побачимося завтра

Тут пан Едуард, під відео про Next задав гарне запитання:

Чому next одразу не зробив нормальні компонети, які б рендерилися тільки на клієнті? Навіщо ці танці з бубнами? )) не зрозуміло.

Я саме про це деякий час думав і прийшов до дуже простого висновку, щодо якого хотів би почути і вашу думку.

Моя ідея полягає в тому, що сучасний Next.JS не націлений на інтерактивність як таку. Дивіться самі - з новим оновленням Next.JS всі компоненти, за замовчуванням, перетворюються на серверні. А серверні компоненти взагалі не можуть мати жодної доданої поведінки. Тобто самі розробники нам буквально кажуть - за замовчуванням, всі твої компоненти мають бути статичними!

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

Якщо ж цей підхід прийняти, то все стає набагато простіше:

Не потрібно мучитися зі стейтам, з CSSinJS (інтерактивність же не потрібна), все працює з коробки. А залишки інтерактивності (якісь форми, менюшки, каруселі) можна робити або нативними компонентами, які працюють (use server як раз на це натякає), або окремими мікроелементами які можна просто поставити з NPM, бо екосистема дозволяє.

Що думаєте з цього приводу?

З реєстрацій я бачу що зброя зараз не на часі)

Я теж більше люблю сноуборд або віндсерф та з задоволенням би займався цим (хоча коли ти на 300 метрів зносиш алюмінієву баночку це теж цікаво). Але маємо що маємо, сучасна Україна зараз тяжіє до 5.45 замість Burton.

Тому раджу все ж таки прийти, місць ще вистачає. Повірте буде і цікаво і практично.

Реєстрація
Банка

Друзі, запускаю в пілотному режимі (два тижні) календлі

Якщо вам потрібна порада з #React, або #FrontEnd, або розробкою в цілому - букайте таймслот (понеділок, четвер з 9 по 10 годину)

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

Як проведемо, буду бачити що далі.

🥰Всі слоти на пілот закрили. Але ж і питання ви ставите, мушу вам сказати. Доведеться на вихідних трохи готуватися 😅