Top 3 Don’t-Need-jQuery
let’s look at the top three things you
don’t really need to use the jQuery
library for jQuery AJAX jQuery dot ready
and the jQuery Dom selected you’re
watching dev tips and I’m David what do
you think about my new studio yeah it’s
actually my mother-in-law’s yoga room
but I would say it’s more of a storage
room actually so in the spirit of Travis
who recorded dev tips previously in his
garage
I think this is it’s on the same path
once upon a time there was a browser
called Microsoft Internet Explorer 6
Egypt in 2001 with marks of Windows XP
and it conquered the web world it won
the browser war and it had a market
share of 80 percent at a time problem
with ie6 was that was buggy and it
didn’t really follow web standards and
because they had won this browser war it
was okay because they were the ruler and
the biggest sort of like what Google is
doing with amp pages in 2006 ie6 was
still a major player and you sort of had
to accommodate for them web 2.0 was
taking off and I think one of the
reasons was because of jQuery jQuery is
this library at the time this is over 10
years ago that really improved the lives
of web developers its main thing was the
Dom selector because at that time it
wasn’t trivial to query the Dom you
could get tags by name like the key tags
or it could get by ID but you couldn’t
fetch classes in a simple way but you
also had handy features for checkboxes
toggling them and changing the color of
things and fetching things through the
XML request the xhr or Ajax and it was
easy to pick up values and manipulate
the Dom if you wanted to build something
slightly more advanced like a web
application jQuery was the way to go
and pretty soon jQuery because it was so
good it started shaping with like
Microsoft’s dotnet environment and all
WordPress themes relied on jQuery and
jQuery so it became a de facto standard
in the web developing world today is a
different world standards have kora
and Microsoft are building great
browsers the edge browser we have
reactive frameworks observables you can
write really fancy JavaScript in the
client or in the server you can sort of
use the same JavaScript and you could
not do this over ten years ago
so Jake where did things very well great
job jQuery but today it’s obsolete you
don’t you don’t really need a jQuery and
it frustrates me when I see people use
jQuery for things you don’t really need
jQuery for if all you want to do is sort
of like select things in the Dom or wait
for the Dom to load or just fetch things
from different places you don’t really
need all these jQuery things anymore
and I just want to show some examples on
how we can do it without jQuery today
you don’t need Jake one small thing
though because jQuery is so prevalent
and because most not most but a lot of
sites are using it it’s still cached in
the browser because they served on CD
ends that are cached so they don’t
actually add that much load time to
sites so it’s sort of okay to use it it
just feels unnecessary when you can do
without it here I have a small example I
made in a code con for the number one
let’s try to take this button and tie
something to it like an alert pop-up
with the by just using jQuery so first
let’s find it mmm here in the HTML we
have the example one and then we have a
highlight class and then there are two
buttons here so it’s the first button
okay I would write like this number one
and because we don’t have any classes I
would just say take the first of this
type and type and then I’d add on click
enter
take some Long’s function and let’s do
something other J query yay so now it
should when it runs it ties the onclick
handler to the first button here oops
it’s example one of course oops oops
oops let’s click here jQuery it works
how would we do this without jQuery we
choose the document or query selector it
returns just the first element in all we
need is the first element so document
dot query selector and we’ll use the
same selector but for the second button
and to that we will add an event
listener and this is the same what
jQuery is doing it’s adding an event
listener the click event and then we’ll
do the same nee query let’s go for that
nee query so you see that it’s sort of
the same amount of code to do this it’s
not really that difficult or different
okay
second example so we often use doctor
jQuery dr. Eddie to wait for documents
so we’re not ready and then something
like this but then in later versions of
jQuery you can just do it or you should
just do it by doing like this
jQuery like that and then here you do
what you want to do wants everything has
loaded and then you could write like
this function but in the new syntax we
can write the shorthand which is just
this function and then we’ll just you go
and set some value here once it’s loaded
so we’ll see let’s look at the HTML
example too
we have the input ID here example 2 a so
let’s just use that and we’ll choose the
jQuery selector to stay in the jQuery
world so let’s go for the ID and just
set the value and then you do man Dom is
ready and now it will update if we save
okay we got the value here so how would
we do this without jQuery we would use
what jQuery is probably doing behind the
scenes we would wait for the Dom content
loaded we wait for the Dom content
loaded event it’s fired when the initial
HTML document has been completely loaded
and poorest without waiting for the
images and stuff if you want to wait for
more that’s when you use load but we
just want it we just want to know that
we have all the HTML so we can start
modifying it so document dot and now we
will just add an event listener to the
document add event listener and we’ll
add the listener Dom content loaded and
once this happens we will just call a
function that will update this and we’ll
do this without jQuery code so we’ll
just do it the old-fashioned way
yet element by ID and the ID is example
to be and this doesn’t need the hash the
hash bang it’s just the in the name of
the ID and we’ll just set its value to
something Dom is ready again oh well
it’s the only ready once
Dom is ready okay so how do we know that
this works we can make a small iteration
that will just run and just use
processing power and do stuff if
or other things happen so let’s just add
like a small thing to just fake that
something is happening that there is
more content being fetched but we want
to see that even though we run this
first not this should not happen until
everything else is loaded so we’ll just
fake that more things are going on by
making a small for loop let I equals 0
and I is less than 1 million perhaps or
10 million and then just increment and
then we’ll just do nothing while waiting
so you see that when we say it’s waiting
and then it’s updating so it’s tying
these handlers Dom content loaded these
event listeners but then it has to work
work work work and nothing is happening
until later has it worked let’s just
save and see that again here work work
work work work work work Dom content
loaded ok let’s just comment this out
because it’s a pain in there jQuery dr.
Jackson I said this was what got me into
probably the CSS selector thing was the
main thing for me to get into jQuery but
what made me stick with jQuery like 10
years ago was the jQuery dot H axe
function how would we do this with Ajax
we would first make a handler on the
kick sample3 and it’s a button and has
the bottom door class let’s add an
onclick handler and once we’ve clicked
will do something and what we’ll do is
call the Ajax function and with Ajax you
need to send some parents like the URL
and the URL were using is there
this one example URL and this example
URL is just some just gets whatever you
send them you send them euros and then
we will get home what what is one euro
this is a currency conversion thing we
have the base as euros and let’s just
see what whatever you send to them is in
US dollars so we need to fetch this
value and that value is called
example 3 U or L so let’s fish that or
select that brother and get the value
and then we know that it’s a we saw here
that is a JSON so we can just type that
here data type and we know that it stays
on P because it’s from a different
server and before you wrote success but
these days you write down and once it’s
done you get something we know it’s a
JSON and then we can do something with a
JSON and we will just update this field
with some cool text what is that code is
I think it’s example 3a I will just set
the value to that one to something so we
want to know how much whatever we send
in know that we send in euro here but we
know that it says euro here so we’ll
just use this as a thing so how much is
one and in the JSON we have the base one
euro
equals
how many us these okay and where is the
USD it’s in the rates and then just USD
rates USD so we send the JSON the rates
and the USD and if it doesn’t work if
there’s a failure we get an error then
we’ll just do something with that
console the law they’re not the best
error handling but something save this
will this work
boom we fixed the euro here is from the
JSON and this value is also from the
JSON so that’s how you do it with jQuery
AJAX but how would we do this without
jQuery AJAX will do the same thing will
just make first week query and find an
add an onclick handler to this so
document dot let’s just use get element
by I D because just have an ID no I
don’t think that has an ID but no no I
did okay then you just use the query
septic query selector and we’ll do the
same thing it’s example three rock
bottom
info instead so once we have that let’s
add an on click handler to it and on the
on kit
we’ll do a function and what the
function will do is basically it will
just fetch a URL and that URL is this
one
so we should just fish that one but with
document dot get element by ID and we
have the except example three URL and
we’ll use that value and now the cool
thing is that this is a promise so the
promises looked sort of the same the
promise is just basically okay we run
this and then whenever we get whatever
we’re waiting for we’ll do something so
we’ll do like this and then when we get
a response we’ll do something and the
way fetched us is that it returns a
response and it has a convenience
function which can convert the response
to a JSON and in the Ajax example the
jQuery AJAX will already specify that
here instead that we knew that we were
waiting for JSON but here we say it once
we get it and we expect it to be Jason
so we just convert it to JSON and then
once we have the JSON we’ll do whatever
we want to do and this is the same thing
sort of we go for the document dot get
element by ID and it’s example 3b
instead and then we’ll update that value
set the value and we just we know that
the data is the same that we expect will
just use same thing here and then we
should catch whatever errors pop up so
if there’s an error let’s just catch
that and come so the error will this
work
Ajax works without Ajax
without jQuery boom same thing what is
cool here is that we can use whatever
here let’s just put my native currency
sec and just update here boom boom or
Danish crowns around
now the video thinking what about the
compatibility these are new techniques
what’s also a feature was with jQuery
was I sort of just you have this one API
jQuery API and all those functions and
then it’s just sort of fixed everything
around compatibility it just made it
work with ie6 so the query selector how
many people are using it or how many
browsers okay all browsers globally 98
point 37 percent and I say that missing
out one or two percent who are we
missing out let’s just we can’t even
find them the ones we’re missing out
that don’t support this perhaps if the
ones that have that don’t even have a
Java Script enabled because all the
browsers are supporting this so it
doesn’t really matter and we’re building
with JavaScript so we need Java Script
can I use Dom content loaded 98% support
it it’s the same thing the ones that
don’t have Java Script perhaps don’t
support it because what I can see here
is that all the major browser versions
supported some IE 6 IE 8 doesn’t support
it too bad it was released in 2009 and
then i 9 was released in 2011 2011 7
years ago if someone is using an old
computer with ie6 7 8 do I want to
support them how wide are what is the
resolution on that desktop or whatever I
don’t care
and now Ajax or fetch fetch is pretty
new let’s see what is the support for
fetch it says here 88% that is not that
much
okay ie 11 two-point 68% I don’t care
about I is ie 11 the latest browser in
Windows is Microsoft edge right right I
don’t know
okay fetch is a bit tricky because it’s
not supported by 12% on not supporting
it of the users globally ie is a big one
two point six eight percent but edge is
the new browser the new into the
Explorer and of course edge supports it
it’s a good browser but then we have iOS
Safari which ok iOS the the iOS errs
they upgrade pretty frequently so here
is like globally 0.53 percent but in
Sweden’s
2 percent that are still on ten point
two so that’s a bit disappointing
so I’d say for fetch if you’re building
a website that you want everyone to use
usually use a polyfill that sort of
replicates the best functionality with a
certain code for those browsers that do
not are not compatible with it but using
promises is such a better way of working
that I think it’s worth it you should
use patch so there are things you can
totally accomplished without jQuery
jQuery of Ajax mmm use fetch you may use
a polyfill if you’re having old people
using it jquery dot ready you don’t have
to dong condors loaders supported by
everything and the dom selector the
jquery selector thing you can just use
document
very selectively and is also supported
by almost everything I’m David and we
just watched an episode of debits I hope
you learn something and it is didn’t
write that in the comments if you did
write that in comments if you have ideas
for other episodes to write that in the
comments I read all the comments so I
really appreciate you giving back thank
you for watching and see you in the next
video bye