[QUEST] Making jQuery Optional

This year, we’re going all-in on stripping down Ember to its bare essentials.

The first target in that effort is making jQuery optional, so applications that aren’t using jQuery don’t need to include the bulk. Successfully making jQuery optional cuts out around 30kb of minified/gzipped code, so it’s a very juicy target (it’s around 15-20% of the total size of an Ember app’s initial vendor.js!)

@rwjblue has done a lot of work so far on this front, and as of 28da357496089a34e5a59638e5d60220bd2b9d7d, the ember-application package tests clean without jQuery. Now it’s time to finish the job.

Testing Ember

If this is your first time working on Ember, you should follow these steps:

1. Make sure you’re on the latest version of Node or the latest LTS of Node
2. Update to the latest version of Yarn
3. Clone https://github.com/emberjs/ember.js.git
4. Run yarn to populate your node_modules
5. Run yarn start
6. Go to http://localhost:4200/tests/index.html?hidepassed in your browser.
7. Edit packages in your editor and refresh the browser. Rinse, repeat.

Testing Ember Without jQuery

To test Ember without jQuery, you add in the jquery=none query parameter when running tests.

If you do that, you’ll get a bunch of failures, so we’re working on removing the dependency on jQuery one package at a time.

To test a single package without jQuery, run the tests by hitting this URL:

http://localhost:4200/tests/index.html?hidepassed&jquery=none&package=ember-glimmer

Making Progress

In order to make progress on removing the jQuery dependency, you need to satisfy two criteria:

1. Fewer tests fail in jquery=none mode
2. No tests fail without jquery=none

Making progress in this way means that incremental work can always be merged into master, because there are no regressions when using Ember the way it’s always been used.

Current Status and Work Items

I (@wycats) got the ember-glimmer package down to 20 failing tests on the no-jquery branch of https://github.com/wycats/ember.js.

However, I violated Rule 2 under “making progress” and broke a bunch of tests when running jQuery.

So some things you could work on:

• Getting the tests passing again in normal mode in ember-glimmer
• Getting any remaining tests passing with jquery=none in ember-glimmer
• Get tests passing without jQuery
  • ember
    • component_context_test.js - 3 failing
    • link_to_test.js - 2 failing
    • multiple-app-test.js - 1 failing
    • reexports_test.js - 1 failing
    • basic_test.js - 38 failing
    • query_params_test.js - 23 failing
  • ember-application (@rwjblue)
  • ember-console
  • ember-debug
  • ember-extension-support
  • ember-glimmer (@ro0gr )
  • ember-metal
  • ember-routing
  • ember-runtime
  • ember-template-compiler (@ro0gr)
  • ember-testing (@snewcomer)
  • ember-utils
  • ember-views
  • internal-test-helpers
• Switch packages to run in CI without jQuery (see https://github.com/emberjs/ember.js/commit/f71bbd07cacd406d3ac12db7d170be791b3a5c50 for an example)
  • ember
  • ember-application
  • ember-console
  • ember-debug
  • ember-extension-support
  • ember-glimmer
  • ember-metal
  • ember-routing
  • ember-runtime
  • ember-template-compiler
  • ember-testing
  • ember-utils
  • ember-views (not tested at the moment)
  • internal-test-helpers
• RFC to allow users to opt out of jQuery (to make sure people not using jQuery get good errors if they or an addon try)
  • Write it (@simonihmig / @rwjblue)
  • Merge it
• Make sure that error messages are good if people try to rely on jQuery features when jQuery is disabled
  • this.$() in Ember Components
  • pending requests in the test helpers (@rwjblue, does this work a different way with the new test helpers?)
  • Anything else?
• Write an “opting out of jQuery” guide (like a deprecation guide, except jQuery is not deprecated yet) @emberjs/learning-team-managers

Not blockers for shipping the flag, but stuff we should work on before considering this feature “done”:

• Figure out how to strip out all the extraneous noise of all of the jQuery imports in no-jQuery mode
• Signify on Ember Observer that an addon does not depends on jQuery - 🔒 @kategengler

Hang Out in Community Slack

We’ll be coordinating this work on the community slack. You can join the #dev-jquery-removal channel.

[simonihmig]

I would think this can be closed?

[rwjblue]

Once we get a package passing, it should be “locked” down in the lib/packages.js so that CI runs it both with and without jQuery.

See https://github.com/emberjs/ember.js/commit/f71bbd07cacd406d3ac12db7d170be791b3a5c50 for where this was initially setup…