Sisu
- 01. Nurgeline
- 02. Reageeri
- 03. Vue
- Kuidas võrreldakse raamistike süntaksit?
- Populaarsus ja turg
- Mobiilirakenduste arendamine
- Muud raamistikud, millele 2020. aastal tähelepanu pöörata
- Järeldus
Aastal 2020 on meid õnnistatud paljude raamistike ja raamatukogudega, mis aitavad meid veebiarenduses. Kuid alati polnud nii palju vaheldust. Veel 2005. aastal lõi kutt Brendan Eich uue skriptikeele nimega Mocha. Kuu aega pärast ümbernimetamist LiveScriptiks muudeti nimi uuesti JavaScripti. Sellest ajast alates on JavaScript läinud kaugele.
2010. aastal nägime esimese JavaScripti raamistikuna selgroo ja nurga kasutuselevõttu ning 2016. aastaks kasutas JavaScripti 92 protsenti kõigist veebisaitidest. Selles artiklis heidame pilgu kolmele peamisele JavaScripti raamistikule (Angular, React ja Vue) ja nende staatusele järgmisel kümnendil. Kas soovite oma saidi luua? Proovige seda veebisaitide loojate loendit.
Mõne hiilgava ressursi jaoks vaadake meie loendit veebidisaini tööriistadest, meie veebimajutusteenuste kokkuvõtet ja ka seda suurepärase kasutaja testimistarkvara loendit.
01. Nurgeline
AngularJS ilmus 2010. aastal, kuid 2016. aastaks oli see täielikult ümber kirjutatud ja välja antud kui Angular 2. Angular on Google'i välja töötatud täielik veebiraamistik, mida kasutavad Wix, Upwork, The Guardian, HBO ja teised.
Plussid:
- Erakordne tugi TypeScripti jaoks
- MVVM võimaldab arendajatel eraldada tööd ühes rakenduse jaotises sama andmekogumi abil
- Suurepärane dokumentatsioon
Miinused:
- On natuke õppimiskõveraga
- Vanalt versioonilt migreerimine võib olla keeruline.
- Uuendusi tutvustatakse üsna regulaarselt, mis tähendab, et arendajad peavad nendega kohanema
Mis järgmiseks?
Nurgas 9 on Ivy vaikekompilaator. See on loodud paljude jõudluse ja faili suurusega seotud probleemide lahendamiseks. See peaks muutma rakendusi väiksemaks, kiiremaks ja lihtsamaks.
Kui võrrelda Angulari varasemaid versioone React ja Vue, siis
kimpude lõplikud suurused olid Angulari kasutamisel palju suuremad. Ivy võimaldab ka progresseeruvat hüdratatsiooni, mida nurkade meeskond näitas I / O 2019-l. Progressiivne hüdratatsioon kasutab Ivy't järk-järgult serverisse ja klienti laadimiseks. Näiteks kui kasutaja hakkab lehega suhtlema, tuuakse komponentide kood koos mis tahes käitamisajaga tükkhaaval.
Tundub, et Ivy on Angulari jaoks jätkuvalt suur fookus ja lootus on teha see kõigile rakendustele kättesaadavaks. 9. versioonis on võimalus loobuda kuni nurkani 10.
02. Reageeri
React vabastati algselt 2013. aastal Facebooki poolt ja seda kasutatakse interaktiivsete veebiliideste loomiseks. Mõnede nimetamiseks kasutavad seda Netflix, Dropbox, PayPal ja Uber.
Plussid:
- React kasutab virtuaalset DOM-i, millel on positiivne mõju jõudlusele
- JSX-i on lihtne kirjutada
- Värskendused ei kahjusta stabiilsust
Miinused:
- Üks peamisi tagasilööke on keerukamate rakenduste loomiseks kolmandate osapoolte teekide vajamine
- Arendajad jäävad parimal viisil arenemiseks pimedusse
Mis järgmiseks?
React Conf 2019 puudutas Reacti meeskond paljusid asju, millega nad on tegelenud. Esimene on valikuline niisutus, kus React peatab kõik, millega töötab, et seada esikohale komponendid, millega kasutaja suhtleb. Kui kasutaja läheb konkreetse jaotisega suhtlema, hüdreeritakse seda piirkonda. Meeskond on töötanud ka Suspense'i kallal, mis on Reacti süsteem koodi, andmete ja piltide laadimise korraldamiseks. See võimaldab komponentidel enne renderdamist midagi oodata.
Nii valikulise niisutamise kui ka peatamise võimaldavad samaaegne režiim, mis võimaldab rakendustel reageerida paremini, võimaldades Reactil võimaluse sisestada suuri blokke madalama prioriteediga töid, et keskenduda millelegi, mis on kõrgemal prioriteedil, näiteks vastamiseks kasutaja sisendile. Meeskond mainis ka ligipääsetavust kui teist valdkonda, mida nad on vaadanud, keskendudes kahele konkreetsele teemale - fookuse ja sisendliideste haldamine.
03. Vue
Vue töötas 2014. aastal välja Google'i endine töötaja Evan You. Seda kasutavad Xiaomi, Alibaba ja GitLab. Vue suutis lühikese aja jooksul ja ilma suurema kaubamärgi toetuseta saada arendajatelt populaarsust ja tuge.
Plussid:
- Suurusega väga kerge
- Algaja sõbralik - lihtne õppida
- Suurepärane kogukond
Miinused:
- Seda ei toeta tohutu ettevõte, näiteks Reageeri Facebookiga ja Nurgeline Google'iga
- Reaalset struktuuri pole
Mis järgmiseks?
Vue on seadnud endale eesmärgi olla kiirem, väiksem, hooldatavam ja hõlbustada arendajatel omakeelse sihtimist (kui teil on probleeme hooldusega, kaaluge veebimajutusteenust). Järgmine väljaanne (3.0) ilmub 2020. aasta I kvartalis, mis sisaldab parema jõudluse tagamiseks virtuaalset DOM-i ümberkirjutamist koos täiustatud TypeScripti toega. Samuti on lisatud Composition API, mis pakub arendajatele uut viisi komponentide loomiseks ja nende funktsiooni järgi korraldamiseks töö asemel.
Vue arendajad on olnud hõivatud ka tööga Suspense, mis peatab teie komponendi renderdamise ja muudab varukomponendi, kuni tingimus on täidetud.
Vue värskenduste üks suur asi on see, et need tagavad ühilduvuse tagurpidi. Nad ei taha, et te oma vanu Vue projekte lõhuksite. Nägime seda üleminekul 1.0-lt 2.0-le, kus 90 protsenti API-st oli sama.
Kuidas võrreldakse raamistike süntaksit?
Kõiki kolme raamistikku on pärast nende väljaandmist muudetud, kuid üks asi, mille mõistmiseks on ülioluline, on süntaks ja selle erinevus. Vaatame, kuidas süntaks võrdub sündmuste lihtsa sidumisega:
Vue: The v-on direktiivi kasutatakse sündmuste kuulajate lisamiseks, kes kutsuvad Vue eksemplarides meetodeid. Direktiividele on lisatud eesliide v- selleks, et näidata, et need on Vue poolt pakutavad eriatribuudid, ja kasutada renderdatud DOM-i suhtes erilist reaktiivset käitumist. Sündmuste käitlejad võib esitada kas tekstisiseselt või meetodi nimena.
mall> nupp v-on: click = ”clickHandler”> Klõpsake mind / nupp> / template> skript> eksportige vaikimisi {nimi: “HelloWorld”, meetodid: {clickHandler: function () {console.log (“Mind klõpsati! ”); }}}; / skript>
Reageeri: React paneb märgistuse ja loogika JS-i ja JSX-i, mis on JavaScripti süntaksilaiend. JSX-iga edastatakse funktsioon sündmuste käitlejana. React-elementidega sündmuste käitlemine sarnaneb DOM-elementide sündmuste käsitlemisega. Kuid on mõningaid süntaktilisi erinevusi; näiteks Reakti sündmused nimetatakse pigem camelCase'i kui väiketähtede abil.
function Button () {function clickHandler (e) {console.log (“Mind klõpsati”); } naasenupp onClick = {clickHandler}> Klõpsake mind! / nupp>; }
Nurga all: Sündmuse sidumise süntaks koosneb võrdsusmärgi vasakul sulgudes olevast sihtürituse nimest ja paremal tsiteeritud malli avaldusest. Teise võimalusena võite kasutada peal- eesliide, tuntud kui kanooniline vorm.
@Komponent ({selector: "app-click-me", mall: `button (click) = 'onClickMe ()'> Click me! / Button>`}}) eksportklass ClickMeComponent {onClickMe () {console.log (" Sa klõpsasid mind! ”); }}
Populaarsus ja turg
Alustame kolme veebiraamistiku üldpildi vaatamisest ülejäänud veebis, uurides W3Techsi statistikat. Angulari kasutab praegu 0,4 protsenti kõigist veebisaitidest, JavaScripti raamatukogu turuosa on 0,5 protsenti. React kasutab 0,3 protsenti kõigist veebisaitidest ja 0,4 protsenti JavaScripti raamatukogu turuosa ning Vue omab mõlema puhul 0,3 protsenti. See tundub üsna ühtlane ja võite arvata, et arvud kasvavad.
Google'i trendid: Viimase 12 kuu jooksul on React otsinguterminite järgi kõige populaarsem, millele järgneb tihedalt Angular. Vue.js on üsna tagapool; üks asi on aga meeles pidada, et Vue on ülejäänud kahega võrreldes veel noor.
Tööotsingud: Kirjutamise ajal on React ja Angular tööde nimekirjade osas tõepoolest üsna sarnased, tõepoolest Vue tõepoolest. LinkedInis näib aga olevat rohkem nõudlust Vue arendajate järele.
Virna ülevool: Kui vaatate Stack Overflow Developer Survey 2019. aasta tulemusi, on React ja Vue.js mõlemad kõige armastatud ja soovitud veebiraamistikud. Nurgeline istub kõige armastatud, kuid kolmandal kohal kõige enam armastatud, üheksandal positsioonil.
GitHub: Kõige rohkem tähti on Vue-l 153 000-ga, kuid kõige vähem panustajaid (283). Reactil on seevastu 140 tuhat tähte ja 1341 kaasautorit. Angularil on ainult 59,6 tuhat tähte, kuid kõige rohkem on neid kolmest 1579 tähega.
NPM-i trendid: Ülaltoodud pilt näitab viimase 12 kuu statistikat, kus näete, et Reactil on suurem allalaadimiste arv kuus võrreldes nurkade ja Vue-ga.
Mobiilirakenduste arendamine
Suure kolme üks põhitähelepanu on mobiilne kasutuselevõtt. Reactil on React Native, mis on muutunud populaarseks valikuks iOS- ja Android-rakenduste loomiseks mitte ainult Reacti kasutajatele, vaid ka laiemale rakenduste arendamise kogukonnale. Nurgaarendajad saavad kasutada NativeScripti natiivrakenduste jaoks või Ionicut hübriidsete mobiilirakenduste jaoks, samas kui Vue arendajad saavad valida NativeScripti või Vue Native'i. Mobiilirakenduste populaarsuse tõttu on see endiselt investeerimise peamine valdkond.
Muud raamistikud, millele 2020. aastal tähelepanu pöörata
Kui soovite 2020. aastal midagi uut proovida, vaadake neid JavaScripti raamistikke.
Ember: Avatud lähtekoodiga raamistik veebirakenduste loomiseks, mis töötab MVVM-i mustri põhjal. Seda kasutavad mitmed suured ettevõtted nagu Microsoft, Netflix ja LinkedIn.
Meteor: Täispakett JavaScripti platvorm kaasaegsete veebi- ja mobiilirakenduste arendamiseks. Seda on lihtne õppida ja sellel on väga toetav kogukond.
Järeldus
Kõik kolm raamistikku paranevad pidevalt, mis on julgustav märk. Igaühel on oma vaatenurk ja eelistatud lahendus, millist lahendust ta peaks kasutama, kuid see sõltub tegelikult projekti suurusest ja see muudab teid mugavamaks.
Kõige olulisem aspekt on nende kogukondade jätkuv toetus, nii et kui plaanite alustada uut projekti ja te pole kunagi ühtegi neist kolmest varem kasutanud, siis usun, et olete nende kõigiga kindlates kätes. Kui teil pole veel olnud võimalust mõnda neist kolmest raamistikust õppida, siis soovitan õppimise alustamiseks teha uusaastalubadus. Nende kolme ümber keerleb tulevik.
See sisu ilmus algselt netiajakirjas.
