Why Import maps (Rails 7+)? - Purpose & Use Cases

The Big Idea

Discover how to manage JavaScript in Rails without complicated bundlers or endless script tags!

The Scenario

Imagine manually managing dozens of JavaScript files in your Rails app, writing long script tags with complex paths, and constantly updating them whenever you add or change a library.

The Problem

This manual approach is error-prone and slow. You might forget to update a path, load scripts in the wrong order, or accidentally include duplicates, causing bugs and frustrating debugging sessions.

The Solution

Import maps let Rails apps load JavaScript modules directly in the browser without bundling. You declare your dependencies once, and the browser handles loading them correctly and efficiently.

Before vs After

✗ Before

<script src="/js/lib1.js"></script>
<script src="/js/lib2.js"></script>

✓ After

pin "lib1"
pin "lib2"

What It Enables

It enables simple, fast JavaScript management with no build step, making your app easier to maintain and faster to develop.

Real Life Example

When adding a new JavaScript library like Stimulus or Turbo, you just add it to your import map, and Rails handles loading it automatically without extra configuration.

Key Takeaways

Manual script management is slow and error-prone.

Import maps automate and simplify JavaScript loading.

This leads to faster development and easier maintenance.