Hotwire и Rails #1 | Stimulus: скромный фреймворк для front-end
Vložit
- čas přidán 30. 05. 2024
- Это первый урок по Hotwire, в рамках которого мы настроим рабочую среду и рассмотрим фреймворк Stimulus на практике, узнав обо всех его основных особенностях: controllers, targets, values, classes, events.
Таймкоды:
00:00 Что такое Hotwire?
02:30 Настройка рабочей среды
05:00 Демо-данные
08:00 Контроллеры Stimulus
11:10 Функции обратного вызова
13:00 Привязка событий
15:40 Вывод сообщений типа "toast"
17:00 Взаимодействие между двумя контроллерами
21:40 Создание элементов на лету и targets
26:45 Редактируемые элементы
32:30 Назначение классов (classes)
35:00 Сохранение изменений
36:10 Использование fetch API и CSRF
37:50 Использование values
40:40 Добавление formdata
42:40 Проверка
44:20 Заключение
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам: / @ilyabodrovkrukowski
Boosty: boosty.to/bodrovis
Patreon: / bodrovis
DonationAlerts: www.donationalerts.com/r/bodr...
Аккаунт Ethereum (ETH), Arbitrum, Polygon, BNB, USDT, TRX, BUSD: 0x719C2d2bcC155c85190f20E1Cc3710F90FAFDa16
Исходный код github.com/bodrovis-learning/...
Канал Telegram: t.me/dev_in_ruby_colors
Наш чат в Telegram: t.me/joinchat/MxYT6-01eeA1NTYy
Мой сайт: bodrovis.tech
как всегда, в течение просмотра видео, поставить лайк хочется несколько раз!
Спасибо огромное за Ваш труд!
Действительно, Stimulus очень оживляет приложения на монолитной Рельсе без применения всяких реактов и относительно легко и контроллируемо.
Единственное, как мне показалось, про увеличении кодовой базы приложения, количество стимулус-контроллеров тоже возрастает и не всегда их можно перезаюзать. Также количество навешанных контроллеров и контроллер-экшнов на одной вьюхе может быть уже не нормальной.
Мне, честно говоря, стимулус сразу не понравился по выше-описанным причинам, но потом, легкость его использования все-таки берет верх над минусами.
Каждой технологии есть свое место. Как мне видится, для маленьких и средних приложений, стимулус-контроллеры - находка и классный инструмент.
Думаю, так и есть. Это нишевая штука, но с rails отлично идёт
Спасибо Илья за Ваш талант! на бесплатных видео все достпунее чем практически у всех за деньги
На здоровье
Илья, ОГРОМНОЕ СПАСИБО за ваш труд! Отличные уроки всегда и этот в том числе! Очень подробно и понятно все как всегда.
Здоровья вам!
благодарю!
Спасибо Илья за ваш труд! не перестаю пересматривать ваши видосы.
Благодарю вас
Как всегда мощный, концентрированный урок от Ильи!
Очень много полезного материала. Браво Илья!
Благодарю.
Вставлю некоторые "непутёвые" заметки, может быть пригодятся....
1) Для тех кто будет играться с кодом не на платформе windows:
1.1 В файлах bin/setup, bin/rails, bin/rake сменить
#!/usr/bin/env ruby.exe
на
#!/usr/bin/env ruby
1.2 Возможно придется сделать исполняемыми, командой типа:
chmod a+x bin/rails
2) Быструю установку из репо сделать можно так:
bin/setup
bin/rails db:seed
3) Для генерации стимулус контроллера есть более простой способ:
bin/rails g stimulus имя_контроллера
4) Не совсем ясно, зачем для каждого изображения создается отдельный контроллер images? Контроллера в этом случае достаточно одного, назначив его родителю списка. При подключении он будет проходить forEach по списку потомков, присваивая им необходимые теги и обрабатывая события.
5) Для работы с бэкендом настоятельно рекомендую использовать встроенную в rails библиотеку '@rails/request.js'. Великолепно интегрируется, существенно сокращает код запросов.
6) Кроме указанных в видео способов взаимодействия между контроллерами, а это иногда очень необходимо, есть еще один (из внутреннего АПИ стиумулус-контроллера):
connect() {
this.element[this.identifier] = this)
}
После того как в целевом контроллере прописали эту конструкцию, мы можем вызвать любую функцию из этого контроллера, указав DOM элемент, затем через точку имя стимулус контроллера, а затем - также через точку - имя функции из этого контроллера. Звучит сложно, но на самом деле, все очень даже просто.
PS Для контроллеров у которых название составное (мой_супер_controller.js) этот код будет выглядеть немного по-другому.
Кстати, есть и еще один способ организации взаимодействия - испольвание глобального windows.
Допустил ошибку. Правильно так:
connect() {
this.element[this.identifier] = this
}
Для сложный имен контроллера:
connect() {
this.element[ (str => { return str
.split('--')
.slice(-1)[0]
.split(/[-_]/)
.map(w => w.replace(/./, m => m.toUpperCase()))
.join('')
.replace(/^\w/, c => c.toLowerCase())
}
)(this.identifier)
] = this
}
Вызов функции из контроллера будет выглядеть так:
document.querySelector("#filters-price-section").priceSelect.fullPriceRangeReset()
priceSelect - price_select_controller.js ('price-select'), а "fullPriceRangeReset()" - функция из него.
Спасибо, очень подробно и интересно :) Да, можно было сделать один контроллер, но хотелось показать, что можно один привязывать ко многим и они вроде как будут независимы. Но вообще всё по делу
@@IlyaBodrovKrukowski Контроллер для каждого image действительно упрощает работу с target для каждого из них, но какой ценой? Мы плодим для каждого пользователя кучу одинаковых объектов: контроллеров и таргетов, да еще и с одинаковыми именами. В тоже время для решения задачи адресации таргетов можно использовать стандартный event.target или динамическую адресацию.
@@ledockol Это правда, я имею ввиду просто в целях демонстрации
Супер! Спасибо за твоё творчество и помощь в обучении)
Вот это спасибо! От всех рубистов!
Спасибо большое за урок! Хотелось бы еще увидеть как создавать фильтры и сортировки в rails. Вещь часто распространенная, однако какого-то однозначного хорошего варианта написания кода для данных функций не видел. Кто-то пишет, что нужно все делать на фронтенде, а это значит js. Но если подумать, пичкать каждую запись кучей id для каждого поля - не лучшая идея. Кто-то говорит, что сразу запросы с бд, но это ведь, очевидно, нагрузка на бд, а значит так себе идея. К тому же фильтры и сортировки бывают по связанным полям, что сильно усложняет все эти процессы. Вот хотелось бы узнать как писать хороший код для данных функций веб-приложений на rails.
круто, спасибо. чем-то похоже на htmx, по крайней мере принцип
похоже неплохая альтернатива vue 👍
Илья, очень вам признателен за ваш труд и выражаю большое уважение! Я всё откладывал освоение hotwire, и вот с вашей помощью получилось, наконец, окунуться в тему! Нет ли у вас в планах сделать цикл видео по strada и вообще тематику разработки для мобил на рельсе подсветить?
Честно говоря, пока не особо, но посмотрим
Илья спасибо большое!
Спасибо за ваш труд!
Отличное видео, спасибо!
На здоровье
Очень круто
Большое спасибо за видео
Насичений та цікавий урок, дякую!
Спасибо!
Спасибо за уроки!
Спасибо очень классный курс, продолжайте нам очень нравится!
Спасибо за ролик, очень полезно )
Спасибо, вам огромное
Лучший контент
Благодарю!
👍
Урок для опытных разработчиков, новички отдыхают
Да, это правда, тут есть относительно сложные вещи. Для новичков есть плейлист просто о rails, без stimulus czcams.com/video/tqSkBmODHBk/video.html
Спасибо за учебный материал!
Но стоило бы упомянуть, что содержимое файла "package.json" надо дополнить из выхлопа консоли (причем в двух местах)... это не очевидно -- чуть мозгом не тронулся... ))
И "@hotwired/turbo-rails" тоже автоматом в этот файл не прописывается ((
Обратите внимание кто будет идти по видео! )
@@user-pw6fx3qg5l На здоровье! Вообще, это странно. Если просто создать новое приложение rails 7, он должен дописать туда и turbo тоже, если только вы явно не указали, что turbo не нужен. Если это не так, то звучит, как баг
ДАВАЙ ЕЩО!
Стараюсь :)
здравствуйте, сделайте пожалуйста ролик с работой и редактированием pdf, через json или какой либо другой способ. Может ли Ruby работать с таким сложным форматом как pdf или нужна библиотtка или Gem написанный на С и С++? Есть ли способ работать на чистом РУБИ или только Rails? Спасибо за контент и ответ.
Редактировать никогда не пробовал. Генерировать pdf - ради бога, это реально
Видео шикарное, возможно кто то сталкивался с такой проблемой что stimulus controller обновляеться только после команды rake assets:precompile? Или это стандартное поведение, в браузерной консоли ошибок нету, логи тоже не выдают никакие ошибки, спасибо!
В development такого быть не должно. В production - дело другое
@@IlyaBodrovKrukowski нашел проблему, неправильно сервак стартовал, делал через привычное rails s, а надо было bin/dev или как у Вас, а ларчик просто открывался))))))
@@404alex_eu А, да, это важно, иначе не подрубится hot reload
Один вопрос , а чего не importmap ((( ну как так то
Мне он кажется сыроватым ещё, если честно
@@IlyaBodrovKrukowski , а я вот третий час плачу! Давай прейскурант публикуй на частные уроки!
@@ddd2283 Сейчас не провожу уроки, увы. Но потом будет и про importmap, просто через какое-то время
@@IlyaBodrovKrukowski Ну, я конечно поплачу и разберусь в итоге, но если частная практика будет возможна или даже в составе групп , я бы поддержал это!
@@ddd2283
По итальянки страда это дорога
а вот у нас как-то иначе. Помните, были ещё стихи такие: "В полном разгаре страда деревенская?". Вот оно отсюда
@@IlyaBodrovKrukowski очень много слов транзитировали с латыни в русский, я после того как изучил итальянский очень удивился
Спасибо!