Import maps (Rails 7+) - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an import map in Rails 7+?

An import map is a way to manage JavaScript module imports directly in the browser without needing a bundler. It tells the browser where to find JavaScript files by mapping module names to URLs.

beginner

How does Rails 7+ use import maps to load JavaScript?

Rails 7+ uses import maps to load JavaScript modules by defining mappings in a file called importmap.rb. The browser reads these mappings and loads the modules from specified URLs, often from CDNs or local assets.

intermediate

What command do you run to pin a JavaScript package using import maps in Rails 7+?

You run `bin/importmap pin <package-name>` to add a package to your import map. This command updates the importmap.rb file and downloads the package if needed.

intermediate

Why might you choose import maps over bundlers like Webpack in Rails 7+?

Import maps let you avoid complex bundler setups. They simplify JavaScript management by loading modules directly in the browser, which can speed up development and reduce configuration.

beginner

How do you include the import map in your Rails 7+ HTML layout?

You include `<%= javascript_importmap_tags %>` in your application layout. This helper inserts the necessary script tags for the browser to load the import map and modules.

What file in Rails 7+ typically holds the import map configuration?

A config/routes.rb

B app/javascript/application.js

C config/importmap.rb

D app/assets/stylesheets/application.css

The import map configuration is stored in config/importmap.rb where you pin JavaScript packages.

Which command pins a package to the import map in Rails 7+?

A bin/importmap pin package-name

B npm install package-name

C yarn add package-name

D rails pin package-name

The correct command is bin/importmap pin package-name to add packages to the import map.

What does the helper `<%= javascript_importmap_tags %>` do in Rails 7+?

A Includes CSS stylesheets

B Loads JavaScript modules using the import map

C Defines routes for JavaScript files

D Compiles JavaScript into one file

This helper inserts script tags that load JavaScript modules based on the import map.

Why might import maps improve development speed in Rails 7+?

A They avoid the need for a bundler and complex setup

B They automatically minify CSS

C They bundle all JavaScript into one file

D They replace Ruby code with JavaScript

Import maps let you load modules directly in the browser, avoiding bundler setup and speeding development.

Where do import maps load JavaScript modules from?

A From Ruby gems

B Only from npm registry

C Only from local files

D From URLs defined in the import map, including CDNs or local assets

Import maps map module names to URLs, which can be local files or CDN links.

Explain how import maps work in Rails 7+ and why they are useful.

Think about how the browser finds JavaScript files without bundling.

Describe the steps to add a new JavaScript package using import maps in Rails 7+.

Consider the command and how the package becomes available in the app.

Practice

1. What is the main purpose of using importmap in Rails 7+?

easy

A. To load JavaScript modules without needing a bundler

B. To compile Ruby code into JavaScript

C. To manage database migrations automatically

D. To style HTML elements with CSS

Solution

1. Step 1: Understand importmap's role in Rails 7+

   Import maps allow Rails apps to load JavaScript modules directly in the browser without bundling tools.

2. Step 2: Compare other options

   Options B, C, and D describe unrelated tasks: compiling Ruby, managing migrations, and styling, which are not importmap's purpose.

3. Final Answer:

   To load JavaScript modules without needing a bundler -> Option A

4. Quick Check:

   Import maps = load JS modules without bundler [OK]

Hint: Import maps = JS modules without bundler [OK]

Common Mistakes:

• Confusing importmap with asset bundlers
• Thinking importmap compiles Ruby code
• Mixing importmap with CSS or database tasks

2. Which command correctly registers a JavaScript module named chart.js using importmap in Rails?

easy

A. rails importmap add chart.js

B. bin/importmap pin chart.js

C. rails importmap pin chart.js

D. importmap pin chart.js

Solution

1. Step 1: Identify the correct command syntax

   The correct command to pin a module in Rails 7+ is bin/importmap pin [module].

2. Step 2: Check other options

   Options B, C, and D are incorrect: B uses an incorrect verb add, C uses invalid rails importmap pin, and D misses the bin/ prefix.

3. Final Answer:

   bin/importmap pin chart.js -> Option B

4. Quick Check:

   Pin module command = bin/importmap pin [name] [OK]

Hint: Use 'bin/importmap pin' to register modules [OK]

Common Mistakes:

• Using 'rails importmap' instead of 'bin/importmap'
• Using 'add' instead of 'pin'
• Omitting 'bin/' prefix in the command

3. Given this Rails view code snippet:

<%= javascript_importmap_tags %>

What does this helper do in a Rails 7+ app using import maps?

medium

A. It generates CSS styles for JavaScript components

B. It compiles JavaScript files into one bundle

C. It removes unused JavaScript from the app

D. It loads all pinned JavaScript modules into the HTML page

Solution

1. Step 1: Understand the helper's purpose

   javascript_importmap_tags inserts script tags to load all pinned JS modules via import maps in the HTML.

2. Step 2: Eliminate incorrect options

   It does not bundle, remove unused code, or generate CSS styles.

3. Final Answer:

   It loads all pinned JavaScript modules into the HTML page -> Option D

4. Quick Check:

   javascript_importmap_tags = load pinned JS modules [OK]

Hint: javascript_importmap_tags loads pinned JS modules [OK]

Common Mistakes:

• Thinking it bundles JS files
• Assuming it cleans unused code
• Confusing it with CSS helpers

4. You run rails importmap pin my_module but your JavaScript module does not load in the browser. What is the most likely mistake?

medium

A. You forgot to add <%= javascript_importmap_tags %> in your layout

B. You used pin instead of add command

C. You need to restart the Rails server after pinning

D. You must compile assets with webpack first

Solution

1. Step 1: Check how import maps load modules

   Pinning registers the module, but javascript_importmap_tags must be in the layout to load scripts.

2. Step 2: Review other options

   You used pin instead of add command is incorrect because pin is the right command. You need to restart the Rails server after pinning is unnecessary; no restart needed. You must compile assets with webpack first is wrong because import maps do not require webpack.

3. Final Answer:

   You forgot to add <%= javascript_importmap_tags %> in your layout -> Option A

4. Quick Check:

   Missing javascript_importmap_tags = no JS load [OK]

Hint: Add javascript_importmap_tags in layout to load modules [OK]

Common Mistakes:

• Not including javascript_importmap_tags in views
• Confusing pin with add command
• Thinking server restart is required
• Assuming webpack is needed with import maps

5. You want to use a third-party JavaScript library hosted on a CDN with import maps in Rails 7+. Which is the correct way to pin it in config/importmap.rb?

hard

A. pin 'library', from: 'https://cdn.example.com/library.js'

B. pin 'library', to: '/assets/library.js'

C. pin 'library', to: 'https://cdn.example.com/library.js'

D. pin 'library', url: 'https://cdn.example.com/library.js'

Solution

1. Step 1: Understand pin syntax for external URLs

   To pin a module from a CDN, use pin 'name', to: 'URL' in config/importmap.rb.

2. Step 2: Check other options

   pin 'library', to: '/assets/library.js' uses a local path, not CDN. Options C and D use incorrect keys from and url which are invalid.

3. Final Answer:

   pin 'library', to: 'https://cdn.example.com/library.js' -> Option C

4. Quick Check:

   Pin CDN module = pin 'name', to: 'URL' [OK]

Hint: Use 'to:' with CDN URL when pinning external modules [OK]

Common Mistakes:

• Using wrong keys like 'from' or 'url'
• Pinning local path instead of CDN URL
• Confusing syntax for pinning external scripts