\n Peaaegu iga p\u00e4ev esitatakse mulle k\u00fcsimus, kas ma peaksin alustama ReactJS-i v\u00f5i Angulariga? Kuid enne kui j\u00e4tkan, lubage mul esitada teile lahti\u00fctlus.\n<\/p>\n
\n See ei ole ajaveeb, kus ma hakkan \u00fcht v\u00f5i teist p\u00f5rgatama v\u00f5i \u00fctlema, et peaksite alati kasutama \u00fchte v\u00f5i teist. Iga arendaja ja iga projekt on t\u00e4iesti erinevad ja neil on erinevad n\u00f5uded, nii et \u00f6elda, et peaksite alati kasutama ReactJS-i v\u00f5i alati kasutama Angular, on p\u00e4ris loll.\n<\/p>\n
\n V\u00f5ite v\u00e4ita, et Angular on raamistik ja React on tehniliselt omaette raamatukogu. Ma ei eita seda fakti, kuid see on argument, millesse ma praegu laskuda ei taha. Reactile saate lisada pakette, mis muudavad selle raamistikuks, mis konkureerib otseselt Angulariga. Me v\u00f5rdleme kahte \u00f6kos\u00fcsteemi, mitte t\u00e4pset raamistikku ja t\u00e4pset raamatukogu.\n<\/p>\n
\n Alustame Angulariga. Veel \u00fcks lahti\u00fctlus: kui ma \u00fctlen Angular, siis r\u00e4\u00e4gin Angular 4-st, mitte AngularJS-ist.\n<\/p>\n
\n Angular on suur raamistik, mis t\u00e4hendab, et see on v\u00f5imas ja sisaldab palju. \u00d5ppida on palju. Kuulete palju uut hirmutavat s\u00f5navara, nagu s\u00f5ltuvuse s\u00fcstimine, direktiivide dekoraatorid, torud jne. Seej\u00e4rel peate tegelema Typescriptiga, mis on JavaScript ja hunnik muid funktsioone, sealhulgas staatiline tippimine.\n<\/p>\n
\n Angular on rohkem arvamusel kui React, mis on minu arvates \u00fcks eeliseid, sest Reactiga saate teha sama asja miljonil erineval viisil. Angularis on teatud asjade tegemiseks \u00fcldiselt \u00fcks v\u00f5i kaks v\u00f5imalust, mis muudab selle j\u00e4lgimise lihtsamaks ja annab palju selgemad juhised selle kohta, mida peaksite tegema.\n<\/p>\n
\n Aga j\u00e4llegi taandub see eelistustele. Sulle v\u00f5ib meeldida paindlikkus teha asju erineval viisil. Nagu ma mainisin, on ReactJS teek, kui me r\u00e4\u00e4gime ainult p\u00f5hiteegist, see on palju v\u00e4iksem ja palju lihtsam \u00f5ppida kui Angular raamistik. V\u00f5ite \u00f6elda, et \u00f5pite reageerima l\u00fchema ajaga. React on ise suurep\u00e4rane vaateteek, kuid suurte rakenduste jaoks pole see isegi nii v\u00f5imas. Kui soovite Reactis marsruutimist, valideerimist ja HTTP-p\u00e4ringuid, peate installima muud paketid ja see suurendab \u00f5ppimisk\u00f5verat.\n<\/p>\n
\n Kui vaatate kahe erineva arendaja Reacti koodi, n\u00e4evad nad t\u00f5en\u00e4oliselt t\u00e4iesti erinevad, olenemata sellest, kas nad teevad HTTP-p\u00e4ringuid v\u00f5i k\u00e4itlevad olekut ja atribuute. K\u00f5iki neid asju saab k\u00e4sitleda v\u00e4ga erinevalt ja sageli v\u00f5ib see olla valel viisil.\n<\/p>\n
\n Leiad parimad tavad ja k\u00f5ik probleemid kaovad, kuid see lisab \u00f5ppimisk\u00f5verat.\n<\/p>\n
\n Erinevalt Angular Reactist ei kasutata malle. See kasutab midagi, mida nimetatakse JSX-iks v\u00f5i JavaScripti laiendiks v\u00f5i JavaScripti s\u00fcntaksilaiendiks, mis v\u00f5imaldab meil JavaScripti manustada HTML-i. Alguses v\u00f5ib see tunduda pisut veider. Eriti siis, kui teile ilmselt \u00f5petati m\u00e4rgistust ja JavaScripti eraldama.\n<\/p>\n
\n M\u00f5elge sellele nagu HTML-i sisestamine JavaScripti sisse koos paari erineva muudatusega: te ei saa kasutada klassi atribuuti ja peate kasutama klassi nime.\n<\/p>\n
\n L\u00f5puks on meil Redux. Reacti kasutatakse sageli koos Reduxi v\u00f5i Fluxiga, mis on rakenduse taseme olekuhaldurid. Minu arvates on Reduxil lihtsalt selle seadistamine v\u00e4ga raske ja selle m\u00f5istete \u00f5ppimine on raske.\n<\/p>\n
\n Ma arvan, et see on \u00fclekasutatud. Ma arvan, et paljud arendajad kasutavad reduxit seal, kus seda pole vaja. Te ei vaja seda v\u00e4iksemate rakenduste jaoks, kuid paljud arendajad n\u00f5uavad selle kasutamist. See taandub j\u00e4llegi eelistustele. Redux on v\u00e4ga v\u00f5imas, ma ei taha seda \u00e4ra v\u00f5tta. \u00d5ppimisk\u00f5verast r\u00e4\u00e4kides on seda kuradi raske m\u00f5ista.\n<\/p>\n
| \n Funktsioonid<\/span><\/span>\n <\/td>\n | \n Reageerige<\/span><\/span>\n <\/td>\n | \n Nurgeline<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Programmeerimiskeel<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n TypeScript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Koodi struktuur<\/span><\/span>\n <\/td>\n | \n Arvamuslik<\/span><\/span>\n <\/td>\n | \n Paindlik<\/span><\/span>\n <\/td>\n<\/tr>\n | \n P\u00f5hiraamatukogu<\/span><\/span>\n <\/td>\n | \n V\u00e4ike<\/span><\/span>\n <\/td>\n | \n V\u00e4ga suur<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Mallimine<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n P\u00e4devus<\/span><\/span>\n <\/td>\n | \n V\u00e4ikesed rakendused<\/span><\/span>\n <\/td>\n | \n Suuremahulised rakendused<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n V\u00f5itja: See on viik<\/strong>\n<\/p>\n \n Angular to Reacti j\u00f5udlust pole aus v\u00f5rrelda. Angular on t\u00e4ielik esi-tagasi raamistik, mis sisaldab marsruutimist, vormit\u00f6\u00f6riistu, HTTP-teeki, reaktiivseid laiendusi jne. K\u00f5ik need funktsioonid ajavad raamistiku \u00fcles ja muudavad selle aeglasemaks. React ise on aga lihtsalt vaateteek, mis on palju v\u00e4iksem ja kiirem.\n<\/p>\n \n Kui hakkate lisama selliseid pakette nagu ruuter, HTTP-klient v\u00f5i mis iganes, mida soovite oma Reacti rakendusele lisada, hakkab see veidi rohkem v\u00e4lja tulema, kus Angular asub ja seej\u00e4rel saate hakata neid \u00f5iglaselt v\u00f5rdlema, kuid isegi p\u00e4rast seda React ikkagi v\u00f5idab esitusosakonna. See on \u00fcldiselt v\u00e4ga kiire tehnoloogia.\n<\/p>\n \n \u00dcleminek Angular 2-lt Angular 4-le kapoti all tegid nad j\u00f5udluse suurendamiseks \u00fcsna palju. Angular 4 toimib paremini kui Angular 2. Sellegipoolest v\u00f5idab React j\u00f5udlusosakonnas.\n<\/p>\n \n \n V\u00f5itja: reageerige<\/strong>\n<\/p>\n \n M\u00f5lemal raamistikul on palju samu \u00fcldisi funktsioone ja eeliseid: nad korraldavad teie koodi, on komponendip\u00f5hised, pakuvad d\u00fcnaamilist m\u00e4rgistust jne. Neid kasutatakse paljudeks samadeks asjadeks ja neil on \u00fchine palju samu funktsioone.\n<\/p>\n \n Vaatleme m\u00f5nda \u00fcksikut funktsiooni. Angularil on ilmselgelt palju rohkem funktsioone kui Reactil. Lubage mul teile meelde tuletada, et me r\u00e4\u00e4gime kahest \u00f6kos\u00fcsteemist ja levinud pakettidest, mida Reactiga kasutatakse.\n<\/p>\n \n Angular on k\u00f5ikeh\u00f5lmav raamistik. Kaasas komponent ruuter, reaktiivsed laiendused vaadeldavate objektide jaoks, HTTP-klient, vormi moodul valideerimiseks ja nimekiri j\u00e4tkub. Lisaks pakub see kahesuunalist andmete sidumist viisil, mida \u00fckski teine \u200b\u200braamistik tegelikult ei tee. Andmete sidumine vaatest mudeliga on ng model direktiivi abil \u00e4\u00e4rmiselt lihtne.\n<\/p>\n \n Angular toetab ka MVC-d (Model View kontroller) v\u00f5i v\u00e4hemalt selle disainimustri erinevaid aspekte. sellega on kaasas ka funktsioonid, mis v\u00f5imaldavad teil h\u00f5lpsasti testimist rakendada: nii \u00fcksuse testimist kui ka t\u00e4ielikku testimist. Angular on t\u00e4is funktsioone ettev\u00f5tte tasemel esiotsa rakenduste loomiseks. Teisest k\u00fcljest ei sisalda React oma tuumas palju. Siiski saab asju lisada, et anda sellele funktsioonid, mida Angular sisaldab juba karbist ja m\u00f5ned t\u00e4iendavad.\n<\/p>\n \n React kasutab virtuaalset DOM-i, mis on v\u00e4ga v\u00f5imas. See loob tegeliku Domi oma kerge versiooni ning sisaldab ja v\u00e4rskendab ainult seda, mis on vajalik, selle asemel et v\u00e4rskendada kogu asja. Virtuaalne DOM on peamine p\u00f5hjus, miks React on \u00fclikiire.\n<\/p>\n \n React kasutab JSX-i, mis on v\u00f5imsam kui standardsed mallid, kuna saate sellesse panna absoluutselt mis tahes t\u00fc\u00fcpi JavaScripti, mida soovite. JSX pole Reacti kasutamiseks vajalik, kuid see muudab asjad palju lihtsamaks. Ma ei suuda v\u00e4lja m\u00f5elda \u00fchtegi p\u00f5hjust, miks te ei kasutaks JSX-i ka Angulariga. React teeb ka v\u00e4ga head t\u00f6\u00f6d komponentide oleku ja omaduste haldamisel. See muudab andmetega t\u00f6\u00f6tamise ja komponentide vahel liikumise v\u00e4ga lihtsaks. Andmete edastamine komponentide vahel on Angular palju keerulisem kui Reactis.\n<\/p>\n \n Core Reactil on rakenduse tasemel olekut raske s\u00e4ilitada. Komponendi olek on lihtne, kuid kui soovite t\u00f5elist rakenduse tasemel olekuhaldust, siis on teil vaja Reduxi v\u00f5i Fluxi, mida ma varem \u00fctlesin, on p\u00e4ris segane \u00f5ppida. V\u00e4lised paketid, mida sageli kasutatakse nagu uus Reacti ruuteri versioon 4, on pisut raskesti m\u00f5istetavad, kuid see on ka v\u00e4ga v\u00f5imas, kui \u00f5pite seda k\u00e4ivitama ja seadistama. Selle kasutamiseks on ka palju erinevaid viise. Reactil pole HTTP p\u00f5hikomponenti nagu Angularil, kuid saate kasutada Fetch v\u00f5i Axios, mis on v\u00e4line HTTP-klient ja seej\u00e4rel on Reacti t\u00f5endamiseks populaarne Enzyme. M\u00f5ned erinevad paketid, mida tavaliselt Reactiga kasutatakse, kuigi need ei ole tegeliku teegi osa.\n<\/p>\n \n Kuigi m\u00f5lemal tehnoloogial on palju funktsioone, siis kui v\u00f5rrelda p\u00f5hitehnoloogiaid, on Angular v\u00f5itja.\n<\/p>\n \n V\u00f5itja: Nurk<\/strong>\n<\/p>\n \n Angularil ja Reactil on p\u00e4ris kenad k\u00e4surea liidesed. Angular CLI ja Create React App on m\u00f5lemad \u00fcsna suurep\u00e4rased ja v\u00f5imaldavad meil arendust sujuvamaks muuta. Angular CLI on pisut v\u00f5imsam, kuna saame kiiresti genereerida selliseid asju nagu komponendid ja teenused. Loo React ei saa seda teha. Failide ja p\u00f5histruktuurini tuleb k\u00f5ik ise luua. M\u00f5lemad s\u00fcsteemid kasutavad veebipaketti, neil on oma automaatse laadimise arendusserverid ning kompileerimis- ja koostamist\u00f6\u00f6riistad. Ilmselgelt on Angularil lisa\u00fclesanne Typescripti \u00fclekandmine. CLI-l on selle jaoks skript, kui k\u00e4ivitame teenindamise. K\u00f5ik see, mis toimus kulisside taga. See kasutab selleks midagi nimega TSC v\u00f5i Typescript Compiler ja m\u00f5lemal on ka testimisriistad.\n<\/p>\n \n Kui see on t\u00e4ispakki rakendus, on need t\u00f5esti olulised. Te ei pea neid kasutama. Veebipaketi abil saate Reacti rakenduse luua juba algusest peale. Need muudavad palju lihtsamaks mitte ainult rakenduse loomise, vaid ka selle kompileerimise ja tootmiseks ehitamise.\n<\/p>\n \n Nad on m\u00f5lemad kenad isegi selles osakonnas.\n<\/p>\n \n V\u00f5itja: Nurk<\/strong>\n<\/p>\n \n Nagu ma \u00fctlesin, on m\u00f5lemal tehnoloogial oma \u00f6kos\u00fcsteemid, mis levivad n\u00fc\u00fcd veebibrauserist kaugemale.\n<\/p>\n \n Ionic on populaarne h\u00fcbriidraamistik, mis on Angular-rakendus, mis t\u00f6\u00f6tab mobiilirakenduste jaoks m\u00f5eldud \u00fcmbrises. Angulari abil saate luua mobiilirakendusi. H\u00fcbriidrakendused v\u00f5ivad omarakendustega v\u00f5rreldes olla pisut kohmakad. Kasutajakogemus ei pruugi m\u00f5nikord olla nii suurep\u00e4rane \u2013 mitte nii kiire ja tundlik. Erinevate h\u00fcbriidraamistike seas on Ionic 3 parim. Samuti on olemas NativeScript, mis v\u00f5imaldab meil luua t\u00f5elisi kohalikke rakendusi iOS-i ja Androidi rakendusi nii Angulari kui ka JavaScriptiga.\n<\/p>\n \n Sellegipoolest ei tundu NativeScript v\u00e4hemalt praegu nii hea kui Facebooki React Native. Angularil on ka materjalidisaini komponentide raamatukogu, kui olete materjalidisaini f\u00e4nn. Angular Universal on algprojekt, mida saab kasutada Angulari renderdamiseks serveri poolel. Seal on ka NgRx pood, mis on Reax reduxist inspireeritud riigihalduse raamatukogu. See p\u00f5hineb kaaslaste reduktorite poolt muteeritud olekul. Sellel on ka integratsioon Reactive laiendustega.\n<\/p>\n \n Oleksite m\u00e4rganud. Kord teeb \u00fcks neist midagi, mida teine \u200b\u200bkopeerib teistmoodi. Reactist ja Angularist on saanud JavaScripti raamistikud Microsoft ja Apple.\n<\/p>\n \n Reactil on \u00fcsna \u00f6kos\u00fcsteem. Sellel on React native, mis on populaarne. See on parim viis veebitehnoloogiate abil mobiilirakenduste loomiseks. React Native on kiire ja paljud rakendused, kui need on \u00f5igesti \u00fcles ehitatud, on Swiftile v\u00f5i Javale \u00fcles ehitatud omarakendustega kohe olemas. Reactil on materjalikujunduse raamatukogu nimega Material-UI, mis sarnaneb Angulari materjalidisaini komponendiga, kuid on k\u00fcpsem. JS on serveripoolsete Reacti rakenduste renderdamise raamistik. Selle eesm\u00e4rk on teha seda v\u00f5imalikult lihtsal viisil, et seda saaks v\u00f5rrelda Angular Universaliga. MobX on veel \u00fcks viis oleku haldamiseks. See t\u00f6\u00f6tab natuke teistmoodi kui redux. See pakub dekoraatorite komplekti vaadeldavate objektide ja vaatlejate m\u00e4\u00e4ratlemiseks ning tutvustab teie olekus reaktiivloogikat.\n<\/p>\n \n Storybook on Reacti arenduskeskkond. See v\u00f5imaldab teil sirvida komponentide teeki, vaadata iga komponendi erinevaid olekuid ning interaktiivselt arendada ja testida komponente. Reactive VR viib Reacti virtuaalreaalsusesse. React desktop on JavaScripti teek, mis on \u00fcles ehitatud Reactsi teegile, mis v\u00e4idetavalt toob veebi natiivse t\u00f6\u00f6lauakogemuse, mis sisaldab paljusid macOS-i ja Windows 10 komponente. Reacti \u00f6kos\u00fcsteem on \u00e4\u00e4rmiselt suur ja v\u00f5imas. React on j\u00f5udmas tehnoloogia igasse aspekti ja on selge v\u00f5itja.\n<\/p>\n \n V\u00f5itja: reageerige<\/strong>\n<\/p>\n \n Kui otsustate nende raamistike vahel, vaadake erinevaid kategooriaid ja vaadake, mis teid huvitab. Proovige neid m\u00f5lemaid ja vaadake, kumma neist kiiremini valite. Uurige rohkem kui see blogi. Te ei saa kunagi \u00fchest blogist kogu vajalikku teavet, nii et lugege rohkem.\n<\/p>\n \n Kui vaatate suuremat \u00f6kos\u00fcsteemi, mis h\u00f5lmab ka natiivse mobiilirakenduse arendamist, valige React ilma kaks korda m\u00f5tlemata. Kui otsite funktsioone, on Angular tohutu. Funktsioone on rohkem kui vaja.\n<\/p>\n<\/p>\n |