Make WordPress Core

Opened 3 years ago

Last modified 5 weeks ago

#54171 assigned enhancement

Twenty Twelve: Replace frontend jQuery usage with vanilla JS

Reported by: flixos90's profile flixos90 Owned by: flixos90's profile flixos90
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch dev-feedback
Focuses: javascript, performance Cc:

Description

Using jQuery for a few simple JS interactions in WordPress themes is a common performance problem, which is in most cases relatively straightforward to address: Vanilla JavaScript has for the better part of a decade included enough APIs that work across all popular browsers so that the remaining benefits of jQuery are around a few utility functions, that could be re-implemented in a few lines of code. Using jQuery for such simple use-cases results in around 80% more JS code being loaded in the frontend.

This ticket focuses on removing jQuery as a frontend dependency for Twenty Twelve - specifically the frontend, as for example in the Customizer jQuery is loaded anyway (and performance is a bit less of a concern there).

Change History (7)

This ticket was mentioned in PR #1683 on WordPress/wordpress-develop by adamsilverstein.


3 years ago
#1

  • Keywords has-patch added; needs-patch removed
  • Replace jQuery usage in Twenty Twelve frontend scripts with vanilla JS.
  • Don't require jQuery to be loaded in the frontend as a result of the above.

Trac ticket: https://core.trac.wordpress.org/ticket/54171

#2 @SergeyBiryukov
3 years ago

  • Summary changed from Replace frontend jQuery usage with vanilla JS in Twenty Twelve to Twenty Twelve: Replace frontend jQuery usage with vanilla JS

sgomes commented on PR #1683:


2 years ago
#3

Adding a note that after these changes, the JS will no longer work correctly in IE 11. I'm not sure whether this is a concern, given that on the one hand we've deprecated it, but on the other hand we may want to preserve this theme working correctly in older versions of WordPress and their supported browsers.

felixarntz commented on PR #1683:


2 years ago
#4

@sgomes Thanks for the review! I've updated the code accordingly.

#5 @flixos90
2 years ago

Note that the implementation for this depends on whether we will drop IE support in the theme or not. The discussion around this should be centralized in https://core.trac.wordpress.org/ticket/55126#comment:2, which does the same for Twenty Sixteen.

#6 @karmatosed
6 weeks ago

  • Keywords dev-feedback added

As this has been sat for a little while I wanted to check-in how people are feeling about progressing this to close or coming up with a different resolution.

#7 @adamsilverstein
5 weeks ago

  • Focuses performance added
Note: See TracTickets for help on using tickets.