JavaScript for Rails Developerss
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 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.
-
Introduction
- About this book Preview
- History lesson: evolution of JavaScript
-
Setting the stage
Where you create the app for coding along.
-
Basic CodeMirror Integration with Stimulus
-
Creating a Stimulus controller for CodeMirror
Learn what a Stimulus controller actually is.
-
Initializing CodeMirror in the `connect()` lifecycle method
Preview
Explore how import statements work and learn about the three lifecycle methods.
-
Retrieving and saving editor content
Covering the Values API, (fat) arrow functions and the Fetch API.
-
Creating a Stimulus controller for CodeMirror
-
Beyond the basic setup
Preview
NPM package versions, method invocations, spread operator
-
Languages and auto-completion
Learn to use object literals for expressive code.
-
Syntax highlighting and themes
Discover how object destructuring works.
-
Custom preferences
See the logical and-operator && filter method being used.
-
Extending with custom features
Use the barrel pattern, array index finding, circular wrapping and more.
-
Adding snippets
Where only default Stimulus features are being used.
-
User customization through values API
Returning early, explore differences between undefined and null and using private methods.
-
Internationalization (I18n)
Preview
Learning about the windows-object and try-catch block.
-
Panels
Use flatMap, the constructor, super and polymorphism.
-
Split views
Creating a custom method to encapsulate specific logic.
-
Optional read-only
See how to build upon existing functionality.
-
User presence indicators
Set up Action Cable and learn about default exports.
-
Real-time updates
Extending Action cable functionality, use of optional chaining- and equality comparison operator and type coercion.
-
Fundamentals
Preview
Learn the basic of debugging beyond console.log, like console.error and console.group.
-
Browser DevTools
Explore all the feature of the browser's devtools, using debugging breakpoints and use of Network tab.
-
Monitoring performance
Know about common memory leaks, how to measure code execution and heap snaphots.
-
Production monitoring
Know you can monitor JavaScript errors and use of sourcemaps.
-
You don't need JavaScript
Exploration of CSS tricks to use instead of JavaScript.
-
Refactoring an if/else hell
Step-by-step process on moving one procedural method to a readable class.
-
Exploring the i18n class
See how the I18n class (bundled with Professional) works.
-
Refactor Split views into a class
Another refactoring from hard to grasp to reads-like-English.
-
Building a basic JavaScript widget
How to build a basic JavaScript widget (foundation of the bundled Professional resource).
-
Bundled resources
Overview of the bundled resources per tier.
Thanks, reflection and a favor to ask.
FAQ
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, in fact the first minor update is already published. Future 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 is published, you will receive a notification by email.
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 tier, you get the editor built in this book ready-to-go, along with various code snippets. The Professional tier 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.
Is there bulk pricing?
Yes, reach out if you need 15 user licenses or more.
JavaScript for Rails Developers
Choose one of the three tiers below
Get your copy!
Professional
$
69
What is included?
- Full book (PDF/ePub)
- Code-base included
- Code snippets
- Code repos for: Markdown Editor + Preview Variant, Code Playground & Embeddable widget JS for live chat
- Access to Rails Designers ($49 value)
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. “