Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Web] Migrate off jQuery to React equivalents #3

Open
1 of 8 tasks
mikelambert opened this issue Jul 3, 2017 · 1 comment
Open
1 of 8 tasks

[Web] Migrate off jQuery to React equivalents #3

mikelambert opened this issue Jul 3, 2017 · 1 comment

Comments

@mikelambert
Copy link
Owner

mikelambert commented Jul 3, 2017

We continue to use jQuery, and pull in ~100kb (pre-gzip) JS on our site. Ideally we would rewrite these dependencies in React (which we've fully committed to).

The current users of jQuery, in need of React rewrites/equivalents.

These are easier because they exist in React templates already:

  • the class results page, including expand/collapse of the navbar, and some scroll-to-selected-element functionality js/classResults.js
  • the search box functionality on the results page templates/results.html

These are a bit more complex, since it involves convert this page over to a React template (some small templates/ and python changes, to mirror what is done in our results, event, and class pages...populate a JSON dict in the python code, I can help with this bit)

  • the add event page, for selecting and triggering actual event adds templates/add.html. (needs to set up a new react template, so some python and templates/ changes)
  • the promote page, to enter the fb event url when clicking on an fb event templates/promote.html. (needs to set up a new react template, so some python and templates/ changes)
  • the backstretch functionality on the homepage background, for the auto-fading dynamically-loaded image carousel js/homepage.js. I think this functionality (dynamically load images as we scroll through the backgrounds, without preloading them all up front) might require a bit of custom work, not sure if there's an off-the-shelf npm package for this.

Misc changes:

  • various admin pages (i'm fine just sticking a <script src="jquery"></script> on these admin pages though

These are a bit harder, in that they exist in the base html templates, and so require a much larger (ie more infrastructural) migration to React JS to pull these off.

  • the app-install banner we show on repeat-usage, using jQuery.modal js/app-install-promo.js
  • the top-of-page smart-banner we show on iOS Chrome (and Android). js/common.js
@mikelambert mikelambert changed the title Migrate off jQuery to React equivalents [Web] Migrate off jQuery to React equivalents Jul 3, 2017
@mikelambert
Copy link
Owner Author

I have split the jquery dependencies out to a separate "bundle", which can be imported/not-imported on a page-by-page basis. Currently it is imported on every page.

The last two items above (app-install, smart-banner) are jQuery dependencies that trigger on every page on the site. I will focus on eliminating those two, at which point we can conditionally import jquery on the remaining pages where it is necessary (admin, classes, add, promote, homepage), and tackle them independently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant