MiniApp Sturtup (ч. 1)
В условиях тотальной нехватки времени в выходные начал микро-проект.
- Telegram Mini App
- React / Vite / NodeJS / Docker / DevContainer / React Router / Тесты / AI разработка.
Зачем?
- Надо отрабатывать практику использования AI
- Надо выяснять границы применимости AI и его слабые и сильные стороны
- Хочу допилить свои JS проекты (Роутер для Express.JS / Мигратор / Фреймворк для JS приложений.
День первый
- Зафиксировал желаемую структуру проекта
- Инициализировал Фронтенд
- Оформил Docker и DevContainer
Проблемы: 1️⃣ Cursor не захотел запускать DevContainer 🤷 Не хочу погружаться. Прыгаю между редакторами.
2️⃣ Yarn настроил на использование node_modules. Так проще дать редактору информацию о типах. Не было времени погружаться.
День второй
- Поставил свой Holy Grail Layout. AI перевел его в React код
Проблемы: 1️⃣ AI не хочет следовать всем правилам, которые я ему подсовываю в контекст. Постоянно что-то забывает. Постоянно контролирую. Постоянно требую доделать.
В условиях тотальной нехватки времени в выходные начал микро-проект.
- Telegram Mini App
- React / Vite / NodeJS / Docker / DevContainer / React Router / Тесты / AI разработка.
Зачем?
- Надо отрабатывать практику использования AI
- Надо выяснять границы применимости AI и его слабые и сильные стороны
- Хочу допилить свои JS проекты (Роутер для Express.JS / Мигратор / Фреймворк для JS приложений.
День первый
- Зафиксировал желаемую структуру проекта
- Инициализировал Фронтенд
- Оформил Docker и DevContainer
Проблемы: 1️⃣ Cursor не захотел запускать DevContainer 🤷 Не хочу погружаться. Прыгаю между редакторами.
2️⃣ Yarn настроил на использование node_modules. Так проще дать редактору информацию о типах. Не было времени погружаться.
День второй
- Поставил свой Holy Grail Layout. AI перевел его в React код
Проблемы: 1️⃣ AI не хочет следовать всем правилам, которые я ему подсовываю в контекст. Постоянно что-то забывает. Постоянно контролирую. Постоянно требую доделать.
👍3
MiniApp Sturtup (ч. 2)
День третий
Навигационный блок. Тесты, тесты, тесты.
AI для программистов был придуман только ради того, чтобы писать тесты. Пока это единственное, что не разочаровывает и вызывает тотальное одобрение и радость.
Требуйте от ваших программистов 100% покрытия тестами.
Они все равно и раньше их не писали. AI точно не напишет хуже. А разрабатывать через AI без тестов просто невозможно.
Выводы после 3-х дней
1️⃣ Надо почитать подробнее про правила для AI — не вижу того, что AI строго им следует. Он просто половину пропускает.
2️⃣ Запуск проекта, где нет готовой кодовой базы — это боль. AI не знает что ты хочешь. Часть ответов рандомные, часть ответов ужасного качества, часть ответов по старым версиям библиотек.
На данный момент все что я читал в блогах и твиттерах о практике использования AI кажется на 95% чушью.
Чем дальше в лес, тем тупее кажется AI.
Да, очень помогает. Но по сути — это просто новый гугл с мощной шаблонизацией.
Я отменяю отмену программистов.
День третий
Навигационный блок. Тесты, тесты, тесты.
AI для программистов был придуман только ради того, чтобы писать тесты. Пока это единственное, что не разочаровывает и вызывает тотальное одобрение и радость.
Требуйте от ваших программистов 100% покрытия тестами.
Они все равно и раньше их не писали. AI точно не напишет хуже. А разрабатывать через AI без тестов просто невозможно.
Выводы после 3-х дней
1️⃣ Надо почитать подробнее про правила для AI — не вижу того, что AI строго им следует. Он просто половину пропускает.
2️⃣ Запуск проекта, где нет готовой кодовой базы — это боль. AI не знает что ты хочешь. Часть ответов рандомные, часть ответов ужасного качества, часть ответов по старым версиям библиотек.
На данный момент все что я читал в блогах и твиттерах о практике использования AI кажется на 95% чушью.
Чем дальше в лес, тем тупее кажется AI.
Да, очень помогает. Но по сути — это просто новый гугл с мощной шаблонизацией.
Я отменяю отмену программистов.
👍6
Password Manager
Чтобы пристреляться к реализации проектов с помощью AI я решил сделать простой self-hosted менеджер паролей.
Тут несколько интересов.
1) Сделать проект исключительно на NodeJS стеке.
2) Обкатать свой роутер-фреймворк для бекенда.
3) Обкатать процесс работы с AI и собрать коллекцию рецептов-правил для AI.
4) Обкатать работу с Telegram Mini App.
5) Собрать полный комплект инструментов для реализации проектов средней руки.
Есть еще идеи и задачи, но пока даже думать об этом не хочется. Времени очень мало. Когда справлюсь даже с минимальным планом — не понятно.
Буду замерять время, фиксировать прогресс. Посмотрим что получится.
Чтобы пристреляться к реализации проектов с помощью AI я решил сделать простой self-hosted менеджер паролей.
Тут несколько интересов.
1) Сделать проект исключительно на NodeJS стеке.
2) Обкатать свой роутер-фреймворк для бекенда.
3) Обкатать процесс работы с AI и собрать коллекцию рецептов-правил для AI.
4) Обкатать работу с Telegram Mini App.
5) Собрать полный комплект инструментов для реализации проектов средней руки.
Есть еще идеи и задачи, но пока даже думать об этом не хочется. Времени очень мало. Когда справлюсь даже с минимальным планом — не понятно.
Буду замерять время, фиксировать прогресс. Посмотрим что получится.
👍3🔥1
MiniApp Sturtup (ч. 3)
День третий
В проект главное заложить основные инструменты и архитектуру.
Хоть проект и небольшой, но в нем будет все, что требуется проекту любой сложности и размера.
Самое важное не упустить установку всех возможных инструментов тестирования и проверок.
В нашем случае это ESLint, TypeScript, Prettier, Jest (Unit tests), StoryBook.
Тестирование различного вида это то, что позволит заложить в проект тот фундамент, на котором проект будет развиваться.
Упущение этого момента в начале ведет к катастрофическому накоплению тех. долга.
Тестирование заставляет и думать и декомпозировать проект совсем иначе.
Как бы странно это не звучало, настоящая стабильность и свобода в самоограничении.
Еще несколько дней потребуется уделить фронту. Нужно сделать все UI заготовки, чтобы потом не отвлекаться при переключении на бэк.
Интеграции будет и так много, отработаю сперва одну часть.
Online шоу в самом разгаре.
День третий
В проект главное заложить основные инструменты и архитектуру.
Хоть проект и небольшой, но в нем будет все, что требуется проекту любой сложности и размера.
Самое важное не упустить установку всех возможных инструментов тестирования и проверок.
В нашем случае это ESLint, TypeScript, Prettier, Jest (Unit tests), StoryBook.
Тестирование различного вида это то, что позволит заложить в проект тот фундамент, на котором проект будет развиваться.
Упущение этого момента в начале ведет к катастрофическому накоплению тех. долга.
Тестирование заставляет и думать и декомпозировать проект совсем иначе.
Как бы странно это не звучало, настоящая стабильность и свобода в самоограничении.
Еще несколько дней потребуется уделить фронту. Нужно сделать все UI заготовки, чтобы потом не отвлекаться при переключении на бэк.
Интеграции будет и так много, отработаю сперва одну часть.
Online шоу в самом разгаре.
👍2
AI rules, Storybook
День четвертый.
Был час позаниматься моим мини проектом.
1️⃣ Как только был установлен Storybook для UI — мгновенно всплыло несколько моментов по реализации компонентов. Сделал фиксы. Переработал подходы.
И это на самом первом, даже нулевом этапе.
Затягивать с установкой и использованием линтеров, чекеров, форматтеров, тестов и прочих сторибуков нельзя. Это важная часть технологического процесса.
Чуть запоздал — и все. Будешь плавать в мало поддерживаемом коде. Будет больно и тоскливо. А нам этого не надо.
2️⃣ Подразобрался с правилами для AI.
Тема совсем новая. В среднем все актуальные публикации месячной давности.
По новому формату правил — буквально неделя. О работоспособной практике мало кто рассказывает. Так что я вовремя заскакиваю в этот поезд.
Пока остальные ребята будут раскачиваться, я хочу наработать правила для AI и обкатать их.
Будет весело, если вы там, по ту сторону экрана уже построили свой IT отдел на основе GPT ботов, а я тут вкатываюсь в тему 🤣 А как у вас?
День четвертый.
Был час позаниматься моим мини проектом.
1️⃣ Как только был установлен Storybook для UI — мгновенно всплыло несколько моментов по реализации компонентов. Сделал фиксы. Переработал подходы.
И это на самом первом, даже нулевом этапе.
Затягивать с установкой и использованием линтеров, чекеров, форматтеров, тестов и прочих сторибуков нельзя. Это важная часть технологического процесса.
Чуть запоздал — и все. Будешь плавать в мало поддерживаемом коде. Будет больно и тоскливо. А нам этого не надо.
2️⃣ Подразобрался с правилами для AI.
Тема совсем новая. В среднем все актуальные публикации месячной давности.
По новому формату правил — буквально неделя. О работоспособной практике мало кто рассказывает. Так что я вовремя заскакиваю в этот поезд.
Пока остальные ребята будут раскачиваться, я хочу наработать правила для AI и обкатать их.
Будет весело, если вы там, по ту сторону экрана уже построили свой IT отдел на основе GPT ботов, а я тут вкатываюсь в тему 🤣 А как у вас?
👍3
Mini App
День 5-ый
Времени катастрофические не хватает, но некоторые результаты есть. Были запущены
✔️ Vite
✔️ React / TypeScript
✔️React Router
✔️ SCSS / BEM
✔️ Docker/Compose/DevContainer
✔️ Jest / React Testing Lib
✔️ ESlint
✔️ Prettier
✔️ Storybook
✔️ Holy Grail Layout (React)
✔️ Простая базовая верстка
✔️ I18n
✔️ Базовые AI rules
Главные блокеры:
🔻i18next в тестах
🔻ENV переменные в тестах
Чтобы тесты нормально работали нужно вальсировать с разнородными опциями TypeScript в согласии с Vite / RTL для разных окружений. Отваливается то одно, то другое.
Надо прыгать по версиям и подбирать параметры чтобы все работало. Или искать обходные пути, которые тоже есть.
AI тут не помогает. В зоопарке и непредсказуемости поведения и взаимодействия разнородных решений помогает или удача, или trade offs и workarounds.
Будет время — поразбираюсь.
День 5-ый
Времени катастрофические не хватает, но некоторые результаты есть. Были запущены
✔️ Vite
✔️ React / TypeScript
✔️React Router
✔️ SCSS / BEM
✔️ Docker/Compose/DevContainer
✔️ Jest / React Testing Lib
✔️ ESlint
✔️ Prettier
✔️ Storybook
✔️ Holy Grail Layout (React)
✔️ Простая базовая верстка
✔️ I18n
✔️ Базовые AI rules
Главные блокеры:
🔻i18next в тестах
🔻ENV переменные в тестах
Чтобы тесты нормально работали нужно вальсировать с разнородными опциями TypeScript в согласии с Vite / RTL для разных окружений. Отваливается то одно, то другое.
Надо прыгать по версиям и подбирать параметры чтобы все работало. Или искать обходные пути, которые тоже есть.
AI тут не помогает. В зоопарке и непредсказуемости поведения и взаимодействия разнородных решений помогает или удача, или trade offs и workarounds.
Будет время — поразбираюсь.
👍2
Composer Agent | Cursor, Claude Sonnet
Ну вот и я нашел причину запустить Composer Agent
- Я создал пустой каталог
- Я закинул в каталог Докер компоуз файл и DevContainer файл
- Перешел в режим Composer Agent
Запросы формата:
1️⃣ Создай мне Vite / React / TS / Yarn приложение
Агент работает до получения результата.
2️⃣ Добавь i18n
Агент работает до получения результата.
3️⃣ Добавь несколько тестовых страниц с интернационализацией
Агент работает до получения результата.
4️⃣ Поставь Jest и RTL и напиши тесты
Агент работает до получения результата.
🎉 За 30 минут агент сам писал код и реагировал на ошибки в консоли.
Только несколько раз я подсказывал что нужно сделать.
Агент наткнулся на ошибку, которая была для меня блокером и нашел для нее решение.
Я это решение перенесу в основной проект. Несколько находок тоже перенесу.
Работа в режиме агента мне понравилась. Даже если за деньги, то ДА!
Ну вот и я нашел причину запустить Composer Agent
- Я создал пустой каталог
- Я закинул в каталог Докер компоуз файл и DevContainer файл
- Перешел в режим Composer Agent
Запросы формата:
1️⃣ Создай мне Vite / React / TS / Yarn приложение
Агент работает до получения результата.
2️⃣ Добавь i18n
Агент работает до получения результата.
3️⃣ Добавь несколько тестовых страниц с интернационализацией
Агент работает до получения результата.
4️⃣ Поставь Jest и RTL и напиши тесты
Агент работает до получения результата.
🎉 За 30 минут агент сам писал код и реагировал на ошибки в консоли.
Только несколько раз я подсказывал что нужно сделать.
Агент наткнулся на ошибку, которая была для меня блокером и нашел для нее решение.
Я это решение перенесу в основной проект. Несколько находок тоже перенесу.
Работа в режиме агента мне понравилась. Даже если за деньги, то ДА!
👍3
Мнение достопочтенных джентельменов
Тред от 11 февраля. Сегодня 13.
Что я вам имею сказать.
Буст нереальный. Как бы я не ныл о слабых сторонах AI — если принять эту новую парадигму работы и научиться ей пользоваться, то результат впечатляющий.
Я говорю именно о практике написания кода. Те когда ты натурально имеешь виденье того, как код должен быть устроен, как он должен функционировать и знаешь как построить методологию использования AI.
Другое дело, что пока никто эту самую методологию не знает и мы все похожи на слепых котят, которые пытаются сделать свои первые робкие шаги и нащупать дорожку.
Если вы знаете каналы где рассказывают о рутинной практике использования AI — дайте знать.
Если вы сами активно используете — тоже дайте знать. Расскажите о своей практике.
Забавно. Человек, который меня толкнул на эту скользкую дорожку, кажется несколько отстал от меня в плане наработки практики использования AI и новых подходов.
Тред от 11 февраля. Сегодня 13.
Что я вам имею сказать.
Буст нереальный. Как бы я не ныл о слабых сторонах AI — если принять эту новую парадигму работы и научиться ей пользоваться, то результат впечатляющий.
Я говорю именно о практике написания кода. Те когда ты натурально имеешь виденье того, как код должен быть устроен, как он должен функционировать и знаешь как построить методологию использования AI.
Другое дело, что пока никто эту самую методологию не знает и мы все похожи на слепых котят, которые пытаются сделать свои первые робкие шаги и нащупать дорожку.
Если вы знаете каналы где рассказывают о рутинной практике использования AI — дайте знать.
Если вы сами активно используете — тоже дайте знать. Расскажите о своей практике.
Забавно. Человек, который меня толкнул на эту скользкую дорожку, кажется несколько отстал от меня в плане наработки практики использования AI и новых подходов.
👍6
Mini App
День 6.
Для того небольшого времени, что я уделяю мини проекту - результаты отличные.
Вырисовывается прототип проекта.
Много решений приходится тщательно выверять.
Иногда AI угадывает что нужно. Иногда безбожно тупит.
В любом случае количество сгенерированного, приличного качества кода очень радует.
Сам AI не способен что-то серьезное реализовывать, но как экскаватор против лопаты выдает отличные объемы.
Что и куда копать, он конечно не знает и не понимает.
Постепенно вырисовывается прототип.
Технические задачи решаются. AI работает.
Я никуда не тороплюсь. У меня никаких дедлайнов.
Где-то я иду на сделку и принимаю "плохой код", где-то я чищу руками, где-то трачу время на отладку правил.
День 6.
Для того небольшого времени, что я уделяю мини проекту - результаты отличные.
Вырисовывается прототип проекта.
Много решений приходится тщательно выверять.
Иногда AI угадывает что нужно. Иногда безбожно тупит.
В любом случае количество сгенерированного, приличного качества кода очень радует.
Сам AI не способен что-то серьезное реализовывать, но как экскаватор против лопаты выдает отличные объемы.
Что и куда копать, он конечно не знает и не понимает.
Постепенно вырисовывается прототип.
Технические задачи решаются. AI работает.
Я никуда не тороплюсь. У меня никаких дедлайнов.
Где-то я иду на сделку и принимаю "плохой код", где-то я чищу руками, где-то трачу время на отладку правил.
🔥4
Старый дракон сломал зуб
Несколько постов выше я рассказывал вам про интеграцию Vite в Ruby/Rails приложение.
Это правда не сложно:
1️⃣ сделать авто запуск Vite при запуске Rails
2️⃣ Модифицировать rake assets:precompile для проды
3️⃣ Написать пару хелперов для вставки ассетов на страницу в Dev и Prod режимах.
4️⃣ Для особо упоротых типа меня сделать Proxy Middleware, чтобы все выглядело так, словно работает на одном хосте и порту.
Я довольно быстро сделал это все. До момента вывода в продакшн все было идеально.
На последнем этапе я выяснил, что разбор манифеста это не очень-то хорошо описаный процесс. И к нему есть вопросики.
Мне показалось, что моя реализация этого разбора на сложном проекте может быть довольно опасным занятием.
Качественный разбор Vite манифеста — это дело практики и тестирования. А времени на это у меня нет.
Мне достаточно хорошо платят, чтобы я вовремя предупреждал о возможных ограничениях и проблемах там, где у меня нет уверенности в хорошем результате. А тут у меня ее не было.
Несколько постов выше я рассказывал вам про интеграцию Vite в Ruby/Rails приложение.
Это правда не сложно:
1️⃣ сделать авто запуск Vite при запуске Rails
2️⃣ Модифицировать rake assets:precompile для проды
3️⃣ Написать пару хелперов для вставки ассетов на страницу в Dev и Prod режимах.
4️⃣ Для особо упоротых типа меня сделать Proxy Middleware, чтобы все выглядело так, словно работает на одном хосте и порту.
Я довольно быстро сделал это все. До момента вывода в продакшн все было идеально.
На последнем этапе я выяснил, что разбор манифеста это не очень-то хорошо описаный процесс. И к нему есть вопросики.
Мне показалось, что моя реализация этого разбора на сложном проекте может быть довольно опасным занятием.
Качественный разбор Vite манифеста — это дело практики и тестирования. А времени на это у меня нет.
Мне достаточно хорошо платят, чтобы я вовремя предупреждал о возможных ограничениях и проблемах там, где у меня нет уверенности в хорошем результате. А тут у меня ее не было.
👍2
Как разрулить?
1️⃣ с клиентом мы договорились, что в условиях ограниченного времени нам нужен план B. И если не удастся использовать кастомную интаграцию, то мы всегда сможем вернуться к популярному решению.
2️⃣ Из кастомной интеграции не было уверенности только в хелперах вставки кода на страницу. Чем переизобретать велосипед, лучше взять готовое решение. Это и сделаем.
Итого:
Только один фрагмент задачи (да, важный) — придется на какое-то время использовать из ViteRuby.
Все остальное в чистом виде фронтового инструментария.
Разбор Vite манифеста в ViteRuby в традиции Ruby/Rails экосистемы неоправданно переусложнен.
Я даже написал на него свои тесты, но явно, чтобы учесть все детали нескольких дней может быть не достаточно. Вернусь к задаче, когда будет ресурс и потребность.
Будет интересно довести ее до конца.
Я не ожидал, что разбор Vite манифеста нужно делать руками. в Webpack было проще. Но это было много лет назад.
1️⃣ с клиентом мы договорились, что в условиях ограниченного времени нам нужен план B. И если не удастся использовать кастомную интаграцию, то мы всегда сможем вернуться к популярному решению.
2️⃣ Из кастомной интеграции не было уверенности только в хелперах вставки кода на страницу. Чем переизобретать велосипед, лучше взять готовое решение. Это и сделаем.
Итого:
Только один фрагмент задачи (да, важный) — придется на какое-то время использовать из ViteRuby.
Все остальное в чистом виде фронтового инструментария.
Разбор Vite манифеста в ViteRuby в традиции Ruby/Rails экосистемы неоправданно переусложнен.
Я даже написал на него свои тесты, но явно, чтобы учесть все детали нескольких дней может быть не достаточно. Вернусь к задаче, когда будет ресурс и потребность.
Будет интересно довести ее до конца.
Я не ожидал, что разбор Vite манифеста нужно делать руками. в Webpack было проще. Но это было много лет назад.
👍2