\n Minulta kysyt\u00e4\u00e4n melkein p\u00e4ivitt\u00e4in, pit\u00e4isik\u00f6 minun aloittaa ReactJS:ll\u00e4 vai Angularilla? Ennen kuin jatkan, haluan kuitenkin antaa sinulle vastuuvapauslausekkeen.\n<\/p>\n
\n Se ei ole blogi, jossa aion ly\u00f6d\u00e4 yht\u00e4 tai toista tai sanoa, ett\u00e4 sinun pit\u00e4isi aina k\u00e4ytt\u00e4\u00e4 yht\u00e4 tai toista. Jokainen kehitt\u00e4j\u00e4 ja jokainen projekti ovat t\u00e4ysin erilaisia, ja niill\u00e4 on erilaiset vaatimukset, joten sanominen, ett\u00e4 sinun tulee aina k\u00e4ytt\u00e4\u00e4 ReactJS:\u00e4\u00e4 tai aina Angularia, on melko pirun typer\u00e4\u00e4.\n<\/p>\n
\n Voit v\u00e4itt\u00e4\u00e4, ett\u00e4 Angular on kehys ja React on teknisesti kirjasto itsess\u00e4\u00e4n. En kiell\u00e4 t\u00e4t\u00e4 tosiasiaa, mutta t\u00e4m\u00e4 on argumentti, johon en nyt halua menn\u00e4. Voit lis\u00e4t\u00e4 Reactiin paketteja, jotka tekev\u00e4t siit\u00e4 puitteet, jotka kilpailevat suoraan Angularin kanssa. Vertailemme kahta ekosysteemi\u00e4, emme tarkkaa viitekehyst\u00e4 tarkalleen kirjastoon.\n<\/p>\n
\n Aloitetaan Angularista. Viel\u00e4 yksi vastuuvapauslauseke: kun sanon Angularin, puhun Angular 4:st\u00e4, en AngularJS:st\u00e4.\n<\/p>\n
\n Angular on iso runko, mik\u00e4 tarkoittaa, ett\u00e4 se on tehokas ja sis\u00e4lt\u00e4\u00e4 paljon. Opittavaa on paljon. Tulet kuulemaan paljon uutta pelottavaa sanastoa, kuten riippuvuusruiskeen, ohjeiden sisustajat, putket jne. Sitten sinun t\u00e4ytyy k\u00e4sitell\u00e4 Typescripti\u00e4, joka on JavaScript sek\u00e4 joukko muita ominaisuuksia, kuten staattinen kirjoittaminen.\n<\/p>\n
\n Angular on mielipiteesev\u00e4mpi kuin React, mik\u00e4 on mielest\u00e4ni yksi eduista, koska Reactilla voit tehd\u00e4 saman asian miljoonalla eri tavalla. Angularissa on yleens\u00e4 yksi tai kaksi tapaa tehd\u00e4 tiettyj\u00e4 asioita, mik\u00e4 helpottaa seuraamista, antaa sinulle paljon selke\u00e4mpi\u00e4 ohjeita siit\u00e4, mit\u00e4 sinun pit\u00e4isi tehd\u00e4.\n<\/p>\n
\n Mutta sitten taas, se riippuu mieltymyksist\u00e4. Saatat pit\u00e4\u00e4 joustavuudesta tehd\u00e4 asioita eri tavoin. Kuten mainitsin, ReactJS on kirjasto, jos puhumme vain ydinkirjastosta, se on paljon pienempi ja paljon helpompi oppia kuin Angular-kehys. Voit sanoa, ett\u00e4 opit reagoimaan lyhyemm\u00e4ss\u00e4 ajassa. React on itsess\u00e4\u00e4n loistava n\u00e4kym\u00e4kirjasto, mutta se ei ole edes l\u00e4hell\u00e4 yht\u00e4 tehokasta suuriin sovelluksiin. Jos haluat reitityksen, vahvistuksen, HTTP-pyynn\u00f6t Reactissa, sinun on asennettava muita paketteja, mik\u00e4 lis\u00e4\u00e4 oppimisk\u00e4yr\u00e4\u00e4.\n<\/p>\n
\n Jos tarkastelet kahden eri kehitt\u00e4j\u00e4n React-koodia, ne n\u00e4ytt\u00e4v\u00e4t todenn\u00e4k\u00f6isesti t\u00e4ysin erilaisilta riippumatta siit\u00e4, tekev\u00e4tk\u00f6 he HTTP-pyynt\u00f6j\u00e4 tai k\u00e4sittelev\u00e4tk\u00f6 tilaa ja ominaisuuksia. Kaikki n\u00e4m\u00e4 asiat voidaan k\u00e4sitell\u00e4 hyvin eri tavalla ja usein se voi olla v\u00e4\u00e4r\u00e4ll\u00e4 tavalla.\n<\/p>\n
\n L\u00f6yd\u00e4t parhaat k\u00e4yt\u00e4nn\u00f6t ja kaikki ongelmat poistuvat, mutta se lis\u00e4\u00e4 oppimisk\u00e4yr\u00e4\u00e4.\n<\/p>\n
\n Toisin kuin Angular React ei k\u00e4yt\u00e4 malleja. Se k\u00e4ytt\u00e4\u00e4 jotain, jota kutsutaan JSX- tai JavaScript-laajennukseksi tai JavaScript-syntaksilaajennukseksi, jonka avulla voimme upottaa HTML:n JavaScriptiin. Aluksi t\u00e4m\u00e4 voi tuntua hieman omituiselta. Varsinkin, kun luultavasti opetettiin erottamaan merkint\u00e4si ja JavaScripti.\n<\/p>\n
\n Ajattele sit\u00e4 kuin laittaisit HTML:n JavaScriptin sis\u00e4\u00e4n parilla eri muutoksella: et voi k\u00e4ytt\u00e4\u00e4 class-attribuuttia ja sinun on k\u00e4ytett\u00e4v\u00e4 luokan nime\u00e4.\n<\/p>\n
\n Lopuksi meill\u00e4 on Redux. Reactia k\u00e4ytet\u00e4\u00e4n usein Reduxin tai Fluxin kanssa, jotka ovat sovellustason tilanhallintaohjelmia. Mielest\u00e4ni Redux on hirve\u00e4n vaikeaa vain sen asentamisessa, ja sen k\u00e4sitteiden oppiminen on vaikeaa.\n<\/p>\n
\n Minusta sit\u00e4 on k\u00e4ytetty liikaa. Uskon, ett\u00e4 monet kehitt\u00e4j\u00e4t k\u00e4ytt\u00e4v\u00e4t reduxia siell\u00e4, miss\u00e4 sit\u00e4 ei tarvita. Et tarvitse sit\u00e4 pienempiin sovelluksiin, mutta monet kehitt\u00e4j\u00e4t vaativat sen k\u00e4ytt\u00f6\u00e4. Se taas riippuu mieltymyksist\u00e4. Redux on eritt\u00e4in voimakas, en halua ottaa sit\u00e4 pois. Kun puhutaan oppimisk\u00e4yr\u00e4st\u00e4, sit\u00e4 on helvetin vaikea k\u00e4sitt\u00e4\u00e4.\n<\/p>\n
| \n ominaisuudet<\/span><\/span>\n <\/td>\n | \n Reagoi<\/span><\/span>\n <\/td>\n | \n Kulmikas<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Ohjelmointikieli<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n TypeScript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Koodirakenne<\/span><\/span>\n <\/td>\n | \n Itsep\u00e4inen<\/span><\/span>\n <\/td>\n | \n Joustava<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Ydinkirjasto<\/span><\/span>\n <\/td>\n | \n Pieni<\/span><\/span>\n <\/td>\n | \n Hyvin suuri<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Mallintaminen<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n P\u00e4tevyys<\/span><\/span>\n <\/td>\n | \n Pienet sovellukset<\/span><\/span>\n <\/td>\n | \n Laajamittaiset sovellukset<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Voittaja: Tasapeli<\/strong>\n<\/p>\n \n Ei ole reilua verrata suoraan Angular to Reactin suorituskyky\u00e4. Angular on t\u00e4ydellinen edest\u00e4 taaksep\u00e4in -kehys, joka sis\u00e4lt\u00e4\u00e4 reitityksen, lomakety\u00f6kalut, HTTP-kirjaston, reaktiiviset laajennukset jne. Kaikki n\u00e4m\u00e4 ominaisuudet turvottavat puitteet ja hidastavat sit\u00e4. React itsess\u00e4\u00e4n on kuitenkin vain n\u00e4kym\u00e4kirjasto, joka on paljon pienempi ja nopeampi.\n<\/p>\n \n Kun aloitat lis\u00e4\u00e4m\u00e4\u00e4n paketteja, kuten reititint\u00e4, HTTP-asiakasohjelmaa tai mit\u00e4 tahansa, mit\u00e4 aiot lis\u00e4t\u00e4 React-sovellukseesi, se alkaa tulla hieman enemm\u00e4n siihen, miss\u00e4 Angular on, ja sitten voit alkaa vertailla niit\u00e4 reilusti, mutta senkin j\u00e4lkeen React silti voittaa suoritusosaston. Se on yleisesti ottaen eritt\u00e4in nopea tekniikka.\n<\/p>\n \n Vaihto Angular 2:sta Angular 4:\u00e4\u00e4n konepellin alla he tekiv\u00e4t melkoisesti parantaakseen suorituskyky\u00e4. Angular 4 toimii paremmin kuin Angular 2. Siit\u00e4 huolimatta React voittaa edelleen suorituskykyosastolla.\n<\/p>\n \n \n Voittaja: reagoi<\/strong>\n<\/p>\n \n Molemmilla kehyksill\u00e4 on paljon samoja yleisi\u00e4 ominaisuuksia ja etuja: ne j\u00e4rjest\u00e4v\u00e4t koodisi, ne ovat komponenttipohjaisia, ne tarjoavat dynaamista merkint\u00e4\u00e4 jne. Niill\u00e4 on paljon samoja asioita, ja ne jakavat paljon samoja ominaisuuksia.\n<\/p>\n \n Tarkastellaan joitain yksitt\u00e4isi\u00e4 ominaisuuksia. Angularilla on ilmeisesti paljon enemm\u00e4n ominaisuuksia kuin Reactissa ytimess\u00e4. Muistutan teit\u00e4, puhumme kahdesta ekosysteemist\u00e4 ja yleisist\u00e4 paketeista, joita k\u00e4ytet\u00e4\u00e4n Reactin kanssa.\n<\/p>\n \n Angular on kaikki mukana oleva runko. Sen mukana tulee komponenttireititin, reaktiiviset laajennukset havainnoitaville kohteille, HTTP-asiakas, lomakkeen validointimoduuli ja luettelo jatkuu. Lis\u00e4ksi se tarjoaa kaksisuuntaista tiedonsidontaa tavalla, jota mik\u00e4\u00e4n muu kehys ei todellakaan tee. Tietojen sitominen n\u00e4kym\u00e4st\u00e4 malliin on eritt\u00e4in helppoa ng model -direktiivin avulla.\n<\/p>\n \n Angular tukee my\u00f6s MVC:t\u00e4 (Model View controller) tai ainakin eri n\u00e4k\u00f6kohtia t\u00e4st\u00e4 suunnittelukuviosta. sen mukana tulee my\u00f6s ominaisuuksia, joiden avulla voit helposti toteuttaa testauksen: sek\u00e4 yksikk\u00f6testauksen ett\u00e4 p\u00e4\u00e4st\u00e4 p\u00e4\u00e4h\u00e4n -testauksen. Angular on t\u00e4ynn\u00e4 ominaisuuksia yritystason k\u00e4ytt\u00f6liittym\u00e4sovellusten rakentamiseen. Reaktio toisaalta ei sis\u00e4ll\u00e4 paljoa ytimeen. Asiat voidaan kuitenkin lis\u00e4t\u00e4 antamaan sille Angularin sis\u00e4lt\u00e4m\u00e4t ominaisuudet sek\u00e4 joitain muita ominaisuuksia.\n<\/p>\n \n React k\u00e4ytt\u00e4\u00e4 virtuaalista DOM:ia, joka on eritt\u00e4in tehokas. Se luo oman kevyen versionsa todellisesta Domista ja sis\u00e4lt\u00e4\u00e4 ja p\u00e4ivitt\u00e4\u00e4 vain sen, mit\u00e4 tarvitaan, sen sijaan, ett\u00e4 virkist\u00e4isi koko asian. Virtuaalinen DOM on t\u00e4rkein syy siihen, ett\u00e4 React on r\u00e4j\u00e4ht\u00e4v\u00e4n nopea.\n<\/p>\n \n React k\u00e4ytt\u00e4\u00e4 JSX:\u00e4\u00e4, joka on tehokkaampi kuin tavalliset mallit, koska voit laittaa siihen mit\u00e4 tahansa JavaScript-tyyppi\u00e4. JSX ei vaadi Reactin k\u00e4ytt\u00f6\u00e4, mutta se tekee asioista helvetin paljon helpompaa. En keksi mit\u00e4\u00e4n syyt\u00e4, miksi et k\u00e4ytt\u00e4isi JSX:\u00e4\u00e4 my\u00f6s Angularin kanssa. React tekee my\u00f6s todella hyv\u00e4\u00e4 ty\u00f6t\u00e4 komponenttien tilan ja ominaisuuksien hallinnassa. Se tekee tietojen k\u00e4sittelyst\u00e4 ja siirt\u00e4misest\u00e4 komponenttien v\u00e4lill\u00e4 todella helppoa. Tietojen v\u00e4litt\u00e4minen komponenttien v\u00e4lill\u00e4 Angularilla on paljon vaikeampaa kuin Reactissa.\n<\/p>\n \n Core Reactin sovellustason tilaa on vaikea yll\u00e4pit\u00e4\u00e4. Komponenttitila on helppoa, mutta jos haluat todellisen sovellustason tilanhallinnan, tarvitset Reduxin tai Fluxin, mik\u00e4 aiemmin sanoin, on melko h\u00e4mment\u00e4v\u00e4\u00e4 oppia. Ulkoiset paketit, joita k\u00e4ytet\u00e4\u00e4n usein, kuten uusi React-reitittimen versio 4, on hieman vaikea k\u00e4sitt\u00e4\u00e4, mutta se on my\u00f6s eritt\u00e4in tehokas, kun se oppii suorittamaan ja asentamaan sen. On my\u00f6s monia erilaisia \u200b\u200btapoja k\u00e4ytt\u00e4\u00e4 sit\u00e4. Reactissa ei ole HTTP-ydinkomponenttia, kuten Angularilla, mutta voit k\u00e4ytt\u00e4\u00e4 Fetchi\u00e4 tai Axiosta, jotka ovat ulkoinen HTTP-asiakas, ja sitten Enzyme on suosittu Reactin todistamiseen. Joitakin erilaisia \u200b\u200bpaketteja k\u00e4ytet\u00e4\u00e4n yleisesti Reactin kanssa, vaikka ne eiv\u00e4t ole osa varsinaista kirjastoa.\n<\/p>\n \n Vaikka molemmilla teknologioilla on useita yhteisi\u00e4 ominaisuuksia, jos vertaat vain ydinteknologioita, Angular on voittaja.\n<\/p>\n \n Voittaja: Angular<\/strong>\n<\/p>\n \n Angularilla ja Reactilla on melko mukavia komentoriviliittymi\u00e4. Angular CLI ja Create React App ovat molemmat melko mahtavia ja niiden avulla voimme todella virtaviivaistaa kehityst\u00e4. Angular CLI on hieman tehokkaampi, koska voimme luoda nopeasti asioita, kuten komponentteja ja palveluita. Luo React ei voi tehd\u00e4 sit\u00e4. Sinun on luotava kaikki itse tiedostoihin ja perusrakenteeseen asti. Molemmat j\u00e4rjestelm\u00e4t k\u00e4ytt\u00e4v\u00e4t verkkopakettia, niill\u00e4 on omat automaattisesti latautuvat kehityspalvelimet sek\u00e4 k\u00e4\u00e4nn\u00f6s- ja rakennusty\u00f6kalut. On selv\u00e4\u00e4, ett\u00e4 Angularilla on ylim\u00e4\u00e4r\u00e4inen teht\u00e4v\u00e4 Transpiloida Typescript. CLI:ll\u00e4 on komentosarja t\u00e4t\u00e4 varten, kun suoritamme palvelun. Kaikki mit\u00e4 tapahtui kulissien takana. Se k\u00e4ytt\u00e4\u00e4 jotain nimelt\u00e4 TSC tai Typescript Compiler, ja molemmilla on my\u00f6s testausty\u00f6kaluja.\n<\/p>\n \n Jos kyseess\u00e4 on t\u00e4ysi pinosovellus, niin n\u00e4m\u00e4 ovat todella t\u00e4rkeit\u00e4. Sinun ei tarvitse k\u00e4ytt\u00e4\u00e4 niit\u00e4. Voit rakentaa React-sovelluksen alusta alkaen verkkopaketin avulla. N\u00e4m\u00e4 helpottavat huomattavasti sovelluksen rakentamisen lis\u00e4ksi my\u00f6s sen k\u00e4\u00e4nt\u00e4mist\u00e4 ja rakentamista tuotantoa varten.\n<\/p>\n \n He ovat molemmat kauniita jopa sill\u00e4 osastolla.\n<\/p>\n \n Voittaja: Angular<\/strong>\n<\/p>\n \n Kuten sanoin, n\u00e4ill\u00e4 molemmilla teknologioilla on omat ekosysteemins\u00e4, jotka ovat nyt levinneet paljon verkkoselaimen ulkopuolelle.\n<\/p>\n \n Ionic on suosittu hybridikehys, joka on Angular-sovellus, joka toimii mobiilisovellusten alkuper\u00e4isess\u00e4 k\u00e4\u00e4reess\u00e4. Voit luoda mobiilisovelluksia Angularilla. Hybridisovellukset voivat olla hieman k\u00f6mpel\u00f6it\u00e4 verrattuna alkuper\u00e4isiin sovelluksiin. K\u00e4ytt\u00f6kokemus ei voi toisinaan olla niin loistava \u2013 ei niin nopea ja reagoiva. Erilaisten hybridikehysten joukosta Ionic 3 on paras. Mukana on my\u00f6s NativeScript, jonka avulla voimme rakentaa todellisia natiivisovelluksia iOS- ja Android-sovelluksia Angularilla sek\u00e4 JavaScriptill\u00e4.\n<\/p>\n \n Siit\u00e4 huolimatta NativeScript ei n\u00e4yt\u00e4 olevan yht\u00e4 hyv\u00e4 kuin Facebookin React Native ainakaan t\u00e4ss\u00e4 vaiheessa. Angularilla on my\u00f6s materiaalisuunnittelukomponenttikirjasto, jos olet materiaalisuunnittelun fani. Angular Universal on siemenprojekti, jota voidaan k\u00e4ytt\u00e4\u00e4 Angularin render\u00f6imiseen palvelinpuolella. Siell\u00e4 on my\u00f6s NgRx-kauppa, joka on Reax reduxin inspiroima valtionhallintakirjasto. Se perustuu vertaisv\u00e4hent\u00e4jien mutatoimaan tilaan. Se on my\u00f6s integroitu Reactive-laajennuksiin.\n<\/p>\n \n Olisit huomannut. Kerran yksi heist\u00e4 tekee jotain, toinen kopioi eri tavalla. Reactista ja Angularista on tullut Microsoftin ja Applen JavaScript-kehys.\n<\/p>\n \n Reactilla on melkoinen ekosysteemi. Siin\u00e4 on React native, joka on suosittu. Se on paras tapa rakentaa mobiilisovelluksia verkkoteknologian avulla. React Native on nopea, ja monet sovellukset, jos ne on rakennettu oikein, ovat valmiina Swiftille tai Javalle rakennetuilla alkuper\u00e4isill\u00e4 sovelluksilla. Reactilla on materiaalisuunnittelukirjasto nimelt\u00e4 Material-UI, joka muistuttaa paljon Angularin materiaalisuunnittelukomponenttia, mutta kypsempi. JS on kehys palvelinpuolen React-sovellusten render\u00f6intiin. Se pyrkii tekem\u00e4\u00e4n t\u00e4m\u00e4n yksinkertaisimmalla mahdollisella tavalla, jotta t\u00e4t\u00e4 voidaan verrata Angular Universaliin. MobX on toinen tapa hallita tilaa. Se toimii hieman eri tavalla kuin redux. Se tarjoaa joukon sisustajia havainnoitavien kohteiden ja tarkkailijoiden m\u00e4\u00e4ritt\u00e4miseen, ja se tuo reaktiivisen logiikan tilaan.\n<\/p>\n \n Storybook on Reactin kehitysymp\u00e4rist\u00f6. Sen avulla voit selata komponenttikirjastoa, tarkastella kunkin komponentin eri tiloja sek\u00e4 kehitt\u00e4\u00e4 ja testata komponentteja interaktiivisesti. Reactive VR on saamassa Reactin virtuaalitodellisuuteen. React Desktop on JavaScript-kirjasto, joka on rakennettu Reacts-kirjaston p\u00e4\u00e4lle ja jonka oletetaan tuovan verkkoon alkuper\u00e4isen ty\u00f6p\u00f6yt\u00e4kokemuksen sis\u00e4lt\u00e4en monia macOS- ja Windows 10 -komponentteja. React-ekosysteemi on eritt\u00e4in suuri ja voimakas. React etenee teknologian kaikilla osa-alueilla ja on selv\u00e4 voittaja.\n<\/p>\n \n Voittaja: reagoi<\/strong>\n<\/p>\n \n Jos p\u00e4\u00e4t\u00e4t n\u00e4iden kehysten v\u00e4lill\u00e4, katso eri luokkia ja katso, mik\u00e4 sinua kiinnostaa. Kokeile molempia ja katso, kumman valitset nopeammin. Tee tutkimusta enemm\u00e4n kuin t\u00e4m\u00e4 blogi. Et koskaan saa kaikkea tarvitsemaasi tietoa yhdest\u00e4 blogista, joten lue lis\u00e4\u00e4.\n<\/p>\n \n Jos tarkastelet suurempaa ekosysteemi\u00e4, joka sis\u00e4lt\u00e4\u00e4 alkuper\u00e4isen mobiilisovelluskehityksen, valitse React ajattelematta kahdesti. Jos kaipaat ominaisuuksia, Angular on valtava. Ominaisuuksia on enemm\u00e4n kuin tarvitset.\n<\/p>\n<\/p>\n |