Updating jQuery in Canvas

[jperkins]

In 2017, Instructure announced that Canvas would be moving away from jQuery. As such, our implementation of jQuery has been stagnant since then. We’ve been moving away a page at a time as we implement our new Instructure UI (instructure.design). 

Due to security concerns with the legacy version of jQuery implemented in Canvas, we recently determined that we would like to update jQuery. As such, we’ve been engaged in a significant effort to upgrade jQuery in Canvas to a modern version.

The first update from jQuery v1.7.2 -> v1.8.3 is being released to production Feb 28. It’s already been on beta for the past 2 weeks. We’ve also released our first major version upgrade (v1.8.3 to v2.2.4) into Canvas beta. This will go into production March 13. We’re targeting the implementation of at least jQuery v3.5 as part of this initiative (though hopefully we’ll get to the latest version v3.7.1). 

Due to these updates, it is expected that some customer’s customJavaScript may be broken / will break as we continue to release updates. Please continue to validate that customizations behave as expected in Canvas beta for the next several releases. As a reminder, your institution is responsible for maintaining your customizations.

Ideally, your custom JavaScript does not leverage jQuery (https://youmightnotneedjquery.com/). For our customers who do use jQuery and rely on features available in a previous version, it is possible to import jQuery as part of your custom JS to remove the dependency on Canvas to provide the correct version support for your customizations. 

We appreciate your understanding as we work towards making Canvas more secure and modern.

Thanks, 

Jeremy Perkins

[chriscas]

Hi @jperkins,

Thanks for the informative blog post!

As a Canvas admin who does some small CSS/JS customizations, this is something that I feel like should be included in release notes, and have at least the month's advance notice the regular release notes provide.  I appreciate the detail in the blog, but this is very little notice and outside of the usual change communication areas.  I'm assuming it's part of the 2/28 deploy given the date lines up, but it's not even in those notes.  It's probably too late to change the timeline for tomorrow, but I'd really urge Instructure to use the defined release notes/deploy notes processes for all Canvas LMS changes in the future.

-Chris

[audra_agnelly]

It is disappointing to know that this update has been in Beta for 2 weeks without any notice for admins to test/update any JS customizations before this rolls out in the deploy later today.

[dbrace]

Why was this not communicated in advance?

[jsowalsk]

@jperkins When should we look out for this update today? Since we don't know what will be impacted we want to make sure everything is functional as expected.

[JamesSekcienski]

This likely explains the reason some users have reported differences and issues with how jQuery was working in Beta.

For anyone that is using jQuery, if you have the time/resources, I highly encourage reviewing the You Might Not Need jQuery website that @jperkins shared.  It helped me realize that a lot of the basic customizations can be easily written in vanilla JavaScript without the need for jQuery.

[ChristineBoard]

My team manages custom code for a dozen or more Canvas implementations for higher ed graduate programs, and we really could have used this information two weeks ago. When we found that the window.jQuery variable was unexpectedly no longer available in Beta after the upgrade to 1.8, we had to scramble to patch every single one of our themes so we could be sure they wouldn't all fail on Wednesday, in the middle of a course term. If we had known this was part of a progressive upgrade, we could have structured our patch better and made a testing plan from the start.

[juliejohnson]

I'm here to chime in with everyone else and express my concern that this information should have been communicated weeks ago and in a more visible place. We now have broken JavaScript in Prod we are trying to fix.

[jperkins]

I'd like to apologize to those of you that this caught off guard. Thank you for taking the time to engage here and share your questions and/or frustrations.

We acknowledge that one days notice was not ideal, however the updates that are underway are critical to our commitment to uphold the highest standards as they relate to security and have a tight delivery timeline.

We regularly update libraries in Canvas as part of our normal development life cycle without including these updates in release notes or similar - I acknowledge that this doesn't help with the impact you experienced, but wanted to call out that it is not outside of our general practices.

We recognize that many of you have custom JavaScript that was leveraging the Canvas version of jQuery as a dependency in scripts. I was prompted to write this blog post about the update when it became apparent from some community posts that their JS customizations weren't working as normal in Beta. We then pushed out a fix yesterday (restoring the window.jQuery variable) to resolve some of the issues that were reported in the community to reduce the fallout.

We understand and agree that we would have liked to give more notice than a single day. The deploy that went out today was a minor version change and we hoped for minimal issues. The upcoming (March 13) changes are major version changes and we expect them to have a bigger impact.

[chriscas]

Hi @jperkins,

Thanks for the update post!  I have two follow-ups...

First, we thought we were supposed to see jQuery updated to version 2.2.4 in beta already, but we are still on 1.8.3 right now.  Have those plans changed?

Second, as a Canvas admin, I totally get the security aspect of things and the need to do those sorts of updates in a timely manner.  I did want to call out that I do see a difference between updating back-end server things that customers can't access and something like jQuery that customers may be using.  You're probably right that customers don't need to know about updates to ruby, web server software, etc...  However, things that are available to us to use I feel like definitely need to have updates communicated.  I have a CS degree, and I know how much coders and admins hate writing documentation and logging changes, but for customers that really is a critical step.  The change was obviously in beta for a couple weeks, so if a message had at least been in the deploy notes, I think some of the frustration being expressed here would have been at least slightly reduced.  Hopefully there can be some improvements on this for future updates.

-Chris

[jperkins]

@chriscas I'm seeing jQuery v2.2.4 in your beta environment. You can run the following query in the browser console to check:

console. log(jQuery(). jquery)

Also, we've listened to customer feedback and are putting the upcoming jQuery releases into the Canvas release notes for increased visibility.

[DanBurgess]

Hi @jperkins,

We see that JQMIGRATE was added in Beta with the upgrade to jQuery 2.2.4. 

Will JQMIGRATE be a part of the upgrade to Prod on March 13? 
Or is this only for Beta in order to allow folks to review warnings identifying reliance on deprecated features? 

[chriscas]

Thanks @jperkins!

We are seeing the new(er) version in Beta now too.  I guess we just needed a little more patience here this morning :).

-Chris

[jperkins]

Hi @DanBurgess, 

The current release on beta (as of Feb 29, 2024) has jQuery v2.2.4 and jQuery-migrate v1.4.1 installed. The jQuery-migrate library was installed to primarily help with our own migration efforts and will also be enabled in production on March 13 as part of the normal releases. We anticipated that it will be removed once the migration effort is completed.

While migrate is installed, we have muted the warning messages in Canvas. However, those warning messages are stored in an array and can be accessed via the developer toolbar console by calling jQuery.migrateWarnings. For more information regarding jQuery-migrate, the 1.x docs can be found here: https://github.com/jquery/jquery-migrate/tree/1.x-stable#readme

[dtod]

Will you remove jQuery-migrate in beta before removing it in production? I'm getting a warning in beta, but no line number, and it's not clear what the issue actually is.

[RyanNorton]

Thanks for the question @dtod,  hopefully I can clarify some of the expectations on this.

At present, there are no immediate plans to remove jQuery migrate upon completion of this work.  As we upgrade to jQuery 3.5 we do intend to replace jQuery migrate 1.4 with 3.4.1.  It is worth noting that while jQuery migrate 1.4 patches jQuery pre-1.9 up to 1.9, 3.4.1 will patch jQuery 1.9 up to 3.x.  This means that any custom JS support that was removed in jQuery 1.9 will not be patched.

Any plans to remove jQuery migrate 3.4.1 are not yet planned or scoped in the near future and would be communicated in advance, along with recommended strategies to help the process be as successful as possible.

@jperkins shared some great tips in this thread, including leveraging https://youmightnotneedjquery.com to avoid relying on jQuery where possible, which would be our ultimate recommendation.  Additionally, providing your own jQuery as needed could be one strategy to ease the reliance on the Canvas jQuery model (or even loading your own jQuery migrate plugin could be an option).  You can also use $.migrateMute = false in your scripts to enable logging.

You can expect to see jQuery 3.5 (and jQuery migrate 3.4.1) reach Beta on March 28, followed by Production on April 10.

[RyanNorton]

I'm excited to share our final update on the jQuery upgrade work!  We are finishing up our efforts with jQuery 3.7.1, which will be rolling to Production on April 24th (and should be visible on Beta this afternoon)!

We still encourage everyone to read through the recommendations above to reduce reliance on jQuery going forward.  Thanks to everyone for their questions and engagement as we have modernized jQuery. 

[dkpst5]

This appears to have broken some Canvas pages that still used jQuery, like Classic Quizzes question groups collapse/expand. Are there any other parts of Canvas I should expect to break that we haven't seen yet?

[RyanNorton]

@dkpst5 Thanks so much for reporting this, we do not intend for this to break any pages in Canvas so we absolutely want to hear if you're seeing anything unexpected.  Can you clarify what behavior you are seeing in Classic Quizzes (or anywhere else) so we can investigate?

[RyanNorton]

@dkpst5 I just wanted to follow up and confirm that this behavior with the Classic Quizzes question groups has been corrected and pushed to Production.  Thanks for reporting this and let us know if you see anything else we should take a look at!

[dkpst5]

Thank you for the speedy fix! It will be much appreciated by our faculty as they hammer out final exams.