2,885 чтения

Прощайте, Webpack и Node.js, Hello Rails и импорт карт

к John Vester7m2024/08/07

Слишком долго; Читать

В Rails 7 представлены новые функции, упрощающие использование Node.js и Webpack. Новая функция «Импорт карт» позволяет разработчикам импортировать карты в свои приложения. Это избавляет от необходимости иметь дело со сложностями, связанными с объединением пакетов и транспиляцией ES6 и Babel. В этой статье объясняется, как использовать новую функцию импорта карт с Ruby на Ruby.

featured image - Прощайте, Webpack и Node.js, Hello Rails и импорт карт

Мне нравится проводить время, изучая новые технологии. Однако зачастую самым большим недостатком работы с новыми технологиями являются неизбежные болевые точки, возникающие при раннем внедрении. Я видел это довольно часто, когда знакомился с 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, чтобы инженеры могли вводить общие зависимости в свои проекты.

Особенности версии 7

В конце 2021 года седьмая основная версия Rails представила несколько интересных функций:

Асинхронные запросы – отказ от последовательного выполнения запросов
Уровень зашифрованной базы данных – защита данных между уровнями службы и постоянства.
Валидатор сравнения – позволяет проверять объект перед сохранением.
Импортируйте карты — больше не требуется Node.js и Webpack для библиотек JavaScript.

Именно эта последняя особенность побудила меня написать эту статью.

Как работает импорт карт?

На высоком уровне 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 здесь .

Хорошего дня!