Buy now
by Rails Designer

JavaScript for Rails Developers

Make JavaScript your second-favorite language

For decades Ruby on Rails devs have shrugged at JavaScript, cursed at it or vowed to never use it again. But over the years, JavaScript has improved greatly. And if you want to write modern (SaaS) web apps today, there is almost no way around it.

Sure, the Hotwire tools help you tremendously to write as little JavaScript as possible, but if you want something more bespoke, you need to write JavaScript (powered by Stimulus) by hand.

This short and focused book (~31,000 words / ~7 hours of reading) will help you, Ruby on Rails developer, become more comfortable writing JavaScript that is as great-looking as your Ruby code and understand the JavaScript written by others. It won't cover React or Vue (or any of the other thousands available JS frameworks), but about writing and understanding JavaScript used in Stimulus controllers.

The comparisons between Ruby and JavaScript patterns were exactly what I needed. Wish I'd found this book a year ago! “

The book goes from zero to a functional code editor in your Rails app throughout various, easy to digest chapters. This will cover everything from working with a dependency (CodeMirror) in Stimulus, to extracting logic in smaller classes, refactoring to be more readable and using more advanced and modern syntax and integrating WebSockets (using Action Cable).

If you have been a Rails developer who has cursed at JavaScript, this book might be for you. If you've been a Rails developer avoiding JavaScript at all costs, this book is what you need. For Rails developers who've wished JavaScript would just disappear, this book might change your mind.

Contents

Every chapter is divided in sections and sometimes subsections to dive deepter into a certain topic. Preview some chapters below.

  1. Introduction
    1. About this book Preview
    2. History lesson: evolution of JavaScript
  2. Setting the stage

    Where you create the app for coding along.

  3. Basic CodeMirror Integration with Stimulus
    1. Creating a Stimulus controller for CodeMirror

      Learn what a Stimulus controller actually is.

    2. Initializing CodeMirror in the `connect()` lifecycle method Preview

      Explore how import statements work and learn about the three lifecycle methods.

    3. Retrieving and saving editor content

      Covering the Values API, (fat) arrow functions and the Fetch API.

  4. Enhancing the editor experience
    1. Beyond the basic setup Preview

      NPM package versions, method invocations, spread operator

    2. Languages and auto-completion

      Learn to use object literals for expressive code.

    3. Syntax highlighting and themes

      Discover how object destructuring works.

    4. Custom preferences

      See the logical and-operator && filter method being used.

    5. Extending with custom features

      Use the barrel pattern, array index finding, circular wrapping and more.

    6. Adding snippets

      Where only default Stimulus features are being used.

  5. Advanced editor configuration
    1. User customization through values API

      Returning early, explore differences between undefined and null and using private methods.

    2. Internationalization (I18n) Preview

      Learning about the windows-object and try-catch block.

    3. Panels

      Use flatMap, the constructor, super and polymorphism.

    4. Split views

      Creating a custom method to encapsulate specific logic.

  6. Real-time Collaboration
    1. Optional read-only

      See how to build upon existing functionality.

    2. User presence indicators

      Set up Action Cable and learn about default exports.

    3. Real-time updates

      Extending Action cable functionality, use of optional chaining- and equality comparison operator and type coercion.

  7. Debugging
    1. Fundamentals Preview

      Learn the basic of debugging beyond console.log, like console.error and console.group.

    2. Browser DevTools

      Explore all the feature of the browser's devtools, using debugging breakpoints and use of Network tab.

    3. Monitoring performance

      Know about common memory leaks, how to measure code execution and heap snaphots.

    4. Production monitoring

      Know you can monitor JavaScript errors and use of sourcemaps.

  8. Grab bag
    1. You don't need JavaScript

      Exploration of CSS tricks to use instead of JavaScript.

    2. Refactoring an if/else hell

      Step-by-step process on moving one procedural method to a readable class.

    3. Exploring the i18n class

      See how the I18n class (bundled with Professional) works.

    4. Refactor Split views into a class

      Another refactoring from hard to grasp to reads-like-English.

    5. Building a basic JavaScript widget

      How to build a basic JavaScript widget (foundation of the bundled Professional resource).

    6. Bundled resources

      Overview of the bundled resources per package.

  9. Reflection & resources

    Thanks, reflection and a favor to ask.

Questions & Answers

In which formats is the book available?

The book is offered as PDF and ePub.

Is the book for beginners?

Yes, and no. If you are a Rails veteran but always steered away from JavaScript, this book might just be for you. If you are just starting out with Rails, I would recommend to focus on Ruby (and Rails) first, and then come back to read this book.

Does the book get updates?

Yes, the book receives iterative updates (v1.x versions). In fact, the first minor update is already published. Future v1.x updates might include extensions and more chapters (I have a few ideas that didn't make it into the first version). When a significant update within the v1.x series is published, you will receive a notification by email.

Please note that major rewrites (v2.x versions) would be considered new editions and are not included in your current purchase.

Is this book about adding CodeMirror to a Rails app?

No. It uses CodeMirror as the foundation to add a code editor in a Rails app to show how to write good-looking and modern JavaScript. It does not go into detail on the many features of CodeMirror.

What is included with the book?

Based on your package, you get the editor built in this book ready-to-go. The Professional package includes variants of the code editor: a code playground (like CodePen), a markdown editor with live preview, next to that is an embeddable JavaScript widget for live chat. Finally you get access to Rails Designers.

What is Rails Designers?

A new private community for Rails UI Engineers & Frontend Designers. Launching Q3, 2025. Check it out.

How can I get a new download link?

Send an email. Links expire after 5 days — yes, I am doing this manually because someone got too excited about building their own system. Oops! 😅

I'd like to give a testimonial/feedback!

Sweet! You can do so on the feedback page.

Is there bulk pricing?

Yes, reach out if you need 15 user licenses or more.

Book.find(1).options.limit(3)

const package = yourChoice

Solo

$ 39

What is included?

  • Full book (PDF/ePub)
  • Code-base included

Professional

$ 69

What is included?

Team (5 developers)

$ 169

What is included?

  • Full book (PDF/ePub)
  • Full code-base access
  • Share with 5 developers in your team
Finally, JavaScript explained while keeping my Ruby soul intact. “