Drop jQuery as a dependency #474

liudangyi · 2016-08-03T13:22:44Z

As discussed in rails/rails#25208, web APIs in browsers have developed a lot in past few years, making it possible for us to build UJS without jQuery. This PR primitively refactors the whole UJS based on native APIs.

Browsers compatibility

According to liudangyi#1, the new UJS should support IE10+ and all other modern browsers.

Main changes

Organize the source code as an NPM package using webpack, rather than a single monolithic file. Related PR: Add official support to npm #473.
Use many ES6 features, with babel as precompiler.
Use eslint instead of jshint.
No jQuery. The detailed solution is available here: Analyze which part of jQuery does UJS depend on liudangyi/jquery-ujs#1.

API changes

"overrides" feature is not implemented yet, because I can hardly find any possible scenario.
"window.rails" instead of "$.rails".
Event system. Since we are using native events (CustomEvent) now, there are some changes in binding / triggering an event if using jQuery. Some examples:

// Add an event listener using jQuery
// before
$(form).bind('ajax:success', function(e, data, status, xhr) {
  // code
})
// after
$(form).bind('ajax:success', function(e) {
  var data = e.originalEvent.detail[0]
  var status = e.originalEvent.detail[1]
  var xhr = e.originalEvent.detail[2]
  // code
})

// Manually trigger an event
// before
$(link).trigger('click')
// after
$(link)[0].click()
// before
$(form).trigger('submit')
// after, because el.submit() does't fire the submit event!
if ($(form)[0].dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })) !== false) {
  $(form)[0].submit()
}

Existing issues

(New name for jquery-ujs liudangyi/jquery-ujs#6) Naming. UJS should have a new name with no "jQuery". Any idea?
(jQuery compatibility and enhancement liudangyi/jquery-ujs#5) As "event system" in last section, maybe we should add some helper functions for binding / triggering events. A potential solution (for jQuery users) exists in test/settings.js. But is it necessary or not?

exec will replace rake itself!

See #2 Note: shotgun has a delay in handling HTTP request and may break the test from time to time. So we call test:server instead of test:reloadable in development.

See #3

Usage: npm run lint See #3

Use different indentation for variable declarator.

Most tests pass, except for three override tests since we are using a "static linking" provided by ES2015 now. It'll be fixed in the following commits.

So that all utils have no dependency on others

The priority of this feature is not very high.

This complements 2adb406

Fired when the ajax is stopped by "ajax:before" or "ajax:beforeSend". Now a data-remote request would either ends with "ajax:complete" or "ajax:stopped".

NOTE: File uploading support is removed in this commit, since we will employ a new method (FormData) to handle ajax sooner.

liudangyi · 2016-08-17T08:58:45Z

The code has been rewritten using CoffeeScript now. Could anyone help to review it?

pixeltrix · 2016-08-22T06:29:43Z

@liudangyi thanks your work on this - I'm not the biggest user of CoffeeScript so it's probably better that @javan is the final arbiter on that but it looks good to me. Also apologies on leading you astray with ES6 and WebPack - I think it's better in the end that we're consistent across all our JS projects.

@rafaelfranca is the plan to keep this code in the same repo or should we create a new repo for it? In some ways keeping it in the same repo makes sense - the legacy jquery-ujs would be on a separate branch and this new code would be our supported path going forward. My main concern is all of the existing links to this repo - if we rename it to rails-ujs how long does GitHub maintain redirects?

rafaelfranca · 2016-08-22T18:06:44Z

@rafaelfranca is the plan to keep this code in the same repo or should we create a new repo for it? In some ways keeping it in the same repo makes sense - the legacy jquery-ujs would be on a separate branch and this new code would be our supported path going forward. My main concern is all of the existing links to this repo - if we rename it to rails-ujs how long does GitHub maintain redirects?

I could not find any information about redirects in the GitHub help apart from the note that if you create a repository with the same name the redirect will break.

I believe a new repository will be better for this case, there are still applications that will request jquery-ujs for a long time and having it as a branch here will make harder to deal with issues and pull requests since the reporter will have to point to the right branch.

javan · 2016-08-23T14:16:02Z

@liudangyi, at a glance it looks pretty good! I'll try to review more thoroughly soon. Have you tested it in an actual Rails app?

All, is the aim to exactly match the current behavior (but without jQuery) or should we take this opportunity review and maybe trim some fat?

liudangyi · 2016-08-23T14:33:09Z

@javan I was trying to keep the same behavior as old jquery-ujs and all old tests are kept and passed (with necessary modification). But I don't think we must comply with the old behavior, since there are already some differences in events and ajax now.

connorshea · 2016-08-24T19:44:00Z

I don't mean to act a peanut gallery or anything, but I prefer plain JavaScript over CoffeeScript if only because the general pattern has been moving to either Vanilla JavaScript or ES6.

We've moved from CS to ES6 at GitLab 1, and Atom is slowly moving all their CoffeeScript over to ES6 [2]. There's a lot of momentum in moving from CoffeeScript to vanilla JavaScript (at least, vanilla once ES6 becomes supported by all major browsers in the future), and I wanted to at least mention it before we dig ourselves into a deeper hole.

Also worth noting that the CoffeeScript repository hasn't seen as much activity lately, and async/await support still isn't there.

Anecdotal evidence, but after moving to ES6 at GitLab we've seen more frontend developers contributing to the project. CS just isn't as friendly to frontend developers when compared to the vanilla/close-to-vanilla JavaScript that they're accustomed to.

Again, apologies for derailing this at all, and if there's a better place for me to open a discussion on this topic I'll gladly take it there.

[2]: atom/toggle-quotes#26 (comment) atom/atom@ab9a2a9

gitmihalis · 2016-10-02T14:50:21Z

Let me know if you'd like some help shoring this one up @liudangyi .

guilleiguaran · 2016-10-19T02:23:06Z

@liudangyi is this ready for review?

liudangyi · 2016-10-19T02:36:30Z

@guilleiguaran Yes.

guilleiguaran · 2016-11-15T04:28:09Z

Gemfile

 source 'https://rubygems.org'

 gem 'sinatra', '~> 1.0'
 gem 'shotgun', :group => :reloadable
 gem 'thin', :group => :reloadable
 gem 'rake'
+gem 'blade'
+gem 'uglifier'
+gem 'sprockets-commoner'


I don't think this gem is being used anymore in the PR, is it?

You are right. My mistake.

Actually we are not using them at all.

guilleiguaran · 2016-11-17T03:47:41Z

👍 on my side but would like to have the review of one of the maintainers of the library before of merging.

rafaelfranca · 2016-11-17T17:55:55Z

I still think this should be in another repository. jquery_ujs should be still here for people that use jquery and want to keep using. Also issues for jquery_ujs not necessarily will be issues in non-jquery_ujs, so even for issue triage that will be better.

guilleiguaran · 2016-11-17T19:05:32Z

@rafaelfranca agree totally, let's do it in that way

guilleiguaran · 2016-11-17T21:03:09Z

Ok, now the code of this PR is living under https://github.com/rails/rails-ujs, feel free to open PRs with improvements or open a issue in the new repo if you found any problem related to new implementation.

jakeNiemiec · 2017-06-08T00:27:11Z

@guilleiguaran Out of curiosity, what happened to rails-ujs?

guilleiguaran · 2017-06-08T00:35:21Z

rails-ujs was merged inside of rails core: https://github.com/rails/rails/tree/master/actionview/app/assets/javascripts

askehansen · 2017-06-08T05:30:37Z

Thank you!

liudangyi and others added 30 commits June 23, 2016 22:41

Rakefile: change exec to system

5f0a8c3

exec will replace rake itself!

Build the script using webpack and ready to rock

997bf8a

See #2 Note: shotgun has a delay in handling HTTP request and may break the test from time to time. So we call test:server instead of test:reloadable in development.

Remove .jshintrc because it's too old

20b1859

Remove all semicolons from JavaScript files

6b812b5

See #3

Use eslint && update rails.js

61b6c0d

Usage: npm run lint See #3

eslint for all tests

c258d4a

ESLint: indent with VariableDeclarator

cc6147c

Use different indentation for variable declarator.

Update dependencies

b754f70

Babel as js loader and use es2015 preset

e523c21

[VERY ROUGHLY] seperate rails.js into multiple modules

c536198

Most tests pass, except for three override tests since we are using a "static linking" provided by ES2015 now. It'll be fixed in the following commits.

Move {en,dis}ableFormElements to features/disable.js

2adb406

So that all utils have no dependency on others

Disable override test for now

46c0783

The priority of this feature is not very high.

Decompose and refactor confirm

dadd64b

Move {en,dis}ableFormElement to features/disable.js

8e98410

This complements 2adb406

Refactor data-method

46dc715

Rename: {en,dis}ableElement => {en,dis}ableLinkElement

5c58741

Rename: {en,dis}ableSelector => form{En,Dis}ableSelector

cf26840

Unified functions to disable / enable an element

d86271b

Bind events in rails.js rather than features/*.js

c3364ba

features/remote: new event "ajax:stopped"

386a520

Fired when the ajax is stopped by "ajax:before" or "ajax:beforeSend". Now a data-remote request would either ends with "ajax:complete" or "ajax:stopped".

features/method: refactoring for less indents

ecc555b

Avoid eslint error

bd4ffe6

Move isRemote condition to handleRemote function

a1d5ed0

Decompose form remote submit procedure

7cc897e

NOTE: File uploading support is removed in this commit, since we will employ a new method (FormData) to handle ajax sooner.

features/remote: not export isRemote function

7322c48

Refactor rails.js' structure

27b58e6

Refine data-confirm and data-disable

7c46386

Refine features/method

f9770a1

Refine features/remote

0d69901

Refine utils/csrf

6093ec1

liudangyi added 5 commits August 15, 2016 16:26

Add optional parens and keep aligned with Turbolinks' code style

399f5a1

Remove global eslintrc file, merge it into test/.eslintrc.yml

82e641f

Split Rails.ajax into multiple functions

bb644ae

Refine the structure of Rails.ajax

2c181f5

Cache $HOME/.nvm for CI

c8f54d7

liudangyi added 2 commits August 23, 2016 23:11

Support overriding, currently only Rails.href

0a16741

Fix a bug that script won't execute upon inserted in jQuery 2.x.

fdd6607

Provide a pre-built version of rails.js

4605991

guilleiguaran mentioned this pull request Oct 19, 2016

Drop jQuery as a dependency rails/rails#25208

Closed

guilleiguaran reviewed Nov 15, 2016

View reviewed changes

Remove 'uglifier' and 'sprockets-commoner' from Gemfile

4214612

Actually we are not using them at all.

liudangyi force-pushed the develop branch from f2c4d95 to 4214612 Compare November 15, 2016 09:18

guilleiguaran added a commit to rails/rails-ujs that referenced this pull request Nov 17, 2016

Import tree from rails/jquery-ujs#474

4682e8a

guilleiguaran closed this Nov 17, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drop jQuery as a dependency #474

Drop jQuery as a dependency #474

liudangyi commented Aug 3, 2016

liudangyi commented Aug 17, 2016

pixeltrix commented Aug 22, 2016

rafaelfranca commented Aug 22, 2016

javan commented Aug 23, 2016

liudangyi commented Aug 23, 2016

connorshea commented Aug 24, 2016 •

edited

Loading

gitmihalis commented Oct 2, 2016

guilleiguaran commented Oct 19, 2016

liudangyi commented Oct 19, 2016

guilleiguaran Nov 15, 2016 •

edited

Loading

liudangyi Nov 15, 2016

guilleiguaran commented Nov 17, 2016

rafaelfranca commented Nov 17, 2016

guilleiguaran commented Nov 17, 2016

guilleiguaran commented Nov 17, 2016 •

edited

Loading

jakeNiemiec commented Jun 8, 2017

guilleiguaran commented Jun 8, 2017

askehansen commented Jun 8, 2017 via email •

edited by kaspth

Loading

Drop jQuery as a dependency #474

Drop jQuery as a dependency #474

Conversation

liudangyi commented Aug 3, 2016

Browsers compatibility

Main changes

API changes

Existing issues

liudangyi commented Aug 17, 2016

pixeltrix commented Aug 22, 2016

rafaelfranca commented Aug 22, 2016

javan commented Aug 23, 2016

liudangyi commented Aug 23, 2016

connorshea commented Aug 24, 2016 • edited Loading

gitmihalis commented Oct 2, 2016

guilleiguaran commented Oct 19, 2016

liudangyi commented Oct 19, 2016

guilleiguaran Nov 15, 2016 • edited Loading

Choose a reason for hiding this comment

liudangyi Nov 15, 2016

Choose a reason for hiding this comment

guilleiguaran commented Nov 17, 2016

rafaelfranca commented Nov 17, 2016

guilleiguaran commented Nov 17, 2016

guilleiguaran commented Nov 17, 2016 • edited Loading

jakeNiemiec commented Jun 8, 2017

guilleiguaran commented Jun 8, 2017

askehansen commented Jun 8, 2017 via email • edited by kaspth Loading

connorshea commented Aug 24, 2016 •

edited

Loading

guilleiguaran Nov 15, 2016 •

edited

Loading

guilleiguaran commented Nov 17, 2016 •

edited

Loading

askehansen commented Jun 8, 2017 via email •

edited by kaspth

Loading