paint-brush
Прощайте, Webpack и Node.js, Hello Rails и импорт карт к@johnjvester
2,885 чтения
2,885 чтения

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

к John Vester
John Vester HackerNoon profile picture

John Vester

@johnjvester

Information Technology professional with 25+ years expertise in application design...

7 мин read2024/08/07
Read on Terminal Reader
Read this story in a terminal
Print this story
tldt arrow
ru-flagRU
Прочтите эту историю на русском языке!
en-flagEN
Read this story in the original language, English!
tr-flagTR
Bu hikayeyi Türkçe okuyun!
ko-flagKO
이 이야기를 한국어로 읽어보세요!
de-flagDE
Lesen Sie diese Geschichte auf Deutsch!
bn-flagBN
এই গল্পটি বাংলায় পড়ুন!
es-flagES
Lee esta historia en Español!
hi-flagHI
इस कहानी को हिंदी में पढ़ें!
zh-flagZH
用繁體中文閱讀這個故事!
vi-flagVI
Đọc bài viết này bằng tiếng Việt!
fr-flagFR
Lisez cette histoire en Français!
pt-flagPT
Leia esta história em português!
ja-flagJA
この物語を日本語で読んでください!
RU

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

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

John Vester

@johnjvester

Information Technology professional with 25+ years expertise in application design and architecture.

0-item

STORY’S CREDIBILITY

Guide

Guide

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, чтобы инженеры могли вводить общие зависимости в свои проекты.

Особенности версии 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:


image

Создав проект, я сначала хотел посмотреть, насколько легко будет использовать локальную библиотеку 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


Вот что я увидел:


image

И когда я просмотрел консоль JavaScript в своем браузере, появились следующие журналы:


image

Перейдя к /jvc-utilities.html , я увидел следующую информацию:


image

Когда я просмотрел консоль JavaScript в своем браузере, я увидел следующие журналы:


image

Успех. Я смог использовать автономную библиотеку 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 здесь .


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

L O A D I N G
. . . comments & more!

About Author

John Vester HackerNoon profile picture
John Vester@johnjvester
Information Technology professional with 25+ years expertise in application design and architecture.

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite