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. I also have written a lot about Hotwire, JavaScript and Rails.

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