🔥 Remove remote.js

[josemigallas]

TL;DR

This was all along supported by rails!!!

Description

Intro

Welcome to 10 Sept, 2010. A world of Rails 2, committing changes without a PR and apparently... no UJS?.
https://github.com/3scale/system/commit/d40a74950775f34b28eeb455a56ace1f078504b6

remote.js (previously belonged to threescale.application.js) emulates rails-ujs functionality by adding class remote to forms and links. Instead of sending a synchronous html request, with page reload, they will expect an asynchronous javascript response from the controller.

On 29th August 2010, rails 3.0 was released with the following new feature:

Unobtrusive JavaScript helpers with drivers for Prototype, jQuery, and more coming (end of inline JS)

Using attribute [data-remote] in links and forms.

Why did the wise people of 2010 decide not to use UJS is unknown. But why we have been maintaining this up until 2025, being already a builtin functionality of rails is beyond reckoning.

Study case: Plan New Feature

By clicking "New Feature" a modal is opened with the following "remote" form:

<form class="remote formtastic feature" id="new_feature" action="/apiconfig/plans/7/features" accept-charset="UTF-8" method="post">
  ...
</form>

Upon submission, the form will trigger an AJAX call to this method:

porta/app/controllers/api/features_controller.rb

Lines 21 to 31 in d74aa64

	def create
	@feature = collection.build(feature_params.merge(scope: @plan.class.to_s, featurable: @plan.issuer))
	respond_to do |format|
	if @feature.save
	format.js
	else
	format.js { render :action => 'error' }
	end
	end
	end

And then return:

porta/app/views/api/features/create.js.erb

Lines 1 to 6 in 25fa9bc

	var html = "<%= escape_javascript(render :partial => 'feature', :locals => {:feature => @feature}) %>";
	jQuery.colorbox.close();
	jQuery("table#features tbody").append(html);
	jQuery("table#features tr.notice").hide();
	jQuery.flash.notice('Feature has been created.');

Which will update the current page without reloading:

When class remote is not present, a :js response from the server will look like this in the browser:

The Twisth

Replace class remote with prop remote: true and voilà, it behaves exactly the same.

<form class="formtastic feature" id="new_feature" action="/apiconfig/plans/7/features" accept-charset="UTF-8" data-remote="true" method="post">
  ...
</form>

Verification

Check pre-existing forms and anchors with class remote.

Places already found and verified (by @josemigallas):

• Plan: New feature (Modal)
• Plan: Edit feature (Modal)
• Plan: Pricing tab
• Plan: New pricing rule (Modal)
• Plan: Edit pricing rule (Modal)
• Plan: Limits tab
• Plan: New usage limit (Modal)
• Plan: Edit usage limit (Modal)
• Invoice: New line item (Modal)
• Account detail: Send message (Modal)
• Remote fancy buttons
  • Plan's delete pricing rule
    app/views/api/pricing_rules/_pricing_rule.html.erb:10
  • Invoice action buttons
    app/views/finance/provider/invoices/_actions.html.erb
  • button_activate_or_suspend
  • button_to_toggle_suspend_buyer_user
  • remote delete_button_for
    • Delete plan feature
    • Delete plan usage feature
    • Delete referrer filter
  • action_button_to

[jlledom]

How can I verify this works fine?

[mayorova]

Great description @josemigallas !

But looking at the PR, does it mean that we keep maintaining this remote.js functionality? 😅

[josemigallas]

How can I verify this works fine?

I was looking for a good example and started a bit of archeology... Read the updated description 😂

[josemigallas]

Great description @josemigallas !
But looking at the PR, does it mean that we keep maintaining this remote.js functionality? 😅

It's a WIP

[akostadinov]

Looks great! Seems like a debug change needs to be removed though, before merging.

[mayorova]

This has a side effect in some forms, well, I've seen one so far:

Apparently, because of this style:

porta/app/assets/stylesheets/provider/_finance.scss

Lines 1 to 5 in 36eeb45

	#actions form.button-to.remote {
	@include white-box-shadow;
	display: block;
	padding: line-height-times(1);
	}

[josemigallas]

This has a side effect in some forms, well, I've seen one so far:

Apparently, because of this style:

porta/app/assets/stylesheets/provider/_finance.scss

Lines 1 to 5 in 36eeb45

	#actions form.button-to.remote {
	@include white-box-shadow;
	display: block;
	padding: line-height-times(1);
	}

Ah! Good catch. I certainly didn't look in the css

[jlledom]

I only tested the invoices screen and works fine. The code looks good.