Vsebina
- 01. Kotna
- 02. Reagiraj
- 03. Vue
- Kako se primerja sintaksa okvirov?
- Priljubljenost in trg
- Razvoj mobilne aplikacije
- Drugi okviri, na katere je treba biti pozoren leta 2020
- Zaključek
Leta 2020 smo blagoslovljeni s številnimi ogrodji in knjižnicami, ki nam pomagajo pri spletnem razvoju. A ni bilo vedno toliko raznolikosti. Leta 2005 je moški po imenu Brendan Eich ustvaril nov skriptni jezik z imenom Mocha. Mesece po preimenovanju v LiveScript je bilo ime spet spremenjeno v JavaScript. Od takrat je JavaScript zelo napredoval.
Leta 2010 smo uvedli Backbone in Angular kot prvi okvir JavaScript, do leta 2016 pa je 92 odstotkov vseh spletnih mest uporabljalo JavaScript. V tem članku si bomo ogledali tri glavne okvire JavaScript (Angular, React in Vue) in njihov status v naslednjem desetletju. Bi radi naredili svoje spletno mesto? Preizkusite ta seznam graditeljev spletnih mest.
Za nekaj odličnih virov si oglejte naš seznam najboljših orodij za spletno oblikovanje, naš seznam storitev spletnega gostovanja in tudi ta seznam odlične programske opreme za testiranje uporabnikov.
01. Kotna
AngularJS je bil izdan leta 2010, do leta 2016 pa je bil popolnoma prepisan in izdan kot Angular 2. Angular je popoln spletni okvir, ki ga je razvil Google in ga uporabljajo Wix, Upwork, The Guardian, HBO in drugi.
Prednosti:
- Izjemna podpora za TypeScript
- MVVM razvijalcem omogoča ločevanje dela v istem odseku aplikacije z uporabo istega nabora podatkov
- Odlična dokumentacija
Slabosti:
- Ima malo krivulje učenja
- Prehod s stare različice je lahko težaven.
- Posodobitve se uvajajo precej redno, kar pomeni, da se morajo razvijalci prilagoditi njim
Kaj je naslednje?
V Angular 9 je Ivy privzeti prevajalnik. Vzpostavljen je bil za reševanje številnih težav glede učinkovitosti in velikosti datotek. Aplikacije naj bodo manjše, hitrejše in preprostejše.
Ko primerjate prejšnje različice Angular z React in Vue, se
končne velikosti snopov so bile veliko večje pri uporabi programa Angular. Ivy omogoča tudi progresivno hidracijo, kar je ekipa Angular pokazala na I / O 2019. Progressive Hydration uporablja Ivy za postopno nalaganje na strežnik in odjemalca. Ko uporabnik na primer začne interakcijo s stranjo, se koda komponent skupaj s katerim koli izvajanjem pridobi po delih.
Zdi se, da je Ivy velik poudarek za Angular in upamo, da bo na voljo za vse aplikacije. V različici 9 bo na voljo možnost izključitve, vse do Angular 10.
02. Reagiraj
React je leta 2013 prvotno izdal Facebook in se uporablja za izdelavo interaktivnih spletnih vmesnikov. Za naštevanje jih uporabljajo Netflix, Dropbox, PayPal in Uber.
Prednosti:
- React uporablja virtualni DOM, ki pozitivno vpliva na zmogljivost
- JSX je enostavno napisati
- Posodobitve ne ogrožajo stabilnosti
Slabosti:
- Ena glavnih ovir je potreba po knjižnicah drugih proizvajalcev za ustvarjanje bolj zapletenih aplikacij
- Razvijalci ostanejo v temi glede najboljšega načina razvoja
Kaj je naslednje?
Na React Conf 2019 se je ekipa React dotaknila številnih stvari, na katerih je delala. Prva je selektivna hidracija, kjer bo React zaustavil vse, na čemer dela, da bi dal prednost komponentam, s katerimi uporabnik komunicira. Ko uporabnik začne sodelovati z določenim odsekom, bo to območje hidrirano. Ekipa je delala tudi na Suspense, ki je Reactov sistem za urejanje nalaganja kode, podatkov in slik. To komponentam omogoča, da na nekaj počakajo, preden se upodobijo.
Selektivno hidracijo in suspenzijo omogoča sočasni način, ki aplikacijam omogoča, da so bolj odzivne, tako da Reactu omogočijo vstop v velike bloke dela z nižjo prioriteto, da se osredotočijo na nekaj, kar je višje prioritete, na primer odziv na uporabniški vnos. Skupina je kot drugo področje, ki so si ga ogledali, omenila tudi dostopnost, tako da se je osredotočila na dve posebni temi - upravljanje vmesnikov za fokus in vnos.
03. Vue
Vue je leta 2014 razvil Evan You, nekdanji uslužbenec Googla. Uporabljajo ga Xiaomi, Alibaba in GitLab. Vue je v kratkem času in brez podpore večje blagovne znamke uspel pridobiti priljubljenost in podporo razvijalcev.
Prednosti:
- Zelo majhne velikosti
- Začetnikom prijazen - enostaven za učenje
- Odlična skupnost
Slabosti:
- Ne podpira ga ogromno podjetje, kot sta React s Facebookom in Angular z Googlom
- Brez prave strukture
Kaj je naslednje?
Vue si je zastavil cilj, da bo hitrejši, manjši, bolj vzdržen in razvijalcem olajša ciljanje na domače (če imate težave pri vzdrževanju, razmislite o storitvi spletnega gostovanja). Naslednja izdaja (3.0) bo predvidoma v prvem četrtletju 2020, kar vključuje navidezno prepisovanje DOM za boljše delovanje skupaj z izboljšano podporo za TypeScript. Dodan je tudi API za sestavo, ki razvijalcem ponuja nov način za ustvarjanje komponent in njihovo razvrščanje po značilnostih namesto po operacijah.
Tisti, ki razvijajo Vue, so bili zasedeni tudi z delom Suspense, ki zaustavi upodabljanje vaše komponente in upodobi nadomestno komponento, dokler ni izpolnjen pogoj.
Ena izmed odličnih stvari s posodobitvami Vue je, da ohranjajo združljivost s nazaj. Nočejo, da bi razbili svoje stare projekte Vue. To smo videli pri selitvi z 1,0 na 2,0, kjer je bilo 90 odstotkov API-ja enako.
Kako se primerja sintaksa okvirov?
Od izdaje so se vsi trije okviri spremenili, toda ena stvar, ki jo je nujno razumeti, je sintaksa in kako se razlikuje. Oglejmo si, kako se sintaksa primerja pri preprosti vezavi dogodkov:
Vue: The v-on direktiva se uporablja za pripenjanje poslušalcev dogodkov, ki prikličejo metode na primerkih Vue. Pred direktivami je predpona v- da bi pokazali, da gre za posebne atribute, ki jih ponuja Vue, in uporabili posebno reaktivno vedenje za upodobljeni DOM. Obdelovalce dogodkov lahko dobite v vrstici ali kot ime metode.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> izvoz privzeto {ime: “HelloWorld”, metode: {clickHandler: function () {console.log (“Kliknili so me! "); }}}; / skripta>
Reagirajte: React postavlja oznake in logiko v JS in JSX, sintaksno razširitev k JavaScriptu. Z JSX se funkcija prenese kot obdelovalec dogodkov. Obravnava dogodkov z elementi React je zelo podobna obravnavi dogodkov na elementih DOM. Obstajajo pa nekatere skladenjske razlike; na primer, reakcijski dogodki so poimenovani z uporabo camelCase in ne z malimi črkami.
function Button () {function clickHandler (e) {console.log (»Kliknili so me«); } gumb za vrnitev onClick = {clickHandler}> Klikni me! / gumb>; }
Kotni: Sintaksa vezave dogodkov je sestavljena iz imena ciljnega dogodka v oklepajih na levi strani enačbe in citirane izjave predloge na desni. Lahko pa uporabite tudi na- predpono, znano kot kanonična oblika.
@Component ({selector: “app-click-me”, predloga: `button (click) =” onClickMe () ”> Click me! / Button>`}) izvozni razred ClickMeComponent {onClickMe () {console.log (“ Kliknili ste me! "); }}
Priljubljenost in trg
Začnimo s pregledom splošne slike treh okvirov v zvezi s preostalim spletom s preučitvijo statističnih podatkov W3Techs. Trenutno Angular uporablja 0,4 odstotka vseh spletnih mest, tržni delež knjižnice JavaScript pa 0,5 odstotka. React uporablja 0,3 odstotka vseh spletnih mest in 0,4-odstotni tržni delež knjižnic JavaScript, Vue pa 0,3-odstotni za obe. To se zdi precej izenačeno in pričakovali bi, da se bodo številke povečale.
Googlovi trendi: V zadnjih 12 mesecih je React najbolj priljubljen pri iskanju, tesno mu sledi Angular. Vue.js precej zaostaja; vseeno pa si je treba zapomniti, da je Vue v primerjavi z drugima dvema še vedno mlad.
Iskanje zaposlitve: V času pisanja tega članka sta se React in Angular precej ujemala glede seznamov delovnih mest na spletnem mestu Dejansko z Vuejem daleč zaostanka. Na LinkedInu pa se zdi, da je povpraševanja po razvijalcih Vue več.
Preobremenitev: Če pogledate rezultate ankete razvijalcev stack za leto 2019, sta React in Vue.js najbolj priljubljena in zaželena spletna ogrodja. Angular se uvrsti na deveto mesto za najbolj ljubljene, a tretje najbolj iskane.
GitHub: Vue ima največ zvezdic s 153 tisoč, a najmanj sodelujočih (283). Po drugi strani ima React 140 tisoč zvezd in 1341 sodelavcev. Angular ima le 59,6 tisoč zvezdic, vendar ima največ prispevalcev od treh s 1579.
Trendi NPM: Na zgornji sliki je prikazana statistika zadnjih 12 mesecev, kjer lahko vidite, da ima React večje število prenosov na mesec v primerjavi z Angular in Vue.
Razvoj mobilne aplikacije
Eden glavnih poudarkov velikih treh je uvajanje mobilnih naprav. React ima React Native, ki je postal priljubljena izbira za izdelavo aplikacij za iOS in Android, ne samo za uporabnike React, temveč tudi za širšo skupnost za razvoj aplikacij. Kotni razvijalci lahko uporabljajo NativeScript za izvorne aplikacije ali Ionic za hibridne mobilne aplikacije, razvijalci Vue pa lahko izbirajo med NativeScript ali Vue Native. Zaradi priljubljenosti mobilnih aplikacij ostaja to ključno področje naložb.
Drugi okviri, na katere je treba biti pozoren leta 2020
Če želite v letu 2020 preizkusiti nekaj novega, si oglejte te okvire JavaScript.
Žerjavica: Odprtokodni okvir za izdelavo spletnih aplikacij, ki deluje na podlagi vzorca MVVM. Uporablja ga več velikih podjetij, kot so Microsoft, Netflix in LinkedIn.
Meteor: Celovita JavaScript platforma za razvoj sodobnih spletnih in mobilnih aplikacij. Zlahka se je učiti in ima zelo podporno skupnost.
Zaključek
Vsi trije okviri se nenehno izboljšujejo, kar je spodbuden znak. Vsak ima svojo perspektivo in prednostno rešitev, katero naj uporabi, vendar je resnično odvisno od velikosti projekta in zaradi česar se počutite bolj udobno.
Najpomembnejši vidik je nenehna podpora njihovih skupnosti, zato, če nameravate začeti nov projekt in še nikoli niste uporabili nobenega od treh, potem verjamem, da ste z vsemi v varnih rokah. Če še niste mogli spoznati nobenega od treh okvirov, vam predlagam, da začnete z novoletno odločitvijo. Prihodnost se bo vrtela okoli teh treh.
Ta vsebina je bila prvotno objavljena v reviji net.
