jQuery Upgrade Guide | Proper jQuery Migration to Latest Version | jQuery Tutorial
Aug 15, 2023
jQuery Upgrade Guide | Proper jQuery Migration to Latest Version | jQuery Tutorial
jQuery migration is a process to upgrade jQuery version properly without removing backwards compatibility for jQuery based plugins. Developers deal with a variety of projects. They usually work on old projects more than new projects. Old projects have older versions of jQuery. If they have got older version of jQuery, jQuery plugins used in site will also be old. Old jQuery plugins depend on old jQuery version. So if you change jQuery version without migration, old jQuery plugins will stop working. Console will be full of errors and javascript related warnings. What if you want to add a new functionality to site that needs a jQuery plugin dependent on newer jQuery version?https://www.webstylepress.com https://www.facebook.com/webstylepress/ https://twitter.com/webstylepress https://www.instagram.com/webstylepress https://www.linkedin.com/company/webs …https://github.com/webstylepress
Content
5.76 -> Hey devs welcome to web style press
if you are new to this channel
10.08 -> i invite you to subscribe and join us
hit subscribe button and click bell icon
18.8 -> jquery migration is a process
to upgrade the jquery version
23.52 -> in your website without removing backwards
compatibility developers deal with variety
31.6 -> of projects they usually work on old projects
more than new old projects have older version
39.6 -> of jquery if they have got older version of jquery
jquery plugins used in the site will also be old
49.04 -> most probably old jiggery plugins depend on
old jkd version so if you change jquery version
57.36 -> without migration for the website
old jkd plugins will stop working
64.32 -> console will be full of errors but if you
want to add a new functionality to site
70.8 -> that needs a jquery plug-in dependent on newer
jquery version you see it commonly with wordpress
79.76 -> wordpress front-end throws old jquery version by
default they do it to maintain old jkd plugins
87.28 -> compatibility i wonder why though because plugins
that are good get upgrades regularly or they die
97.04 -> but anyhow in such scenarios when you have to
upgrade jquery migrate do not just upgrade the
106.32 -> url for the jquery to the latest jquery
version you should migrate the jquery
114 -> migration will make sure you have the older
version of jquery and latest code of jquery
120.16 -> together with backwards compatibility support i
will show you how can you safely migrate jquery
128.96 -> so here i have a document html document
and this is the output and let's search
137.12 -> jquery if we go to the jquery website and then
we will download the degree the version is 3.5.1
152 -> you can download the compressed version
production version of jquery 3.5 this is the
159.6 -> latest version and then you see below
you you can see the jquery migrate plugin
170.32 -> and jquery migrate comes with jquery
migrate 1.4.1 and then jq migrate 3.3.0
184.48 -> so you can go to cdngs and search jquery there
and you can uh click the link and you will see
194.8 -> the jquery and you can find different versions of
jquery here so i want to use jquery version 1.12.4
209.12 -> this one so change the version here and you
will get the path here and you can copy you
216.4 -> can use just copy script tag and you can
come to your page and paste the path here
224.32 -> so this is jquery one point one two point four
237.12 -> so this is degree one point 12.4 that is
included in the wordpress in most cases i believe
247.28 -> and now if you uh go to your page and right
click and inspect element inspect click try
256.48 -> get the inspector bring up the inspector and
then go to console there is nothing and then
265.04 -> now as you can see this is the
old jquery version now if you
272.96 -> do it like this you go to you go here and
then you grab the latest jquery version and
281.2 -> jiggerman.js and then copy script tag
and then apply the script tag here
288.88 -> then let's see what happens you won't see anything
here but this is not the correct way to do it
300.48 -> let's upgrade it let's run migration
304.64 -> so the migration is this one so this is
the uh jquery migrate 1.4.1 let's use this
318.32 -> copy this copy link address and then paste it here
328.48 -> and then use script tags
335.6 -> so now we have got another
version jquery migration
344.32 -> 1.4.1
349.2 -> so now let's see and now you will
see something you will see that
356.4 -> migrate is installed version 1.4.1 now let's
go back and grab the latest jquery again
368.64 -> copy script tag and so we had
the jquery version 1.2 1.12.4
377.84 -> and then now 1.4.1 this is the migration version
that is installed and now we through here
388.8 -> jquery latest version and let's see what
happens now might install version 1.4.1 so
402 -> now we want to upgrade it more so official
documentation says that there are two
407.84 -> version of migrate the first will help you to
upgrade your pre 1.9 jk record to jquery 1.9
416.32 -> or up to three you you can get that version
here so if we run we run this version
424.08 -> and then we want to run this version download
compressed production jquery migrate 3.3.0
432.4 -> we want to migrate this jquery our
grid version to the latest version
439.68 -> so now we are running the second
442.72 -> migration so let's see what happens now
455.36 -> now it says jquery 3.0.0 plus
required migrate plugin loaded
462.4 -> multiple times migrate is installed
version 3.3.0 so jquery 3.0.0 required
473.92 -> so it needs jquery 3.0.0 version so
let's give this the required version
486.56 -> 3.0.0
491.12 -> this one and jqueryman.js our required
version copy script tag and then
504.24 -> in the middle paste this thing
511.84 -> and now you can see that my
grid is installed version 1.4.1
517.12 -> and then migrate is installed version 3.0
3.3.0 now our jquery has been upgraded to
527.84 -> version 3 and if now i will uncomment
this code let's see what happens
541.6 -> and now i don't see any errors or any warnings
so this was the jquery initially that we had
552.8 -> really old one jquery and then we run a
migration for jquery 1.4.1 and this was here
561.44 -> then we wanted to migrate it further to version
three but for that we needed jquery version 3.0.0
569.68 -> so we placed it here and then we ran the
second migration that was jquery migrate 3.3.0
576.32 -> and then we used jquery version 3.5.1 that is
the latest version this is how you upgrade jquery
586.72 -> in a proper way jquery 3.0.0
596.56 -> and jquery migrate three jquery latest
610.32 -> so if i am wrong then you can
614.4 -> let me know in the comments but this is the
proper way you cannot just ignore the old versions
621.68 -> in a in an old website and just use this newer
version your old plugins will break and you will
631.2 -> get a lot of errors in console so if you want to
upgrade jquery you will have to run migrations
638 -> you will have done migration and then you
will have to see if there is any error or
642.56 -> warning in the console and if it asks something uh
any version of jquery you'll have to provide that
651.52 -> and then you'll have to proceed further so this is
how you properly migrate jquery that's it for me
660.8 -> i hope you liked this video if i missed
anything or you have something to add you
665.68 -> can comment down below ask questions related
to this topic if you haven't already subscribed
671.52 -> subscribe to the channel and hit bell icon
to receive updates join us on social media
676.32 -> links are in the description below stay tuned for
more updates and i will see you in the next video
Source: https://www.youtube.com/watch?v=8LR3xgCz1Wo
