diff --git a/actioncable/README.md b/actioncable/README.md
index 1d9864292f5e2cb76ab0e3c06339f4520d970bff..879211366443ce2cd8a73aa2dfd31c73036f6b6f 100644
--- a/actioncable/README.md
+++ b/actioncable/README.md
@@ -86,12 +86,17 @@ end
 
 The client-side needs to setup a consumer instance of this connection. That's done like so:
 
-```coffeescript
-# app/assets/javascripts/cable.coffee
-#= require action_cable
+```js
+// app/assets/javascripts/cable.js
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
 
-@App = {}
-App.cable = ActionCable.createConsumer("ws://cable.example.com")
+  App.cable = ActionCable.createConsumer("ws://cable.example.com");
+}).call(this);
 ```
 
 The `ws://cable.example.com` address must point to your Action Cable server(s), and it
diff --git a/guides/source/action_cable_overview.md b/guides/source/action_cable_overview.md
index aa15c5a06f6a806dd7d72ee961eb1358dcc5cacd..5cc280072ed6b9966c1e017b79b1e9712d7400d7 100644
--- a/guides/source/action_cable_overview.md
+++ b/guides/source/action_cable_overview.md
@@ -142,12 +142,17 @@ established using the following Javascript, which is generated by default in Rai
 
 #### Connect Consumer
 
-```coffeescript
-# app/assets/javascripts/cable.coffee
-#= require action_cable
+```js
+// app/assets/javascripts/cable.js
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
 
-@App = {}
-App.cable = ActionCable.createConsumer()
+  App.cable = ActionCable.createConsumer();
+}).call(this);
 ```
 
 This will ready a consumer that'll connect against /cable on your server by default.
@@ -414,7 +419,7 @@ App.cable.subscriptions.create "AppearanceChannel",
 ```
 
 ##### Client-Server Interaction
-1. **Client** establishes a connection with the **Server** via `App.cable = ActionCable.createConsumer("ws://cable.example.com")`. [*` cable.coffee`*] The **Server** identified this connection instance by `current_user`.
+1. **Client** establishes a connection with the **Server** via `App.cable = ActionCable.createConsumer("ws://cable.example.com")`. [*` cable.js`*] The **Server** identified this connection instance by `current_user`.
 2. **Client** initiates a subscription to the `Appearance Channel` for their connection via `App.cable.subscriptions.create "AppearanceChannel"`. [*`appearance.coffee`*]
 3. **Server** recognizes a new subscription has been initiated for `AppearanceChannel` channel performs the `subscribed` callback, which calls the `appear` method on the `current_user`. [*`appearance_channel.rb`*]
 4. **Client** recognizes that a subscription has been established and calls `connected` [*`appearance.coffee`*] which in turn calls `@install` and `@appear`. `@appear` calls`AppearanceChannel#appear(data)` on the server, and supplies a data hash of `appearing_on: $("main").data("appearing-on")`. This is possible because the server-side channel instance will automatically expose the public methods declared on the class (minus the callbacks), so that these can be reached as remote procedure calls via a subscription's `perform` method.