Information Technology professional with 25+ years expertise in application design and architecture.
Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.
Мне нравится проводить время, изучая новые технологии. Однако зачастую самым большим недостатком работы с новыми технологиями являются неизбежные болевые точки, возникающие при раннем внедрении. Я видел это довольно часто, когда знакомился с Web3 в статье « Как перейти от Full-Stack Developer к Web3 Pioneer в 2022 году ».
Как инженеры-программисты, мы привыкли принимать вызовы первых пользователей, тестируя новые технологии. Для меня лучше всего вести постоянный список заметок и команд, которые я выполнил, поскольку казалось бы нелогичные шаги не остаются в моей памяти.
Помимо Web3, я также обнаружил эту проблему в области JavaScript с полустандартными требованиями использования Node.js и Webpack. Я хотел найти решение, в котором я мог бы просто использовать JavaScript как есть, не утруждаясь Node.js и Webpack. Недавно я прочитал, как выпуск Rails 7 решил эту самую ситуацию . Именно об этом варианте использования я и расскажу в этой статье.
Честно говоря, мой опыт работы с Ruby и Ruby on Rails практически нулевой. Я помню, как много лет назад наблюдал, как кто-то вводил команды для создания полнофункционального сервиса, и подумал: «Ух ты, это выглядит потрясающе». Но я никогда не тратил время на эксперименты с этим подходом к созданию сервисов и приложений.
Я почти уверен, что видел эту демонстрацию в начале 2006 года, потому что Rails впервые появился в конце 2005 года. Как я видел в демонстрации, конечным результатом стал сервис, поддерживающий шаблон проектирования модель-представление-контроллер (MVC), шаблон, который Я был знаком с ранним использованием фреймворков Spring, Struts, JSF и Seam.
Rails обещает сохранять простоту, придерживаясь при этом практики DRY (не повторяйтесь). Чтобы выполнить это обещание, Ruby использует Gems, чтобы инженеры могли вводить общие зависимости в свои проекты.
В конце 2021 года седьмая основная версия Rails представила несколько интересных функций:
Именно эта последняя особенность побудила меня написать эту статью.
На высоком уровне Gem importmaps-rails позволяет разработчикам импортировать карты в свои приложения. Использование /bin/importmap
позволяет инженерам обновлять, закреплять или откреплять зависимости по мере необходимости. Это похоже на то, как Maven и Gradle работают в проектах на основе Java.
Это избавляет от необходимости иметь дело со сложностями, связанными с объединением пакетов и транспиляцией ES6 и Babel. Прощай, Вебпак! Прощай, Node.js!
Поскольку я даже не прикасался к Ruby on Rails почти два десятилетия, первое, что мне нужно было сделать, — это следовать этому руководству , чтобы установить Ruby 3.3 на мой MacBook Pro. После установки мне просто нужно было установить плагин Ruby как часть моей IDE IntelliJ IDEA.
Затем я создал новый проект Ruby on Rails в IntelliJ под названием import-map
и указал использование Importmap
для платформы JavaScript:
Создав проект, я сначала хотел посмотреть, насколько легко будет использовать локальную библиотеку JavaScript. Итак, я создал новый файл JavaScript под названием /public/jvc_utilities.js
со следующим содержимым:
export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }
Функция по умолчанию просто отображает некоторые команды на консоли JavaScript.
Затем я создал HTML-файл ( /public/jvc-utilities.html
) со следующим содержимым:
<!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>
В этом примере показано, как локальный файл JavaScript можно использовать с общедоступным файлом HTML без каких-либо дополнительных действий.
Затем я создал новый контроллер под названием Example
:
bin/rails generate controller Example index
Для этого примера я хотел использовать библиотеку Lodash , поэтому использовал следующую команду, чтобы добавить библиотеку в свой проект import-map
:
bin/importmap pin lodash
Чтобы добавить в контроллер некоторые функции на основе JavaScript, я обновил javascript/controllers/example_controller.js
чтобы он выглядел следующим образом:
import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }
Эта логика создает массив из трех значений, а затем удваивает значения. Для этого я использую метод Lodash map()
.
Наконец, я обновил views/example/index.html.erb
, включив в него следующее:
<h3>Example Controller</h3> <div data-controller="example"></div>
На данный момент доступны следующие URI:
/jvc-utilities.html
/example/index
Вместо того, чтобы запускать службу Rails локально, я решил использовать Heroku. Таким образом, я мог быть уверен, что мой сервис будет доступен другим потребителям.
Используя свою учетную запись Heroku, я следовал руководству « Начало работы с Heroku с Ruby ». Основываясь на моем проекте, моим первым шагом было добавить файл с именем Procfile
со следующим содержимым:
web: bundle exec puma -C config/puma.rb
Затем я использовал интерфейс командной строки Heroku для создания нового приложения в Heroku:
heroku login heroku create
С помощью команды create
у меня было запущено следующее приложение:
Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git
На этом этапе также был создан удаленный Git, который использует экосистема Heroku.
Теперь все, что мне нужно было сделать, это загрузить последние обновления в Heroku и развернуть приложение:
git push heroku main
При этом мой код был отправлен в Heroku, который затем скомпилировал и развернул мое приложение. Менее чем через минуту я увидел следующее, сообщающее мне, что мое приложение готово к использованию:
remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main
Затем я перешел на страницу /example/index
используя URL-адрес Heroku (который уникален для моего приложения, но с тех пор я его удалил): https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index
Вот что я увидел:
И когда я просмотрел консоль JavaScript в своем браузере, появились следующие журналы:
Перейдя к /jvc-utilities.html
, я увидел следующую информацию:
Когда я просмотрел консоль JavaScript в своем браузере, я увидел следующие журналы:
Успех. Я смог использовать автономную библиотеку JavaScript, а также общедоступную библиотеку JavaScript Lodash в своем приложении Rails 7 — и все это с помощью Import Maps и без необходимости иметь дело с Webpack или Node.js. Прощай, Webpack и Node.js!
Мои читатели, возможно, помнят мое личное заявление о миссии, которое, по моему мнению, применимо к любому ИТ-специалисту:
«Сосредоточьте свое время на предоставлении функций/функций, которые увеличивают ценность вашей интеллектуальной собственности. Используйте платформы, продукты и услуги для всего остального». - Дж. Вестер
В этой статье я с головой погрузился в Rails 7 и использовал карты импорта, чтобы показать, насколько легко вы можете использовать библиотеки JavaScript без дополнительных усилий, связанных с использованием Webpack и Node.js. Я был весьма впечатлен тем небольшим количеством времени, которое потребовалось для достижения моих целей, несмотря на то, что прошло более двух десятилетий с тех пор, как я в последний раз видел Rails в действии.
С точки зрения развертывания, попытка развернуть приложение Rails на платформе Heroku состояла из создания Procfile
и трех команд CLI.
В обоих случаях Rails и Heroku придерживаются моей миссии, позволяя мне оставаться сосредоточенным на предоставлении ценности моим клиентам и не увязнуть в проблемах с Webpack, Node.js или даже задачами DevOps.
Хотя я уверен, что мы и дальше будем сталкиваться с не такими уж идеальными болями при изучении новых технологий, я также уверен, что со временем мы увидим аналогичные достижения, которые я продемонстрировал в этой статье.
Как всегда, мой исходный код можно найти на GitLab здесь .
Хорошего дня!
Прощайте, Webpack и Node.js, Hello Rails и импорт карт | HackerNoon