Expo - найпростіший спосіб створювати мобільні додатки📱

JavaScript - це неймовірно велика екосистема, на базі якої можна створювати безліч речей, в тому числі й мобільні додатки.

Найпопулярніший спосіб створення додатків - це react-native. Але він може здатися складним для початківців, бо потребує доволі багато налаштувань 😰

І це ідеальний випадок звернути увагу на Expo. Він є оболочкою до react-native та пропонує великий набір сервісів - від ліхтарика до пуш-повідомлень.

Створення мобільного додатку починається зі звичних React та JavaScript.

npx create-expo-app my-app

Майте на увазі, що дана команда встановлює мінімальний набір, навіть без TypeScript.

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

npx create-expo-app -t expo-template-blank-typescript

Expo дає можливість одночасно писати додаток під iOS, Android та веб, використовуючи одну кодову базу.

Також Expo є сервісом, який допомагає робити білди та деплоїти проєкти в стори, такі як Google Play та App Store 💪

Тому для старту вашої мобільної розробки ми рекомендуємо придивитися саме до Expo 🔥

@wannabe_javascript

Гідрація - як оживають сторінки після рендеру на сервері?

У пості про методи рендерингу ми згадували гідрацію в контексті SSR. Тож, що це таке? 🤔

Гідрація в SSR - це процес, в якому HTML, що був згенерований на сервері, оживає на клієнті завдяки JavaScript. Це дозволяє вашому додатку й надалі бути реактивним у браузері, не дивлячись на те, що браузер отримав тільки HTML.

Чому на клієнт потрапляє HTML, який не є реактивним?

У процесі рендерингу ваших компонентів на сервері неможливо передати всі обробники, змінні, функції та подібне на клієнт. Це теж саме, що намагатися передати JS код в GET запиті.

Але оскільки сучасні мета фреймворки, наприклад, Nuxt або Next, мають доступ як до сервера, так і до клієнта, вони можуть проаналізувати, що відрендерив сервер і оживити його тими самими компонентами, які рендерилися на сервері 😵‍💫.

Дуже спрощена версія гідрації:

// серверна частина
import { renderToString } from 'framework';

return renderToString(<MyApp />);

// клієнтська частина
import { hydrate } from 'framework';

hydrate(<MyApp />, document.getElementById('root'));

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

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

Рекомендуємо ознайомитися з поняттям ClientOnly в Nuxt та з Server Components в Next.js, щоб більше зрозуміти, де та що саме вам може знадобитися.

@wannabe_javascript

Новий рік - новий Vue.

Ось і закінчився 2023 рік, а разом з ним - підтримка Vue 2.

24 грудня вийшла версія 2.7.16 Swan Song та 31 грудня Vue 2 офіційно перейшов в статус EOL (End of Life).

Тому всі, хто не встиг перейти на Vue 3, саме час почати міграцію 😉

Vue 2.0 вийшов 7 років тому і з тих пір подарував нам багато нових можливостей для створення додатків. А тепер давайте подивимося, що нам подарувала нова версія Vue:

Vite - один із найпопулярніших бандлерів для JavaScript. Має 4 мільйони скачувань на тиждень.

Vitest - зручний тул для тестування, який прийшов на заміну Jest. Має майже 1.5 мільйони скачувань на тиждень.

unjs - екосистема JavaScript, яка налічує понад 50 пакетів та має загалом майже 250 мільйонів скачувань на тиждень.

nitro - SSR фреймворк, на якому працює Nuxt.

Та ще купа корисного: UnoCSS, Vike, Volar, VitePress, unplugin тощо.

Vue, як один із головних фреймворків сучасного JavaScript, дає нам, розробникам, неймовірно велику екосистему, яка інтегрується з багатьма іншими фреймворками та бібліотеками.

Тому добра конкуренція з React, Angular, Svelte та іншими тільки вдосконалює наш з вами код.

Vue 2. F. 🫡

@wannabe_javascript

Слідкування за об'єктами та їх значеннями?

Ви коли-небудь задумувалися, як можна реагувати на якісь зміни в об'єктах? Наприклад, всередині форми на кожен інпут дані одразу зберігати в базі.

Звичайно, в першу чергу ви подумаєте про useEffect в React чи watch у Vue, але уявимо, що будь-який фреймворк для нас недоступний.

Який нативний спосіб в JavaScript існує для реагування на зміни?

Поганий варіант 👎

Повісити на кожен <input> новий addEventListener('input', () => {}) та всередині надсилати запит.

Проблема 🤔

Якщо ми повісимо debounce на кожен такий addEventListener, то на якомусь моменті деякі дані можуть загубитися, бо немає єдиного стейту даних.

Насправді проблем може бути багато, але debounce найкращий приклад.

Рішення 💡

Створити об'єкт та огорнути його в new Proxy, а кожен <input> просто буде зберігати дані в цьому об'єкті.

const obj = {};
const proxy = new Proxy(obj, {
  set(obj, prop, newVal) {
    // Записуємо дані
    obj[prop] = newVal;

    // Тут можемо надіслати запит на бекенд

    // Кажемо, що все добре
    return true;
  },
});

input.addEventListener('input', ({ target }) => {
  proxy.firstName = target.value;
});

console.log(obj);
// => { firstName: 'Valerii' }

Деякі фреймворки, як Vue 3, використовують Proxy, як головний спосіб реагування на зміни юзера.

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

@wannabe_javascript

TypeScript для фізичних девайсів 📟

Екосистема JavaScript виходить за межі інтернету. Спочатку придумали TypeScript, який перевернув розробку на JS, а тепер ще й з'явився DeviceScript 😱

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

Чи каже вам про щось назва Raspberry Pi? Якщо так, тоді ви вже розумієте, до чого йде діло. 😉 Raspberry Pi - це фізична плата, до якої можна під'єднувати різні речі, такі як:

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

Список девайсів, як і драйверів, неймовірно великий. Тому ми наполегливо рекомендуємо ознайомитися із DeviceScript.

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

Ви тільки уявіть, знаючи лише один JavaScript, ми можемо стільки всього створювати, хіба це не чудово? 🤩

@wannabe_javascript

Як розширити вже існуючий глобальний інтерфейс в TypeScript?

1️⃣ Якщо в TypeScript ви спробуєте записати будь-яку змінну в глобальний об'єкт, то отримаєте помилку:

window.newVariable = 'Hello';
// Property 'newVariable' does not exist

2️⃣ Або нам треба розширити вже існуючий глобальний інтерфейс:

Array.prototype.filterMap = function (callback) {
  return this
    .map(callback)
    .filter((value) => value);
};
// Property 'filterMap' does not exist

3️⃣ Чи якимось чином TS інтерфейс бібліотеки не має опису змінної:

import { userInfo } from 'lib';

userInfo.fullName
// Property 'fullName' does not exist

Для всіх цих кейсів існують способи розширення TypeScript інтерфейсів❗️

1️⃣ В першому прикладі нам допоможе розширення інтерфейсу Window, в нього ми можемо записувати будь-що:

declare global {
  interface Window {
    testVariable: string;
  }
}

2️⃣ Другий приклад розширює існуючий клас Array, бо нам захотілося створити свій метод роботи з масивами:

declare global {
  interface Array<T> {
    filterMap(
      callback: (
        value: T,
        index: number,
        array: T[]
      ) => unknown): unknown[];
  }
}

3️⃣ А якщо нам треба розширити інтерфейс бібліотеки, то код стає більш цікавішим, оскільки нам треба знайти оригінальний інтерфейс, імпортувати його ➡️ і тільки після цього ми зможемо розширяти. Без імпорту така схема працювати не буде:

import { UserInfo } from 'lib';

declare module 'lib' {
  interface UserInfo {
    fullName: string;
  }
}

Глобальні розширення зазвичай створюють в файлах global.d.ts або declarations.d.ts 😉

@wannabe_javascript

Усім привіт! Сьогодні не зовсім навчальний контент, але це напряму з ним повʼязано 😉

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

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

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

⭐️ З нас буде велика подяка у вигляді промокоду на знижку 50% на будь-який наш продукт, які почнуть виходити вже на початку весни.

Заздалегідь дуже дякуємо кожному, хто зможе долучитися і допомогти нам в цьому!

Посилання на опитування: https://forms.gle/S67K6oNvk3ZQPjFs8

Як правильно іменувати гілки та коміти?

Всі ми використовуємо Git, проте як часто ви задумуєтеся, чи правильно ви це робите? 😉

Сьогодні поговоримо про структуроване іменування гілок та комітів, яке дасть змогу в майбутньому без проблем розуміти всю історію проєкту.

Іменування гілок 🤓

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

type/PRJCT-NUM

type - це префікс, замість якого ви підставите тип своєї задачі.

Основними типами є:

📌 feature, bugfix, hotfix, release, docs

Також PRJCT-NUM може замінюватися на назву тікету, наприклад, в Jira або GitHub Issue. А якщо ви працюєте без тікетів, то можна легко придумати зрозумілу назву до вашої задачі.

Приклади коректних імен гілок:

📌 bugfix/WNB-100, feature/add-header, release/1.0.0, hotfix/101

Іменування комітів 😏

Правила іменування комітів схожі на іменування гілок, але з додаванням деталей.

Для найкращої перевірки правильності імен комітів існує Conventional Commits, який може перевіряти ім'я вашого коміту, тож якщо помилка є, він не дасть зробити коміт.

Формат запису такий:

type: message

або

type(SCOPE): message

Основними типами є:

📌 fix, build, chore, ci, docs, style, refactor, perf, test

Приклади коректних імен комітів:

📌 feat(api): implement user login, fix: login button, docs: add login information

@wannabe_javascript

Верстати імейли можна без болі!? 😱

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

Тому в сучасному світі фреймворків і були створені різні допоміжні бібліотеки, як, наприклад, React Email.

Що дає React Email? 🤔

🖥️ CLI

Верстайте імейли з власним дев-сервером, використовуючи знайомі команди, як email dev, email build та email start. А для відправки згенеруйте чистий HTML, написавши email export.

🖥️ Компоненти

На даний момент React Email налічує близько 20 різних компонентів для спрощення верстки. Від чистого HTML та тайтлу до сітки та Markdown.

🖥️ Tailwind

Якщо ви звикли додавати класи, а не стилі, то React Email підтримує Tailwind.

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

🖥️ Різні типи рендеру

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

А ви знали, що Gmail вважається інтернет експлорером серед поштових клієнтів? 🤭

@wannabe_javascript

Headless архітектура - що це таке? 🤔

Останнім часом headless архітектура все частіше починає з'являтися в JavaScript фреймворках, хоча сама вона не є новою.

Як саме можна розуміти слово headless ❓
Прямим перекладом є "безголова", проте в контексті цієї архітектури ми би радше назвали її "безінтерфейсна".

Чому? 🧐

Якщо ви слідкуєте за новими фреймворками, то вже точно чули про shadcn/ui та HeadlessUI, які в минулому році підкорили серця розробників. Вони повністю побудовані на архітектурі headless.

Головна відмінність між звичайним фреймворком - наприклад, Bootstrap, та headless - наприклад, shadcn/ui, в тому, що останній дозволяє повністю переписати інтерфейс так, як тільки вам забажається (на відміну від Bootstrap).

Головний підхід headless архітектури - це дати тільки стан та функціонал, а інтерфейс залежить лише від вас 😉

Ми можемо виділити такі приклади реалізації headless архітектури в світі JavaScript:

📌 Headless CMS під назвою Strapi
📌 Headless UI Frameworks як shadcn/ui та HeadlessUI, в яких ви зможете змінити інтерфейс під себе
📌 Headless Browser у вигляді Puppeteer та Playwright, які з легкістю можна використовувати в Node.js

REST APIs та GraphQL також є гарними прикладами headless архітектури, бо для них frontend є "головою".

@wannabe_javascript

Асинхронні хуки та покращена відправка форм в React? 👩‍💻

В новій, 19-й, версії React анонсували перший асинхронний хук під назвою use та декілька нових хуків для покращеної роботи з формами.

🔖use

Хук use має дві головні відмінності від звичайних хуків:

⚡️може бути асинхронним
⚡️його можна використовувати всередині циклів, умов тощо

При використанні з асинхронними даними вам не потрібно робити компонент async чи вказувати await. React сам зробить resolve цього промісу і поверне дані. Цей підхід ідеально підійде в комбінації з <Suspense>.

import { use } from 'react';

function Message({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Та другий варіант використання хука use - це діставання інформації з контексту в будь-якому місці.

import { use } from 'react';

export function Divider({ show }) {
  if (show) {
    const theme = use(ThemeContext);

    return <hr className={theme} />;
  }

  return <></>;
}

🔖Також покращений DX з формами.

Тепер можна буде використовувати функції при створенні форм в атрибуті action заміть onSubmit та додавання preventDefault.

<form action={handleSubmit} />

І в додаток до цього тепер існує два нових хуки useFormState та useFormStatus, які дозволяють зручніше надсилати та слідкувати за запитами.

const [state, formAction] = useFormState(action, null);

const { pending, data, method, action } = useFormStatus();

Звичайно, це не все, що з'явилося в версії 19, але це найцікавіше 😉

@wannabe_javascript

Що цікавого додали в JavaScript протягом останнього року?

ECMAScript не стоїть на місці, тож новий синтаксис додається увесь час. Багато з нього ви вже використовуєте, а про деякі речі - навіть і не чули 🤫

🔖Object.groupBy

Тепер для того, щоб згрупувати масив по філдам, можна викликати lodash Object.groupBy. Він приймає першим параметром масив, а другим - колбек, в якому можна додати безліч умов для групування, повертаючи стрінгу, або зробити без умов, як в прикладі нижче.

const groupedByType = Object.groupBy([], ({ type }) => type);

🔖toSorted, toSpliced, toReversed

Старі методи sort, splice та reverse треба використовувати з обережністю, так як вони мутують оригінальний масив. На їх заміну прийшли ці 3 нові методи, які роблять все те ж саме, але без мутації 😉

🔖with

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

const name = ['Valerii', 'Strilets'];
const newName = array.with(0, 'Anastasia');
// => ['Anastasia', 'Strilets']

🔖findLast

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

const array = [1, 2, 3];
const first = array.find(num => typeof num === 'number'); // 1
const last = array.findLast(num => typeof num === 'number'); // 3

Це все вже доступно в сучасних браузерах 💪

@wannabe_javascript

Pixel Perfect - це міф для замовників? 🫣

Деякі замовники хочуть від розробників максимальної точності кожного пікселя при перетворенні дизайну в реальний сайт 🔄 Зазвичай це бажання зʼявляється від прочитання статті про Pixel Perfect (PP) або від знайомих 😁

Але скільки ж є вагомих підстав для того, щоб вмовити замовника відмовитися від Pixel Perfect! 😱

1️⃣ Час

Звичайно, найголовніше - це час. При імплементації PP ви витратите набагато більше свого часу на відтворення дизайну, а потім - на будь-яку, навіть дрібʼязкову, переробку. А ваш час - це гроші, які сплачує замовник. Кому від цього краще? 🤔

2️⃣ Екрани

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

3️⃣ Шрифти

Кожен браузер може рендерити шрифти по різному. Ви можете зробити ідеальний PP у себе, потім цей сайт відкриє замовник на іншій ОС або іншому моніторі і шрифт буде виглядати інакше 🥲

4️⃣ Відносні одиниці

Кожен PP вимагає дотримуватися всіх розмірів в пікселях, що абсолютно незручно при написанні стилей. Простіше написати один раз розмір у відносних одиницях, який сам буде підлаштовуватися під різні екрани, ніж створити 5 media query під різні випадки.

5️⃣ Figma

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

Скільки ж болю завдав Pixel Perfect всім розробникам 😥

@wannabe_javascript #PixelPerfect

HTMX дозволяє писати інтерактивний фронтенд без JavaScript? 🤨

Next та Nuxt активно розробляють серверні компоненти. Головна їх ціль - відрендеритись на сервері та віддати готовий HTML на клієнт. Але звичайний HTML вміє надсилати тільки GET чи POST запити та не має інтерактивності.

❗️Саме для таких цілей був створений HTMX. Його основна задача - відмовитись від JS, але мати інтерактивність на клієнті й надалі з великою кількістю функціоналу.

HTMX підключається одним тегом script до вашого HTML і все, він працює. Ніяких бандлерів та всього іншого. При підключенні HTMX сканує весь HTML на наявність атрибутів, які він розуміє.

🔖 hx-get/post/patch/put/delete

Ви можете вказати будь-якому елементу, на який ендпоінт зробити запит при кліці від юзера, наприклад: <div hx-delete="/users/1">

🔖 hx-trigger

А якщо треба робити запит не на клік? 🤨 Тоді додайте атрибут hx-trigger з різними варіантами тригерів, як-от load, mouseenter, keyup або навіть динамічні every 2s, delay:1s тощо.

🔖 hx-target

Головний сенс цих AJAX атрибутів - робити запит та отримувати дані. Але де тут інтерактивність? 🤔 Сенс запитів в тому, щоб отримати від серверу HTML, який буде замінений в тому місці, де ви вкажете. Для цього потрібен hx-target.

За замовчуванням HTML від серверу буде замінений на тому елементі, де був зроблений реквест. Але це легко змінити, вказавши селектор всередину атрибута hx-target.

☄️ Та багато-багато іншого..

Окрім цього всього, HTMX має свої події, вміє працювати з вебсокетами, має логінг, анімації тощо.

Технологія дуже цікава, але поки що ми не бачимо її майбутнього, так як є дуже багато обмежень при додаванні інтерактивності 😢

Ось приклади для ознайомлення.

@wannabe_javascript #htmx