Chào mừng bạn đến với TUTUAPP

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *