Buh-Bye Webpack, Node.js; Hiya Rails, Import Maps – DZone – Uplaza

I take pleasure in spending time studying new applied sciences. Nonetheless, typically the largest downside of working with new applied sciences is the inevitable ache factors that include early adoption. I noticed this fairly a bit once I was getting up to the mark with Web3 in “Moving From Full-Stack Developer To Web3 Pioneer.”

As software program engineers, we’re accustomed to accepting these early-adopter challenges when giving new tech a take a look at drive. What works finest for me is to maintain a operating record of notes and instructions I’ve executed, since seemingly illogical steps don’t stay in my reminiscence.

Except for Web3, I additionally discovered this problem within the JavaScript house, with the semi-standard necessities of utilizing Node.js and Webpack. I needed to establish an answer the place I may simply use JavaScript as is, with out toiling away with Node.js and Webpack. I not too long ago learn how the Rails 7 launch addressed this very scenario. So, that’s the use case I’ll be protecting on this article.

About Rails

To be absolutely clear, my expertise with Ruby and Ruby on Rails is little to none. I bear in mind watching somebody subject some instructions to create a totally useful service years in the past, and I believed “Wow, that looks awesome.” However I’ve by no means hung out taking part in round with this method to constructing providers and functions.

I’m fairly positive I noticed that demo in early 2006 as a result of Rails first emerged in late 2005. As I noticed within the demonstration, the tip end result was a service that supported the model-view-controller (MVC) design sample, a sample that I used to be aware of by means of my early use of the Spring, Struts, JSF, and Seam frameworks.

Rails maintains a promise to maintain issues simple whereas adhering to DRY (don’t repeat your self) practices. To assist honor this promise, Ruby makes use of Gems for engineers to introduce shared dependencies into their initiatives.

Model 7 Highlights

In late 2021, the seventh main model of Rails launched some thrilling options:

• Asynchronous querying: Getting away from operating queries serially
• Encrypted database layer: Securing knowledge between the service and persistence layers
• Comparability validator: Permits object validation earlier than persistence
• Import maps: Now not require Node.js and Webpack for JavaScript libraries

That final characteristic is what drove me to write down this text.

How Do Import Maps Work?

At a excessive stage, the importmaps-rails Gem permits builders to import maps into their functions. Using /bin/importmap permits engineers to replace, pin, or unpin dependencies as wanted. That is much like how Maven and Gradle work in Java-based initiatives.

This eliminates needing to cope with the complexities associated to bundling packages and transpiling ES6 and Babel. Goodbye Webpack! Goodbye Node.js!

Let’s Construct One thing

Since I hadn’t even touched Ruby on Rails in virtually 20 years, the very first thing I wanted to do was observe this information to put in Ruby 3.3 on my MacBook Professional. As soon as put in, I simply wanted to put in the Ruby plugin as a part of my IntelliJ IDEA IDE.

Then, I created a brand new Ruby on Rails venture in IntelliJ known as import-map and specified using Importmap for the JavaScript framework:

With the venture created, I first needed to see how straightforward it could be to make use of an area JavaScript library. So, I created a brand new JavaScript file known as /public/jvc_utilities.js with the next contents:

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

The default operate merely echoes some instructions to the JavaScript console.

Subsequent, I created an HTML file (/public/jvc-utilities.html) with the next contents:

    
        
    

    
    

    
jvc-utilities.html

    
Open the console to see the output of the 
       JvcUtilities() operate.
    

This instance demonstrates how an area JavaScript file can be utilized with a public HTML file — with none further work.

Subsequent, I created a brand new controller known as Instance:

bin/rails generate controller Instance index

I needed to make use of the Lodash library for this instance, so I used the next command so as to add the library to my import-map venture:

So as to add some JavaScript-based performance to the controller, I up to date javascript/controllers/example_controller.js to seem like this:

import { Controller } from "@hotwired/stimulus"
import _ from "lodash"

export default class extends Controller {
  join() {
    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.aspect.textContent = `array=${array} doubled=${doubled.be part of(', ')}`
  }
}

This logic establishes an array of three values, after which it doubles the values. I take advantage of the Lodash map() methodology to do that.

Lastly, I up to date views/instance/index.html.erb to comprise the next:

At this level, the next URIs at the moment are accessible:

• /jvc-utilities.html
• /instance/index

Let’s Deploy and Validate

Moderately than run the Rails service regionally, I believed I’d use Heroku as a substitute. This manner, I may be certain my service may very well be accessible to different shoppers.

Utilizing my Heroku account, I adopted the “Getting Started on Heroku with Ruby” information. Primarily based on my venture, my first step was so as to add a file named Procfile with the next contents:

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

Subsequent, I used the Heroku CLI to create a brand new utility in Heroku:

heroku login
heroku create

With the create command, I had the next utility up and operating:

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

This step additionally created the Git distant that the Heroku ecosystem makes use of.

Now, all I wanted do was push my newest updates to Heroku and deploy the applying:

With that, my code was pushed to Heroku, which then compiled and deployed my utility. In lower than a minute, I noticed the next, letting me know that my utility was prepared to be used:

distant: Verifying deploy... performed.
To https://git.heroku.com/lit-basin-84681.git
   fe0b7ad..1a21bdd  essential -> essential

Then, I navigated to the /instance/index web page utilizing my Heroku URL (which is exclusive to my utility, however I’ve since taken it down): https://lit-basin-84681-3f5a7507b174.herokuapp.com/instance/index

That is what I noticed:

And once I considered the JavaScript console in my browser, the next logs appeared:

Navigating to /jvc-utilities.html, I noticed the next data:

After I considered the JavaScript console in my browser, I noticed the next logs:

Success. I used to be in a position to make use of a self-contained JavaScript library and likewise the general public Lodash JavaScript library in my Rails 7 utility—all by utilizing Import Maps and with no need to cope with Webpack or Node.js. Buh-bye, Webpack and Node.js!

Conclusion

My readers could recall my private mission assertion, which I really feel can apply to any IT skilled:

“Focus your time on delivering features/functionality that extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.”

— J. Vester

On this article, I dove head-first into Rails 7 and used Import Maps to point out how simply you need to use JavaScript libraries with out the additional effort of needing to make use of Webpack and Node.js. I used to be fairly impressed by the small period of time that was required to perform my targets, regardless of it being over 20 years since I had final seen Rails in motion.

From a deployment perspective, the trouble to deploy the Rails utility onto the Heroku platform consisted of the creation of a Procfile and three CLI instructions.

In each circumstances, Rails and Heroku adhere to my mission assertion by permitting me to stay laser-focused on delivering worth to my prospects and never get slowed down by challenges with Webpack, Node.js, and even DevOps duties.

Whereas I’m sure we’ll proceed to face not-so-ideal ache factors when exploring new applied sciences, I’m additionally assured that in time we’ll see comparable accomplishments as I demonstrated on this article.

As all the time, my supply code will be discovered on GitLab right here.

Have a very nice day!