BREAKING: jQuery V4 Is Here (YES REALLY)

we spend a lot of time on this channel talking about new framework releases from react to spelt solid to all the other cool things that we're into it doesn't mean those are the only important things in fact they're not the most important thing either the most important thing on the web is probably the one that most of the web runs on still is based on and a lot of the apis and things we were just used to using every day initially came from that thing is of course jQuery which hasn't had a major release since 2016 while jQuery might feel much older than react is it really this is one of my favorite posts that I saw today want to feel old reactor was released in May 29th 2013 or 2468 days ago J was released on August 26th 2006 or 2468 days before react was released ready for something even more fun this tweet was almost exactly 4 years ago yes it has been more time between now and react's release than between react and jquery's release so as old as jQuery is it's not that much older than react and over time those things go the same amount far back in the past and if we care this much about react I think it's fair to care and think about jQuery and the hard work the maintainers are doing so why are we talking about jQuery now well believe it or not jQuery 4 is finally in beta after 8 years of hard work from the maintainers of jQuery I know this might not be the most exciting release to many but hear me out this is one of the most important releases for the modern web because maintaining something used by 78% of the top 1 million websites is terrifying so let's take a look at what they did how they did it and most importantly how it will affect the web going forward the jQuery 4.0.0 beta this blog post is written by Timmy Willison him and male are the two maintainers that have been leading the charge for this and we'll talk a lot about them and their contributions going forward jQuery 4 has been in the works for a long time but it's now ready for a Beta release there's a lot to cover and the team's excited to see it released we've got bug fixes performance improvements and some breaking changes we've removed support for Internet Explorer less than 11 after all still we can expect disruption to be minimal this is important they' have accepted and pushed for the change to not support old versions of Internet Explorer 11 but they're not killing iie entirely which is an important detail regardless they're being very careful with how this breaks things and I appreciate the care and thought they're putting into every detail with this release many of these breaking changes are ones the team has wanted to make for years but couldn't in a patch or minor release we've trimmed Legacy code removed some previously deprecated apis remove some internal only parameters to public functions that were never documented and drop support for some magic behaviors that were overly complicated we will publish a comprehensive upgrade guide before the final release to align the removed code and how to migrate the jQuery migrate plugin will also be to assist for now please try out the beta and let us know if you encounter any issues as usual the release is available on our CDN in the npm package manager third party CDN will not be hosting the Beta release will host the 4.0.0 final later here are some highlights from the jQuery 4 beta it's interesting when you're so used to like the modern react and other framework World seeing the CDN being the first distribution method mentioned because this is from the days where people would just embed a script tag for the framework they wanted to use I think it's awesome they're continuing to support that because a lot of applications are going to need the help and not being left in the dust just because new cool Frameworks exist is important this is thankless work and I appreciate them a ton for doing it goodbye internet explor less than 11 jQuery 4 dropped support for IE 10 and older some may be asking why we didn't remove support for ie1 we plan to remove support in stages and the next step will happen in jQuery 5 for now we've removed support for IE versions older than 11 and we've reduced the bundle size by 867 G bytes in just one PR not bad I know that 867 bytes doesn't sound like much when you multiply that by 78% of the web suddenly it is a lot I'm surprised that they're targeting IE as hard as they are though my mom's an x-ray radtech and I know in the medical world there's still a ton of people relying on crazy old Internet Explorer hacks for their internal software and solutions it's not great in the sense that like those can be hacked easily thankfully most of those surfaces and solutions are entirely offline and sandbox to like the hospitals Network so it's not too big of a deal but they're also never going to hire Engineers to go rewrite and react so supporting that is important it's cool to see that jQuery isn't dropping it with the four release I am curious when they plan to drop version five do they detail that here i1 is 10 years old that is crazy that's painful to think about I don't want to think about ie anymore let's keep going they did drop other browser supports including Edge Legacy which if you're not familiar was the version of Microsoft Edge before they moved to Chrome so now Edge is chromium based previously it was I based that's dead entirely old versions of iOS Firefox less than 65 and the Android browser most Android phones just use Chrome now killing that's a good thing and again if you need to support these old browsers you can simply stick with the old version of jqu they're not adding a bunch of new apis and things so you're not going to be missing out too much if you can't upgrade but it is nice for both you and your users if you're able so let's take a look at the deprecated apis that they've removed these functions have been deprecated for several versions it's time to remove them now that we've released a major these functions were either always meant to be internal or they now have native equivalents in all supported browsers yes that includes Internet Explorer 11 so now all of these things can be done with browser standards instead of relying on jQuery for it so they removed them good call everything from is function and is window which is funny to think you need a jQuery helped for that before even is array how hilarious is it that there was no good way to check if something was an array in JavaScript and jQuery just solved it for us very thankful these things have been dropped they even drop push sort and splice because why would you need those anymore also the font sizing here is because I command plus for my videos it's also why this is on the side so don't read too far into that just me trying to make this readable the jcy Prototype has long had array methods that did not behave like any other jQuery method and were always meant only for internal use these are push sort and splice we switched our of these methods to array functions instead of the jQuery prototypes for example dollar sign elements. push became array. push. call we're mentioning it here in case there are any other plugins out there that may have relied on these methods this XKCD comic comes to mind when talking about how things can break because users use things in weird ways changes in version 10.17 the CPU no longer overheats when you hold down the space bar comments this update broke my workflow my control key is hard to reach so I hold space bar instead and I configured emac to interpret a rapid temperature rise as control that's horrifying look my setup works for me just add an option to reenable the space bar heating every change breaks someone's workflow certainly does while this is a joke it touches on a very real thing especially when you have something as big as jQuery being used by so much of the web with a massive ecosystem of plugins around it the likelihood somebody's relying on some weird detail or implementation piece is very very high and calling out every change that might potentially break something is a level of focus and detail that I wouldn't expect from most developers ever and again this is why the work that this team is doing is so thankless and also so important now we're more into the things they were replacing the browser didn't have like focus in and focus out for a long time browsers did not agree on the order of focus and blur events which includes focus in Focus out focus and blur the amount of pain I have felt dealing with these things especially when twitch supported I still finally the latest version of all browsers that jQuery 4 supports have converged on a common event order unfortunately it differs from the consistent order that jQuery had chosen years ago which makes this a breaking change at least everyone is on the same page now J jquery's order for all four events in the previous versions was Focus out then blur then focus in then Focus starting with jQuery 4 we know longer override native Behavior this means that all browsers except IE will follow the current w3c spec which is blur Focus out focus focus in and also the w3c standard previously had a different order this is the stuff that jQuery devs know that no one else does like how many people in the world were aware of the fact that the w3c standard for the order of these events changed I wasn't until I read this and I have dealt with these problems in depth in the past again they are doing incredibly important thankless work inventing the browser standards working with w3c studying how people use these things studying necessary changes and making something that works for the majority of the web this is such an interesting read apparently browsers were already implementing things in this order even though w3c proposed this so they changed the spec last year to copy what browsers were doing and the only browser to follow the old spec was IE that's thank you for writing this form data support jQuery ajax has added support for binary data including form data that's actually really nice like modern Edition previously binary data was not a known data type and was converted to a string that behavior could be disabled by disabling data conversion and handling the data manually we decided to make this work automatically this is technically a breaking change but should be closer to the expected Behavior I love how careful they're being about breaking changes but also showing why and detailing how it can benefit people this is this is a really well-written post automatic Json P promotion removed previously J query. Ajax with data type Json with a provided call back would automatically convert to a Json P request today the preferred way to interact with a cross domain backend is with course which works in all browsers that jQuery 4 supports this should help avoid unexpected behaviors in case a developer is unaware that code could be executed from a remote domain with Json P again I didn't know that was a thing thankful that they called it out Jesus jQuery Source migrated to es modules there another one of those really cool ones where they modernized the code base for jQuery they made it way easier to work in and contribute to they also overhauled the min ifier which is a fun detail we'll go into in a bit but moving from AMD to es modules for a project that is again used by the majority of the web is terrifying but also really exciting this is a huge step forward for ES modules becoming the standard and if even jQuery supports it why don't you jQuery Source has always been published with jQuery releases on mpm and GitHub but could not be imported directly as modules without requirejs which was jquery's build tool of choice we have since switched to rollup for packaging jQuery and we also run tests on the es modules before packaging them that's a good modern setup it's really cool to see trusted types in CSP Jake for adds support for trusted types ensuring that HTML wrapped in trusted HTML can be used as input to jqu manipulation methods in a way that does not violate the required trusted types contact security policy directive this is some nerdy stuff about asynchronous script calls and cross domain requests for things like importing the jQuery bundle because you're importing it from a CDN weird d browser stuff that you probably don't have to worry about but it's nice that they're detailing it here they call it here that when upgrading from 3 you shouldn't run into compatibility issues I like that they call this out because when you see a major release most people immediately assume it's going to break everything and stay away from it this is a huge problem with next when next version 13 had app router as an option and everyone assumed next 13 meant app router and they couldn't use it because they were on pages router so a lot of projects stuck on next2 because they never understood that next 13 didn't mean redoing the entire router awesome they're calling this out directly because again it is really important but there are breaking changes so calling it 4.0 is important because they could deprecate a bunch of stuff they could change a bunch of stuff but they shouldn't break the vast majority of users anything they also have their jQuery migrate plugin which is also a huge thing to support when you consider how much jQuery code exists and how many people have built things around jQuery having to make all of those changes all over the web would suck and having a plugin that can automatically do a bunch of it for you it's a really nice addition that most Frameworks wouldn't consider one more cool thing that they call out here is the slim build yes there's a slim build of JRE that's even smaller than the standard full all things included build and this one uses the built-in promises standard so you can use native promises instead of their crazy call back stuff they had before yes jQuery is older than native promises in the browser there's a call out here for all of the contributors that have made this release possible I want to specifically call out Timmy for running the release writing this blog post also want to call Michelle because he worked his butt off on this release over half the commits that I could find were from him and he's been scooping me on this release for weeks now it wasn't for him I wouldn't be able to cover this and this release probably wouldn't have even happened just one fun example of the chaos he has worked on in May of last year he switched the minifier from uglify to turer and then just a month and a half later switch from turer to swc which means technically speaking jQuery is now built with rust I think that's awesome as crazy as it is switching your minifier twice in such a short window seems like they really wanted to modernize the project and S swc combined with its rollup plugins provided a better and faster experience for them to iterate on jQuery itself it's crazy to think the jQuery build tools and the ecosystem around their actual code base is so modern but that shows just how much these developers are paying attention they want to make sure that jQuery is and stays a great experience both for the maintainers and the developers using it I know jQuery is not going to be the most exciting thing for a lot of my audience but I really hope you guys understand the value and the hard work these maintainers are doing I'm not meing when I make this video I'm not meing when I say how important this release is it's so hard and scary making changes to things used by millions upon millions of websites and this team has worked their butts off for the last8 years to make sure this release would go smoothly huge shout out to everyone involved you're doing the work no one on the web appreciates I hope this video helps a few more people appreciate what you've done till next time peace nerds

Channel: Theo - t3․gg

Views: 184,554

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: 1bZYmpOOC8U

Length: 12min 29sec (749 seconds)

Published: Wed Feb 07 2024