Sisältö
- 01. Kulma
- 02. Reagoi
- 03. Vue
- Kuinka kehysten syntaksia verrataan?
- Suosio ja markkinat
- Mobiilisovellusten kehittäminen
- Muita kehyksiä, joita on syytä odottaa vuonna 2020
- Johtopäätös
Vuonna 2020 meille on siunattu useita kehyksiä ja kirjastoja, jotka auttavat meitä web-kehityksessä. Mutta vaihtelua ei aina ollut niin paljon. Vuonna 2005 kaveri Brendan Eich loi uuden komentokielen nimeltä Mocha. Kuukausien kuluttua siitä, kun se oli nimetty uudelleen LiveScriptiksi, nimi muutettiin uudelleen JavaScriptiksi. Siitä lähtien JavaScript on edennyt pitkälle.
Vuonna 2010 näimme selkärangan ja kulmien käyttöönoton ensimmäisinä JavaScript-kehyksinä, ja vuoteen 2016 mennessä 92 prosenttia kaikista verkkosivustoista käytti JavaScriptiä. Tässä artikkelissa aiomme tarkastella kolmea tärkeintä JavaScript-kehystä (Angular, React ja Vue) ja niiden tilaa seuraavaan vuosikymmeneen. Haluatko tehdä oman sivuston? Kokeile tätä verkkosivustojen rakentajien luetteloa.
Saat joitain loistavia resursseja tutustumalla luetteloon parhaista verkkosuunnittelutyökaluista, verkkopalvelupalveluistamme ja tästä luettelosta erinomaisista käyttäjien testausohjelmistoista.
01. Kulma
AngularJS julkaistiin vuonna 2010, mutta vuoteen 2016 mennessä se kirjoitettiin kokonaan uudelleen ja julkaistiin nimellä Angular 2. Angular on Googlen kehittämä täysvertainen verkkokehys, jota käyttävät Wix, Upwork, The Guardian, HBO ja muut.
Plussat:
- Poikkeuksellinen tuki TypeScriptille
- MVVM antaa kehittäjille mahdollisuuden erottaa työ samalla sovellusalueella käyttäen samaa tietojoukkoa
- Erinomainen dokumentointi
Haittoja:
- On hieman oppimiskäyrä
- Vanhasta versiosta siirtyminen voi olla vaikeaa.
- Päivitykset otetaan käyttöön melko säännöllisesti, joten kehittäjien on sopeuduttava niihin
Mitä seuraavaksi?
Angular 9: ssä Ivy on oletuskääntäjä. Se on otettu käyttöön ratkaisemaan monet suorituskykyyn ja tiedostokokoon liittyvät ongelmat. Sen pitäisi tehdä sovelluksista pienempiä, nopeampia ja yksinkertaisempia.
Kun verrataan Angularin aiempia versioita React- ja Vue-versioihin,
lopulliset nippukoot olivat paljon suuremmat Angularia käytettäessä. Ivy tekee mahdolliseksi myös progressiivisen nesteytyksen, mikä Angular-tiimi esitti I / O 2019: ssa. Progressiivinen nesteytys käyttää Ivyä lataamaan asteittain palvelimelle ja asiakkaalle. Esimerkiksi, kun käyttäjä alkaa olla vuorovaikutuksessa sivun kanssa, komponenttien koodi ja mahdollinen ajonaika haetaan palalta kerrallaan.
Ivy näyttää olevan Angularin painopiste eteenpäin, ja toivomme, että se olisi saatavilla kaikille sovelluksille. Versiossa 9 on opt-out-vaihtoehto aina Angular 10: een asti.
02. Reagoi
React julkaistiin alun perin Facebookissa vuonna 2013, ja sitä käytetään interaktiivisten verkkoliittymien rakentamiseen. Netflix, Dropbox, PayPal ja Uber käyttävät sitä muutamaan.
Plussat:
- React käyttää virtuaalista DOM: ää, jolla on positiivinen vaikutus suorituskykyyn
- JSX on helppo kirjoittaa
- Päivitykset eivät vaaranna vakautta
Haittoja:
- Yksi tärkeimmistä takaiskuista on tarvita kolmannen osapuolen kirjastoja monimutkaisempien sovellusten luomiseen
- Kehittäjät jäävät pimeään parhaan tavan kehittyä
Mitä seuraavaksi?
React Conf 2019 -tapahtumassa React-tiimi käsitteli useita asioita, joiden parissa he ovat työskennelleet. Ensimmäinen on selektiivinen nesteytys, jossa React keskeyttää kaiken työskentelynsä priorisoidakseen komponentit, joiden kanssa käyttäjä on vuorovaikutuksessa. Kun käyttäjä on vuorovaikutuksessa tietyn osion kanssa, alue nesteytyy. Tiimi on työskennellyt myös Suspense-järjestelmän parissa, joka on Reactin järjestelmä koodauksen, datan ja kuvien lataamisen orkestroimiseksi. Tämän avulla komponentit voivat odottaa jotain ennen renderointia.
Sekä valikoiva nesteytys että jännitys ovat mahdollisia samanaikaisessa tilassa, mikä antaa sovelluksille mahdollisuuden reagoida entistä paremmin antamalla Reactille mahdollisuuden syöttää suuria alemman prioriteetin töitä, jotta voidaan keskittyä johonkin, joka on korkeampi prioriteetti, kuten käyttäjän antamiin vastauksiin. Tiimi mainitsi myös esteettömyyden toisena alueena, jota he ovat tarkastelleet keskittymällä kahteen tiettyyn aiheeseen - kohdistus- ja syöttörajapintojen hallintaan.
03. Vue
Googlen entinen työntekijä Evan You kehitti Vuen vuonna 2014. Sitä käyttävät Xiaomi, Alibaba ja GitLab. Vue onnistui saamaan kehittäjiltä suosiota ja tukea lyhyessä ajassa ja ilman suuren brändin tukea.
Plussat:
- Erittäin kevyt
- Aloittelijoille ystävällinen - helppo oppia
- Suuri yhteisö
Haittoja:
- Ei tueta valtava yritys, kuten React with Facebook ja Angular with Google
- Ei todellista rakennetta
Mitä seuraavaksi?
Vue on asettanut tavoitteekseen olla nopeampi, pienempi, ylläpidettävämpi ja helpottaa kehittäjien kohdentamista natiiviin (jos sinulla on vaikeuksia ylläpitää, harkitse verkkopalvelua). Seuraava julkaisu (3.0) on määrä julkaista vuoden 2020 ensimmäisellä neljänneksellä, joka sisältää virtuaalisen DOM-uudelleenkirjoituksen suorituskyvyn parantamiseksi sekä parannetun TypeScript-tuen. Mukana on myös Composition API, joka tarjoaa kehittäjille uuden tavan luoda komponentteja ja järjestää ne ominaisuuksien mukaan toiminnan sijaan.
Vue-kehittäjät ovat myös olleet kiireisiä työskennellessään Suspensessä, joka keskeyttää komponenttisi hahmonnuksen ja tekee varakomponentin, kunnes ehto täyttyy.
Yksi Vuen päivitysten hienoista asioista on, että ne ylläpitävät taaksepäin yhteensopivuutta. He eivät halua sinun rikkovan vanhoja Vue-projektejasi. Näimme tämän siirtymässä 1,0: stä 2,0: een, jossa 90 prosenttia API: sta oli sama.
Kuinka kehysten syntaksia verrataan?
Kaikissa kolmessa kehyksessä on tapahtunut muutoksia julkaisujen jälkeen, mutta yksi asia, jonka ymmärtäminen on kriittistä, on syntaksitapa ja miten se eroaa. Katsotaanpa, miten syntaksia verrataan yksinkertaisen tapahtumasidonnan suhteen:
Vue: v-on -direktiiviä käytetään liittämään tapahtumakuuntelijoita, jotka kutsuvat menetelmiä Vue-esiintymiin. Direktiivit on etuliitteellä v- osoittaakseen, että ne ovat Vuen toimittamia erityisiä määritteitä, ja soveltamaan erityistä reaktiivista käyttäytymistä renderoidulle DOM: lle. Tapahtumankäsittelijät voidaan antaa joko sisäisesti tai menetelmän nimenä.
malli> painikkeen v-on: click = ”clickHandler”> Napsauta minua / painiketta> / malli> komentosarja> vie oletus {nimi: “HelloWorld”, menetelmät: {clickHandler: function () {console.log (“Minua napsautettiin! ”); }}}; / script>
Reagoi: React lisää merkinnät ja logiikan JS: ään ja JSX: ään, joka on JavaScriptin syntaksilaajennus. JSX: n kanssa toiminto välitetään tapahtumankäsittelijänä. React-elementeillä tapahtumien käsittely on hyvin samanlaista kuin DOM-elementtien tapahtumien käsittely. Mutta on joitain syntaktisia eroja; esimerkiksi React-tapahtumat nimetään käyttämällä camelCase-ohjelmaa pienten kirjainten sijaan.
function Button () {function clickHandler (e) {console.log (“Minua napsautettiin”); } palaa-painike onClick = {clickHandler}> Napsauta minua! / -painike>; }
Kulma: Tapahtuman sidontasyntaksi koostuu kohdetapahtuman nimestä sulkeissa yhtäläisyysmerkin vasemmalla puolella ja lainatulla mallilausekkeella oikealla. Vaihtoehtoisesti voit käyttää päällä- etuliite, joka tunnetaan nimellä kanoninen muoto.
@Component ({selector: “app-click-me”, malli: `button (click) =” onClickMe () ”> Click me! / Button>`}}) vientiluokka ClickMeComponent {onClickMe () {console.log (" Napsautit minua! ”); }}
Suosio ja markkinat
Aloitetaan tarkastelemalla kokonaiskuvaa kolmesta kehyksestä muun verkon suhteen tutkimalla W3Techin tilastoja. Angularia käyttää tällä hetkellä 0,4 prosenttia kaikista verkkosivustoista, ja JavaScript-kirjastojen markkinaosuus on 0,5 prosenttia. Reactia käyttää 0,3 prosenttia kaikista verkkosivustoista ja 0,4 prosenttia JavaScript-kirjastojen markkinaosuus, ja Vue on 0,3 prosenttia molemmista. Tämä näyttää melko tasaiselta, ja voit odottaa lukujen nousevan.
Google-trendit: Viimeisten 12 kuukauden aikana React on suosituin hakusanoilla, jota seuraa tarkasti Angular. Vue.js on melko kaukana; Yksi asia on kuitenkin muistaa, että Vue on vielä nuori verrattuna kahteen muuhun.
Työnhaut: Kirjoitushetkellä React ja Angular ovat melko tiiviissä suhteessa Indeed with Vue -työpaikkalistauksen kanssa kaukana. LinkedInissä näyttää kuitenkin olevan enemmän kysyntää Vue-kehittäjille.
Pinon ylivuoto: Jos tarkastelet Stack Overflow Developer Survey -tuloksia vuodelta 2019, React ja Vue.js ovat molemmat rakastetuimpia ja halutuimpia verkkokehyksiä. Kulma istuu yhdeksännessä asennossa rakastetuimpien mutta kolmanneksi halutuimpien joukossa.
GitHub: Vue: lla on eniten tähtiä 153 000: lla, mutta sillä on vähiten avustajia (283). Reactilla on toisaalta 140 tuhatta tähteä ja 1341 avustajaa. Angularilla on vain 59,6 tuhatta tähteä, mutta sillä on eniten osallistujia kolmesta 1579: llä.
NPM-trendit: Yllä oleva kuva näyttää viimeisten 12 kuukauden tilastot, joissa näet, että Reactilla on enemmän latauksia kuukaudessa kuin Angular ja Vue.
Mobiilisovellusten kehittäminen
Yksi pääpainopiste kolmesta suuresta on mobiilikäyttöönotto. Reactilla on React Native, josta on tullut suosittu valinta iOS- ja Android-sovellusten rakentamiseen paitsi React-käyttäjille myös laajemmalle sovelluskehitysyhteisölle. Kulmakehittäjät voivat käyttää NativeScript-sovelluksia natiivisovelluksiin tai Ionic-sovelluksia hybridimobiilisovelluksiin, kun taas Vue-kehittäjät voivat valita NativeScript- tai Vue Native -ominaisuuden. Mobiilisovellusten suosion vuoksi tämä on edelleen keskeinen sijoitusalue.
Muita kehyksiä, joita on syytä odottaa vuonna 2020
Jos haluat kokeilla jotain uutta vuonna 2020, tutustu näihin JavaScript-kehyksiin.
Ember: Avoimen lähdekoodin kehys verkkosovellusten rakentamiseen, joka toimii MVVM-mallin perusteella. Sitä käyttävät useat suuret yritykset, kuten Microsoft, Netflix ja LinkedIn.
Meteori: Täyden pinon JavaScript-alusta nykyaikaisten web- ja mobiilisovellusten kehittämiseen. Se on helppo oppia ja sillä on erittäin tukeva yhteisö.
Johtopäätös
Kaikki kolme kehystä kehittyvät jatkuvasti, mikä on rohkaiseva merkki. Jokaisella on oma näkemyksensä ja ensisijainen ratkaisunsa siitä, mitä heidän tulisi käyttää, mutta se riippuu todella projektin koosta ja saa sinut tuntemaan olosi mukavammaksi.
Tärkein näkökohta on heidän yhteisöjensä jatkuva tuki, joten jos aiot aloittaa uuden projektin etkä ole koskaan käyttänyt mitään kolmesta aiemmin, uskon, että olet turvallisissa käsissä heidän kaikkien kanssa. Jos sinulla ei ole vielä ollut mahdollisuutta oppia mitään kolmesta kehyksestä, suosittelen, että teet uudenvuodenlupaukseksi oppimisen aloittamisen. Tulevaisuus pyörii näiden kolmen ympärillä.
Tämä sisältö ilmestyi alun perin verkkolehdessä.
