# Miksi edes keskustellaan jQueryn tulevaisuudesta?

Älä missaa artikkelin yllä olevaa videota!

koska jQuery pyörittää yhä valtaosaa frontend web Logicista! Se toimii noin 70% alkuun web-sivuja ja 20% koko web (lähde). Se on valtava!

mutta tämä tekee kysymyksen sen tulevaisuudesta vielä oudommaksi.

jqueryllä on ongelmia. Sitä on kaikkialla, eikä se ole kovin tulevaisuudenkestävä. Se oli hämmästyttävä työkalu, kun se julkaistiin vuonna 2006, mutta ydinasiat se korjattu takaisin aikaan eivät ole kysymyksiä enää. Sen sijaan, voit nyt törmätä paljon enemmän ongelmia käytettäessä jQuery.

ymmärtääksemme tämän, tarkastelkaamme jQueryn vuonna 2006 asettamia kysymyksiä.

JavaScript oli tavallaan rikki ja selaimet toteuttivat sen hyvin eri tavalla

Tämä oli yksi tärkeimmistä asioista, joissa jQuery auttoi. Yhtäkkiä sinulla oli helppokäyttöinen API, jonka avulla voit manipuloida Domia. Ja vielä parempi: sama API toimi kaikissa suurimmissa selaimissa!

$('h1').text('Awesome!')

JavaScript ja web kokonaisuudessaan olivat huomattavasti vähemmän kypsiä

jQuery salli kehittäjien yksinkertaisesti ”tehdä enemmän” Webissä – tarkemmin sanottuna frontendissa. Mukaansatempaavien käyttöliittymien luominen (johon tarvitset JavaScriptin) oli helpompaa, koska voit käyttää hyvin dokumentoitua API: a. Elementtien animointi, sisällön lisääminen ja poistaminen, tyylien muuttaminen ja kohteiden uudelleen tilaaminen oli huomattavasti helpompaa kuin vanilla Javascriptillä. jQuery lisäsi myös tehokkaan ja vielä helppokäyttöisen Ajax API: n, joka teki myös taustapyyntöjen lähettämisen helpoksi. Tämä on JavaScript-pohjaisen UIs: n keskeinen rakennuspalikka, sillä sinun ei tarvitse ladata uutta sivua jokaisen käyttäjän toiminnan yhteydessä ja voit ladata tai manipuloida palvelinpuolen tietoja kulissien takana.

    Opi Vue.js

    Vu.JS tekee reaktiivisten verkkosivujen rakentamisesta yksinkertaista. Mukava syntaksi + tehokkaat ominaisuudet – se ei ole pahin paketti voisi saada.

    Learn React

    React on oiva vaihtoehto Vuelle.js. Se on erittäin suosittu ja sinun pitäisi ehdottomasti olla huomaamatta sitä!

    Opi Kulmikas

    Kulmikas aloitti kaiken! Opi puitteet, jotka ovat äiti React.js Ja Vu!

# mikä on muuttunut?

jQueryn korjaamat asiat eivät ole enää kysymyksiä.

JavaScript kypsyi, selaimen yhteensopivuus parani huomattavasti. Meillä on elinvoimainen frontend kehitys ekosysteemi tuhansia paketteja ja työkaluja, voimme käyttää paljon tehokkaampia Ajax kirjastot kuten Axios jos haluamme.

Tämä ei tarkoita, että kaikki olisi hyvin, mutta jQueryn korjaamia ydinongelmia ei oikeastaan ole enää olemassa.

sen sijaan jQuery on nykyään työkalu, jota käyttävät usein (ei tietenkään aina) vähemmän kokeneet web-kehittäjät, jotka eivät koskaan siirtyneet vanilla Javascriptiin tai kehyksiin kuten Angular tai React.

ja se on tärkeää ymmärtää muuten: kyse ei ole vain jQuery vs Angular-pelistä. Vanilla JavaScript on todellinen vaihtoehto!

vaikka DOM traversal ja manipulointi oli paljon vaikeampaa vuonna 2006, saimme monia toimintoja, kuten querySelector rakennettu vanilla JavaScript nyt. Nämä asiat toimivat ja ne toimivat jopa selaimissa.

Jos sinulla on mahdollisuus käyttää vanilla JavaScriptiä sen sijaan, että saavuttaisit periaatteessa saman jQueryn kanssa, on tietenkin parempi käyttää vanilla-vaihtoehtoa. Tallennat ylimääräisen paketin latauksen, eikä sinun tarvitse opetella ylimääräistä syntaksia.

# It ’s not just Vanilla JavaScript…

It’ s not just vanilla JavaScript though. Meillä on yksinkertaisesti parempia vaihtoehtoja nykyään.

Vanilla Javascriptillä on selvästi yhä rajansa. Jos olet rakentamassa monimutkaista käyttöliittymää, jossa on paljon logiikkaa JavaScriptin kautta toteutettuna, päädyt nopeasti tilanteisiin, joissa sinun on pohjimmiltaan kirjoitettava jonkinlainen spagettikoodi. Valtiovallan hallinta on loppujen lopuksi vaikeaa.

eikä vain sitä. Törmäät säännöllisesti tilanteisiin, joissa DOM-logiikkasi rikkoutuu, jos päätät joskus tilata HTML-koodisi uudelleen (tai ottaa käyttöön uusia elementtejä).

<div> <h1>What's new?</h1> <div> <p>An interesting discussion over the future of jQuery evolved over the last days.</p> </div></div>
$('#news') .find('div') .find('p') .text('This replaces the paragraph text - hopefully')

tämä koodi lakkaa toimimasta, jos muutat HTML-koodia näin.

<div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

ja sama pätee vanilla JavaScript-läpiajotekniikoihin.

on selvää, että voit kirjoittaa koodia, joka toimisi vielä yllä olevassa skenaariossa. Mutta se voi sitten hajota eri olosuhteissa. Tai päädyt melko pitkä ketju läpikulkumenetelmiä turvallisesti valita mitä aiot manipuloida. Ja tämä vain vaikeutuu, jos luot tai poistat DOM-elementtejä manuaalisesti jQueryn kautta.

Jos sinulla on joskus ollut käyttötapaus, jossa sinun piti lisätä ja poistaa elementtejä dynaamisesti-sanokaamme perustuu johonkin JavaScript array tilalla tietoja – tiedät kipua, joka liittyy, että käytettäessä jQuery tai vanilla JavaScript. Jätä rauhaan, jos haluat työskennellä näiden elementtien kanssa (esim.liittää klikkauskuuntelijoita tai tyylejä).

# Frameworks to the rescue!

siihen on korjaus!

JavaScript frameworks kuten Angular, React (oh, that ’ s a library actually – forgive me React folks) tai Vue esimerkiksi.

kaikissa näissä kehyksissä on yksi perustavanlaatuinen ero verrattuna jqueryyn (ja vanilla Javascriptiin): et kirjoita koodia navigoidaksesi Dom: ssä manuaalisesti.

käytät sen sijaan deklaratiivista lähestymistapaa.

Mitä tämä tarkoittaa?

no, näin voit huoletta valita ja manipuloida HTML – sisältöä tämän artikkelin aiemmasta sisällöstä-tällä kertaa käyttämällä Vueta:

<div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

kuten näkyy, Vue noudattaa selvästi erilaista filosofiaa kuin jQuery. Sama pätee muuten myös reagointiin ja Kulmikkuuteen.

käytän tämän artikkelin loppuosassa vueta esimerkeissä – yksinkertaisesti siksi, että siinä on erittäin mukava syntaksi ja se on helppo aloittaa. Tuo vue verkkosivullesi ja olet valmis menemään.

mutta kulmikas ja reagoiva noudattaa myös vastaavia lähestymistapoja. Jos haluat oppia näistä lisää, minulla on sinulle hyödyllisiä resursseja:

  • Angular – The Complete Guide
  • React – The Complete Guide
  • Angular vs React vs Vue

ja tietenkin, jos haluat sukeltaa syvemmälle Vuehen, minulla on resursseja myös siihen: Vue – The Complete Guide.

ne kaikki keskittyvät siihen, että voit yksinkertaisesti merkitä DOMIIN paikkoja, joissa sisältö tulisi näyttää. Sinun ei tarvitse kuvailla polkua siihen paikkaan – puitteet hahmottavat sen sinulle!

# mutta Vue-ratkaisu on pidempi!

Jos vertaa jQueryn ratkaisua Vue-ratkaisuun, huomaa selvästi, että Vue-lähestymistapa on hieman pidempi (kirjoitettujen koodirivien suhteen).

mutta tämä oli hyvin yksinkertainen esimerkki! Monimutkaisempia esimerkkejä kasvaa nopeasti koko ja, mikä vielä pahempaa, monimutkaisuus, kun se tulee jQuery koodi tarvitaan. Mutta ei Vuelle (tai muille kehyksille).

Tämä johtuu siitä, että yleinen lähestymistapa on niin erilainen. Jos vain kuvailet tietorakennettasi, logiikkaasi ja sitä, miten liität tietosi DOM: iin (mallisi niin sanotusti), sinun ei tarvitse kirjoittaa niin paljon lisäkoodia, kun HTML-koodi tai liiketoiminnan logiikka monimutkaistuu.

Jquerylle se on kuitenkin eri asia. Jos sinun täytyy päästä elementtejä, jotka ovat syvästi sisäkkäisiä tai jos sinun täytyy tehdä monimutkaisia asioita, kuten silmukointi läpi-voidaan luoda elementtejä, voit nopeasti päätyä monimutkaisempi (ja myös virhealtis) koodi näit aiemmin.

Tämä tuottaa:

<div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

sisäkkäiset <div> elementit klikataan ja highlighted CSS-luokka lisätään mihin tahansa elementtiin klikattaessa.

harkitse vue (ja HTML) – pätkää, jolla saavutettaisiin sama:

new Vue({ el: '#output', data: { shoppingList: , },})

tässä on vielä joku rivi koodeja, joita tarvitset, mutta se on niin paljon helpompi ymmärtää, ylläpitää ja muokata! Ilmoitat, miltä HTML-koodisi pitäisi lopulta näyttää, kuvailet tietosi ja hallinnoit selected tilaa JS-koodissasi.

taika tapahtuu niin sanottujen direktiivien avulla-v-for (silmukointiin), v-on (tapahtumien kuunteluun) ja v-bind (HTML – elementin vaihtamiseen) tekevät kaiken työn täällä. React ja Angular saivat yleensä vertailukelpoisia ratkaisuja, vaikka React ei käytä direktiivejä. Se ei silti pakota sinua kirjoittamaan käsin kaikkia koodin valintaa ja luomista elementtejä.

kun (frontend) web-sovelluksesi kasvaa ja rakennat vielä monimutkaisempia UIs: ita, tulet rakastamaan tällaista deklaratiivista lähestymistapaa, joka ei pakota sinua loputtomiin, ylläpitämättömiin ketjuihin css()$(...) ja appendTo() puhelut.

# onko jQuery ainakin pienempi?

Vue tarjoaa selvästi erilaisen syntaksin-se tekee paljon raskasta työtä DOM Accessin ja manipuloinnin suhteen.

sillähän on selvästi hintansa, vai mitä? jQuery on pienempi.

no … no. Se ei pidä paikkaansa.

maaliskuusta 2018 lähtien jQuery painaa 29kb miilattuna ja gzippattuna, kun taas Vue tulee 30kb miilattuna ja gzippattuna.entä reagoiva ja kulmikas?

React actually koostuu kahdesta paketista: reaktiosta ja Reactista itsestään. Yhdessä, sinun täytyy ladata noin 34kb minified + gzipped saada se vauhtiin.

Angular on huomattavasti suurempi, sillä Angular on paljon isompi kehys, joka sopii erityisesti isoihin yrityskohteisiin. Tämäntyyppisten sovellusten kohdalla se voittaa jQueryn, ei siksi, että se on Pakkauskoko, vaan siksi, että se säästää sinut tuskalta.

# So…never use jQuery again?

kysymys on nyt tietysti siitä, pitäisikö aina käyttää Vueta, kulmaa vai reagoida silloin. Vai onko vielä käyttötapauksia, joissa jQueryn käyttäminen on järkevää?

yleisesti ottaen uskon, että jQueryn aika on päättymässä. Ainakin nykyisessä muodossaan.

voit silti valita sen triviaaleihin tapauksiin, mutta miksi et vain käyttäisi vanilla JavaScriptiä siihen ja säästäisi ylimääräistä 30kbs + ylimääräistä syntaksia, johon sinun on päästävä? Olet parempi web-kehittäjä, jos tunnet vanilla JS anyways.

jQuery näkee selvästi edelleen paljon käyttöä monissa legacy web apps ja se tulee pysymään siellä jonkin aikaa.

Jos sinun on työskenneltävä tällaisten verkkosovellusten parissa, et luultavasti löydä keinoa kiertää jQuerya toistaiseksi ja sen oppiminen saattaa siten olla vielä aikasi arvoista.

myös monet suositut kolmannen osapuolen paketit luottavat edelleen jQuery-Bootstrapiin, CSS – kehykseen, niin tekee esimerkiksi (valitettavasti se tekee niin myös uusimmassa versiossaan – 4.x). Ottaa lisätä ylimääräistä riippuvuutta, koska tällainen paketti on ärsyttävää, siksi olen henkilökohtaisesti aina yrittää selvittää, mitä jQuery tekee, että tietyn paketin. Kun olet saanut tämän tiedon, voit rakentaa toiminnallisuuden vanilla JS: llä tai jollain muulla kehyksellä ja onnistuneesti päästä eroon jquerystä sen jälkeen.

Vastaa

Sähköpostiosoitettasi ei julkaista.