2,697 lượt đọc

Buh-Bye Webpack và Node.js, Hello Rails và Nhập bản đồ

từ tác giả John Vester7m2024/08/07

dài quá đọc không nổi

Rails 7 đã giới thiệu các tính năng mới giúp sử dụng Node.js và Webpack dễ dàng hơn. Tính năng Nhập bản đồ mới cho phép các nhà phát triển nhập bản đồ vào ứng dụng của họ. Điều này giúp loại bỏ việc phải giải quyết những vấn đề phức tạp liên quan đến việc đóng gói các gói và dịch mã ES6 và Babel. Bài viết này giải thích cách sử dụng tính năng Nhập bản đồ mới với Ruby trên Ruby.

featured image - Buh-Bye Webpack và Node.js, Hello Rails và Nhập bản đồ

Tôi thích dành thời gian học các công nghệ mới. Tuy nhiên, nhược điểm lớn nhất khi làm việc với các công nghệ mới là những điểm yếu không thể tránh khỏi khi áp dụng sớm. Tôi đã thấy điều này khá nhiều khi bắt đầu tìm hiểu về Web3 trong “ Cách chuyển đổi từ Nhà phát triển Full-Stack sang Web3 Pioneer vào năm 2022 ”.

Với tư cách là kỹ sư phần mềm, chúng tôi đã quen với việc chấp nhận những thách thức của người áp dụng sớm này khi dùng thử công nghệ mới. Điều tốt nhất đối với tôi là giữ một danh sách liên tục các ghi chú và lệnh mà tôi đã thực hiện vì các bước dường như phi logic không còn tồn tại trong bộ nhớ của tôi.

Ngoài Web3, tôi cũng nhận thấy thách thức này trong không gian JavaScript, với các yêu cầu bán chuẩn khi sử dụng Node.js và Webpack. Tôi muốn xác định một giải pháp mà tôi có thể sử dụng JavaScript mà không cần phải vất vả với Node.js và Webpack. Gần đây tôi đã đọc cách bản phát hành Rails 7 giải quyết tình huống này . Vì vậy, đó là trường hợp sử dụng mà tôi sẽ đề cập trong bài viết này.

Giới thiệu về Rails

Để hoàn toàn minh bạch, trải nghiệm của tôi với Ruby và Ruby on Rails là rất ít. Tôi nhớ đã xem ai đó đưa ra một số lệnh để tạo ra một dịch vụ đầy đủ chức năng cách đây nhiều năm và tôi nghĩ, “Chà, trông thật tuyệt vời”. Nhưng tôi chưa bao giờ dành thời gian tìm hiểu cách tiếp cận này để xây dựng các dịch vụ và ứng dụng.

Tôi khá chắc chắn rằng tôi đã xem bản demo đó vào đầu năm 2006 vì Rails xuất hiện lần đầu tiên vào cuối năm 2005. Giống như tôi đã thấy trong phần trình diễn, kết quả cuối cùng là một dịch vụ hỗ trợ mẫu thiết kế model-view-controller (MVC), một mẫu mà Tôi đã quen thuộc với việc sử dụng sớm các khung công tác Spring, Struts, JSF và Seam.

Rails duy trì lời hứa giữ mọi thứ đơn giản trong khi tuân thủ các nguyên tắc DRY (không lặp lại chính mình). Để giúp thực hiện lời hứa này, Ruby sử dụng Đá quý dành cho các kỹ sư để đưa các phần phụ thuộc chung vào dự án của họ.

Điểm nổi bật của phiên bản 7

Vào cuối năm 2021, phiên bản chính thứ bảy của Rails đã giới thiệu một số tính năng thú vị:

Truy vấn không đồng bộ – thoát khỏi việc chạy truy vấn nối tiếp
Lớp cơ sở dữ liệu được mã hóa – bảo mật dữ liệu giữa lớp dịch vụ và lớp lưu trữ
Trình xác thực so sánh - cho phép xác thực đối tượng trước khi duy trì
Nhập bản đồ – không còn yêu cầu Node.js và Webpack cho thư viện JavaScript

Đặc điểm cuối cùng đó là điều đã thúc đẩy tôi viết bài này.

Bản đồ nhập hoạt động như thế nào?

Ở cấp độ cao, importmaps-rails Gem cho phép các nhà phát triển nhập bản đồ vào ứng dụng của họ. Việc sử dụng /bin/importmap cho phép các kỹ sư cập nhật, ghim hoặc bỏ ghim các phần phụ thuộc nếu cần. Điều này tương tự như cách Maven và Gradle hoạt động trong các dự án dựa trên Java.

Điều này giúp loại bỏ việc phải giải quyết những vấn đề phức tạp liên quan đến việc đóng gói các gói và dịch mã ES6 và Babel. Tạm biệt Webpack! Tạm biệt Node.js!

Hãy xây dựng một cái gì đó

Vì tôi thậm chí đã không chạm vào Ruby on Rails trong gần hai thập kỷ nên điều đầu tiên tôi cần làm là làm theo hướng dẫn này để cài đặt Ruby 3.3 trên MacBook Pro của mình. Sau khi cài đặt, tôi chỉ cần cài đặt plugin Ruby như một phần của IDE IntelliJ IDEA của mình.

Sau đó, tôi đã tạo một dự án Ruby on Rails mới trong IntelliJ có tên là import-map và chỉ định việc sử dụng Importmap cho khung JavaScript:

Khi dự án được tạo, trước tiên tôi muốn xem việc sử dụng thư viện JavaScript cục bộ sẽ dễ dàng như thế nào. Vì vậy, tôi đã tạo một tệp JavaScript mới có tên /public/jvc_utilities.js với nội dung sau:

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

Hàm mặc định chỉ lặp lại một số lệnh tới bảng điều khiển JavaScript.

Tiếp theo, tôi đã tạo một tệp HTML ( /public/jvc-utilities.html ) với nội dung sau:

 <!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>

Ví dụ này minh họa cách có thể sử dụng tệp JavaScript cục bộ với tệp HTML công khai— mà không cần thực hiện thêm bất kỳ thao tác nào.

Tiếp theo, tôi tạo một bộ điều khiển mới có tên Example :

 bin/rails generate controller Example index

Tôi muốn sử dụng thư viện Lodash cho ví dụ này, vì vậy tôi đã sử dụng lệnh sau để thêm thư viện vào dự án import-map của mình:

 bin/importmap pin lodash

Để thêm một số chức năng dựa trên JavaScript vào bộ điều khiển, tôi đã cập nhật javascript/controllers/example_controller.js để trông như thế này:

 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(', ')}` } }

Logic này thiết lập một mảng gồm ba giá trị và sau đó nhân đôi các giá trị. Tôi sử dụng phương thức Lodash map() để thực hiện việc này.

Cuối cùng, tôi đã cập nhật views/example/index.html.erb để chứa những nội dung sau:

 <h3>Example Controller</h3> <div data-controller="example"></div>

Tại thời điểm này, các URI sau hiện có sẵn:

/jvc-utilities.html
/example/index

Hãy triển khai và xác thực

Thay vì chạy dịch vụ Rails cục bộ, tôi nghĩ tôi sẽ sử dụng Heroku. Bằng cách này, tôi có thể đảm bảo rằng những người tiêu dùng khác có thể tiếp cận được dịch vụ của mình.

Sử dụng tài khoản Heroku của mình, tôi đã làm theo hướng dẫn “ Bắt đầu sử dụng Heroku với Ruby ”. Dựa trên dự án của tôi, bước đầu tiên của tôi là thêm một tệp có tên Procfile với nội dung sau:

 web: bundle exec puma -C config/puma.rb

Tiếp theo, tôi sử dụng Heroku CLI để tạo một ứng dụng mới trong Heroku:

 heroku login heroku create

Với lệnh create , tôi đã thiết lập và chạy ứng dụng sau:

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

Bước này cũng tạo điều khiển từ xa Git mà hệ sinh thái Heroku sử dụng.

Bây giờ, tất cả những gì tôi cần làm là đẩy các bản cập nhật mới nhất của mình lên Heroku và triển khai ứng dụng:

 git push heroku main

Cùng với đó, mã của tôi đã được đẩy tới Heroku, sau đó được biên dịch và triển khai ứng dụng của tôi. Trong vòng chưa đầy một phút, tôi thấy thông tin sau, cho tôi biết rằng ứng dụng của tôi đã sẵn sàng để sử dụng:

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

Sau đó, tôi điều hướng đến trang /example/index bằng URL Heroku của mình (URL này là duy nhất cho ứng dụng của tôi nhưng tôi đã gỡ nó xuống): https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Đây là những gì tôi đã thấy:

Và khi tôi xem bảng điều khiển JavaScript trong trình duyệt của mình, các nhật ký sau xuất hiện:

Điều hướng đến /jvc-utilities.html , tôi thấy thông tin sau:

Khi tôi xem bảng điều khiển JavaScript trong trình duyệt của mình, tôi thấy các nhật ký sau:

Thành công. Tôi đã có thể sử dụng thư viện JavaScript độc lập và cả thư viện Lodash JavaScript công khai trong ứng dụng Rails 7 của mình—tất cả đều bằng cách sử dụng Import Maps và không cần phải xử lý Webpack hoặc Node.js. Tạm biệt, Webpack và Node.js!

Phần kết luận

Độc giả của tôi có thể nhớ lại tuyên bố sứ mệnh cá nhân của tôi mà tôi cảm thấy có thể áp dụng cho bất kỳ chuyên gia CNTT nào:

“Hãy tập trung thời gian vào việc cung cấp các tính năng/chức năng giúp nâng cao giá trị tài sản trí tuệ của bạn. Tận dụng các khuôn khổ, sản phẩm và dịch vụ cho mọi thứ khác.” — J. Vester

Trong bài viết này, tôi sẽ tìm hiểu sâu hơn về Rails 7 và sử dụng Bản đồ nhập để cho thấy bạn có thể sử dụng thư viện JavaScript dễ dàng như thế nào mà không cần nỗ lực thêm khi sử dụng Webpack và Node.js. Tôi khá ấn tượng về lượng thời gian nhỏ cần thiết để hoàn thành mục tiêu của mình mặc dù đã hơn hai thập kỷ kể từ lần cuối tôi nhìn thấy Rails hoạt động.

Từ góc độ triển khai, nỗ lực triển khai ứng dụng Rails trên nền tảng Heroku bao gồm việc tạo một Procfile và ba lệnh CLI.

Trong cả hai trường hợp, Rails và Heroku đều tuân thủ tuyên bố sứ mệnh của tôi bằng cách cho phép tôi tập trung cao độ vào việc mang lại giá trị cho khách hàng của mình và không bị sa lầy bởi những thách thức với các nhiệm vụ Webpack, Node.js hoặc thậm chí DevOps.

Mặc dù tôi chắc chắn rằng chúng ta sẽ tiếp tục phải đối mặt với những điểm yếu không mấy lý tưởng khi khám phá các công nghệ mới, nhưng tôi cũng tin tưởng rằng theo thời gian, chúng ta sẽ thấy được những thành tựu tương tự như tôi đã trình bày trong bài viết này.

Như mọi khi, mã nguồn của tôi có thể được tìm thấy trên GitLab tại đây .

Chúc bạn có một ngày thật tuyệt vời!