Всем привет!

Буду стримить создание приложения. В это воскресенье, 29.12 в 14:00 GMT+2.

Будем делать трекер привычек на React Native, Expo и Tailwind. Посмотрим что нового с React Native экосистемой (последний раз смотрел туда почти год назад) и проверим удобно ли пользоваться Tailwind на React Native.

Приходите поддержать и пожалуйста подписывайтесь на платформах:

https://www.twitch.tv/feat_initial_commit

https://live.vkvideo.ru/initial_commit

Через два часа начинаем! 🎉

Что удалось сделать на вчерашнем стриме:

1. Развернули новый проект на Expo 52.
2. Добавили Biome для форматирования и линтинга.
3. Попробовали запустить готовый стартер темплейт с Гитхаба на Bun, Expo 51, TypeScript, TailwindCSS - темплейт с ходу не завелся - продолжили со своим проектом.
4. Добавили Nativewind (Tailwind для React Native) и библиотеку компонентов для него - gluestack.
В итоге Таилвинд не завелся.
Судя по ишьюям на ГитХабе, Таилвинд не работает на Expo 52.
5. Попробовали еще один темплейт на Expo 50 и Tailwind - заработало, но классы с цветами все равно не заработали.

В итоге на домашнюю работу мне осталось даунгрейднуть наш проект на Expo 50 и разобраться в чем проблема с классами цветов (почему red-500 не работает, а   font-bold работает), чтобы на следующем стриме можно было начать накидывать компоненты.

Запись стрима постараюсь выложить на днях на YouTube (на Твиче я его не записал😥).

Выложил запись стрима на YouTube -
https://www.youtube.com/watch?v=TsEyG445exI

Всем привет! Сегодня в 14:00 GMT+2 делаем вторую часть стрима. Приходите!

Также будет трансляция на YouTube:

https://youtube.com/@featinitialcommit

https://www.twitch.tv/feat_initial_commit

https://live.vkvideo.ru/initial_commit

Наткнулся на шикарную штуку для визуализации регэкспов - Regexper https://regexper.com/#%5E%28%5C%2F.*%29%3F%5C%2F.*

Строит действительно понятную диаграмму того, что будет происходить в вашем регэкспе.

Для тестирования регэкспов всегда пользовался https://regex101.com/ - но там хоть и есть описание поведения каждого токена, такой диаграммы не хватает.

Вот бы их еще и совместить - проблема регэкспов была бы навсегда решена.

Разработка трекера привычек идёт.

Я взял небольшую паузу и не делился ходом разработки, чтобы разобраться насколько удобно работать с Expo SQLite и что лучше использовать - чистые SQL запросы или все же какой-то ORM.

Я однажды пробовал подключить TypeORM на Expo и это была мука - нужно было включать какие-то экспериментальные флаги, накатывать патчи - в общем работало тогда это очень плохо. Да и приложение довольно простое - в ORM смысла особенно нет.

И тут я решил попробовать Drizzle https://orm.drizzle.team/ и остался в полном восторге.

Drizzle - это так называемый SQL builder - он даёт очень лёгкие абстракции поверх SQL - т.е. вместо того чтобы написать:

SELECT * FROM test

ты пишешь:

db.select().from(test);

тоже самое будет и с джоинами:
вместо:

SELECT * FROM users LEFT JOIN pets ON users.user_id = pets.owner_id

пишешь:

db.select().from(users).leftJoin(pets, eq(users.id, pets.ownerId));

По сути ты пишешь SQL и этот SQL выполняется как есть без лишней магии и дополнительных вычислений. Ну и соответственно производительность запроса через Drizzle такая же как наивный запрос с помощью чистого SQL.

Почему бы тогда не остаться на чистом SQL?

Вот тут самая главная прелесть Drizzle - до того, как начать работать с базой и делать запросы ты описываешь ее схему. И все полученные данные приходят тебе уже с типами.

Плюс удобный инструмент для миграции - если схема поменялась, Drizzle сам мигрирует существующую базу, плюс админка для работы с базой на Expo - если например к сторонней базе ты можешь подключится любым SQL клиентом, то Expo SQLite не поддерживает сторонние подключения, а тут данные можно редактировать в UI - очень удобно.

В субботу установил превью версию трекера на свой телефон и нужно сказать, что один довольный юзер у этого приложения уже есть 😂

Осталось привести в порядок внешний вид и можно будет выкладывать в Google Play (дедлайн у меня 16 число).

Т.к. всю бизнес логику и работу с хранилищем я провел оффлайн, хочу в субботу записать на стриме видос о том, как работать с Expo SQLite с помощью Drizzle - в этот раз долгих размышлений не будет, весь код уже готов - буду просто показывать, что сделано.

Так, что если будет минутка - забегайте:

https://youtube.com/@featinitialcommit

https://www.twitch.tv/feat_initial_commit

https://live.vkvideo.ru/initial_commit

Стрим начнётся в 10:00 GMT+2

Решил попробовать Vitest.

А подтолкнуло меня к этому вот это видео с Артемом Захарченко про Mock Service Worker - https://youtu.be/-g_jGlIbJys?t=2973&si=42y5PRXrxt8iKRCU

Ссылку вставил на конкретный момент про Vitest, но советую посмотреть все видео - там Артем очень подробно рассказывает про архитектуру MSW, его преимущества и вообще про юнит тестирование в целом.

MSW кстати потрясающая библиотека, и по сути должна являться стандартом для мокирования запросов. Первый фронтенд фреймворк, который приходит на ум - это Next, а вот первая библиотека для моков API - должен быть MSW, только так.

Но возвращаясь к Vitest, я очень долго откладывал знакомство с ним, т.к. чтобы попробовать его в рабочем проекте нужно переписать несколько тысяч тестов с Jest (это был бы шикарный опыт, может быть однажды 😁), а просто документация и простые примеры не дадут понять тонкости.

Поэтому буду писать тесты для трекера на Vitest.

Закрытие окна загрузки файлов закрывает родительскую модалку с ролью "dialog"

Представьте вы открыли модальное окно с формой, заполнили кучу данных, и внизу видите поле для загрузки файла (например, опционально, вашего аватара), вы открыли окно загрузки файлов, а потом передумали и нажали Отмена, предполагая, что закроется только окно загрузки файлов.

Вместо этого закрывается и модалка вместе с формой. И вашими данными.

Так вот, оказывается cancel ивент из нативного окна выбора файлов, которое открывается при клике на <input type="file" />, всплывает в родительский <dialog /> или элемент с этой ролью (role="dialog").

И если вы поставили обработчик onCancel на этот элемент - то он будет выполнен.

Судя по всему, изначально, когда этот баг только появился, событие cancel не просто триггерило обработчик, но и натурально закрывало диалог - https://stackoverflow.com/questions/76372090/cancel-input-file-close-dialog-element. Сейчас же это поведение пофиксили, но обработчик все равно вызывается - https://jsfiddle.net/artabr/b6k4r19o/.

Зачем так сделано - до конца непонятно, ведь отменяется вложенный диалог, который мы по сути даже не рендерим и никак на него не влияем. А событие триггерится в родительском, в том же месте, где и его собственное событие отмены. Единственный положительный момент, что target в событии все равно указывает на наш input и хотя-бы позволяет отфильтровать это событие и не выполнять те действия, которые мы выполняем при закрытие основного диалога.

Поведение на мой взгляд очень сильно похоже на баг, по крайней мере крайне неочевидно.

А началось все с безобидного добавления role="dialog" - спасибо WCAG 😁

Вот это действительно стоит посмотреть.

Ни кто иной как Matt Pocock сделал курс по MCP.

Его вклад в JS экосистему сложно переоценить - XState, Total TypeScript и всегда очень качественные обучающие видео.

Для меня это значит две вещи: MCP - это действительно штука, которую стоит изучить подробнее. И то, что теперь можно сделать это без лишней шелухи, с грамотным объяснением от Мэтта.

https://www.aihero.dev/model-context-protocol-tutorial

Что по трекеру?

Изначально идея была лишь в том, чтобы выложить в Google Play хоть какое-то приложение.

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

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

В общем планов много, да и как-то прикипел я к этому проекту. Прикольно наблюдать как он из простейшей поделки на Expo Go становится взрослым приложением, у которого есть своя страничка на Google Play. А дальше ведь еще больше всего.

А еще проект решил поддержать мой товарищ - UI/UX дизайнер. И теперь приложение будет еще и приятным на вид и удобным в использовании.

Понятное дело фронт работы значительно увеличился, поэтому переносим сроки релиза - предварительно на конец июня.

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

Вся разработка в опен сорсе. Кроме приложения ещё есть классические фронт задачи. Из приоритетного уже понятно, что нужно делать мультиязычный лэндинг и блог на Next.js.

Только NX нормально работает с Expo

Выбирал тулинг для монорепо - появляются кастомные компоненты, которые хотелось бы релизить отдельно от основного приложения, да и веб версия когда нибудь появится.

Сейчас существует несколько вариантов для организации монорепо - нативный функционал бандлеров (NPM/Yarn/PNPM Workspaces), NX и хайповый Turborepo.

Мой стандартный выбор - это NX. Обожаю NX.

Но тут решил посмотреть, что же предлагает Turborepo. Turbo используют популярные темплейты типа t3-stack, вообщем-то все темплейты, которые я нашёл, использовали Turbo - думаю, наверное, должно работать хорошо. 

И оно работает. До тех пор пока не делаешь собственный дев билд с помощью prebuild. С Expo Go работает прекрасно, как только делаешь пребилд - все разваливается. А без пребилда по сути нельзя делать нормальные приложения.

В моем случае билд не собирается, потому что при сборке в Turbo откуда-то появляется старая версия Котлина. Есть ещё и другие приколы - типа в Турбо нужно прямо указывать в конфиге какие энв переменные нужно передавать в билд (например ANDROID_HOME) - зачем, я так и не понял - но это не баг конечно, скорее скилл ишью с моей стороны, они решили сделать именно так, и в доке это прописано. Просто странно.

В NX в случае с Expo не работает терминал Expo CLI - не работают шорткаты a, r, shift+m и т.д. Но если запускать напрямую, не через NX CLI - то все прекрасно работает.

И вот тут основная прелесть NX. По сути если упростить, то NX сейчас - это утилита, которая раскидывает твои проекты по папкам, и корректно настраивает пути в tsconfig. Все, после этого ты можешь пользоваться своими проектами как обычно. И только если это требуется, сверху уже можно добавлять кэшинг, общий конфиг линтеров, зависимости между задачами и т.д. У NX есть куча аддонов, как от самой команды NX, так и от коммьюнити, которые позволяют расширять функционал.

В моем случае проект также работает на Bun, с Biome в качестве линтера, и забирает компонент с библиотеки, которая будет отдельным пайплайном публиковаться в NPM. Просто теперь этим стало чуть удобнее управлять.

К сожалению, релиз сегодня отменяется - Курсор удалил весь мой код