[QUEST] Making jQuery Optional

[wycats]

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 28da357, 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 f71bbd0 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.

[wycats]

If you want to help get my branch passing in normal mode, follow the same instructions for contributions, but target https://github.com/wycats/ember.js/tree/no-jquery

[topaxi]

I'm not sure if this matters at all, but if you want access to https://github.com/topaxi/ember-jquery and it's npm package or even move it somewhere please contact me :)

[wycats]

@topaxi what does that package do right now?

I assume you're thinking we can use it to let people opt into the original functionality?

[wycats]

I'm actively working on getting my own branch passing again.

[alexander-alvarez]

I took a look through and ember-debug & ember-console have no references to jQuery

[ro0gr]

I've checked all the packages w/ and w/o jquery. Here are packages that pass:

• ember-console (no tests)
• ember-views (no tests)
• ember-debug
• ember-metal
• ember-runtime
• ember-utils
• internal-test-helpers

[ro0gr]

I would like to pick ember-routing package

[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 f71bbd0 for where this was initially setup...

[acorncom]

Looks like ember-views and internal-test-helpers can be switched over to run in CI without jQuery. I've added a separate todo for ensuring all these packages are locked down

Edit: was looking at an older version of the packages.js file, we're down to four modules

[wycats]

@acorncom woot woot

[wycats]

I got the tests passing on my branch, but for some reason tests are failing in IE11.

I'm off for the evening, but I'd love a PR to get things passing on IE11. If nobody tackles it, I'll try to wrap it up later this weekend 😄

[RobbieTheWagner]

Anything I can help with? 😄

[wycats]

@rwwagner90 do you think you can take a look at the IE11 bug on my branch?

[RobbieTheWagner]

@wycats yeah, I can take a look. No promises that I will figure it out though. Will give it a shot tomorrow morning 👍

[topaxi]

@wycats ember-jquery just includes jquery into the vendor bundle (it also allows for including the slim version jquery-slim instead of the full jquery build).

Yes, it was my thought that it might be used for opt-in to the old behavior.

[RobbieTheWagner]

@wycats is it just the browserstack failures you wanted me to look at? It seems that the first 4 jobs are failing on Travis, but not sure if they are related.

I tried running the browserstack tests locally, but couldn't seem to get it to work. Would you recommend setting up a VM for IE? I don't generally test in IE.

[kategengler]

@rwwagner90 (and others looking to test other browsers), Microsoft provides virtual machines for testing Edge & IE https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

[rwjblue]

Just landed the ember-glimmer changes that @wycats has been working on, and unlocked the ember-glimmer package above.

Anyone have time to pick up where @wycats left off and push ember-glimmer without jQuery over the finish line?

[wycats]

@rwjblue @snewcomer what do we need to do to land #16075 ?

[RobbieTheWagner]

@rwjblue still looking for help with ember-glimmer? I've never looked at the code there, but I can try to help 😄

[wycats]

@rwwagner90 looks like @ro0gr finished it here: #16096

Confirming!

[ro0gr]

@rwwagner90 @wycats yes, ember-glimmer is finished. The only remaining package is ember. I've took a brief looks there.
There are quite many failures. Most of them are straightforward to fix. However I think it might make sense to decouple.

[wycats]

@ro0gr decouple in what way?

[ro0gr]

@wycats I think to decouple per file is good enough. If somebody wants to do all in once he still can.
Here is the current state of ember package with jquery disabled:

• packages/ember/tests/component_context_test.js - 3 failing
• packages/ember/tests/helpers/link_to_test.js - 2 failing
• packages/ember/tests/integration/multiple-app-test.js - 1 failing
• packages/ember/tests/reexports_test.js - 1 failing
• packages/ember/tests/routing/basic_test.js - 38 failing
• packages/ember/tests/routing/query_params_test.js - 23 failing

[wycats]

@ro0gr thanks! I updated it!

[wycats]

@emberjs/learning-team-managers there will be some additional instructions for Ember Data:

emberjs/data#5320 (comment)

[wycats]

Is there anything left on the error message front?

[simonihmig]

I would think this can be closed?