2-es szög vs reagálás: Az Ultimate Dance Off

Naplemente szünetek - Alí Marín (CC BY-NC-ND 2.0)

A legtöbb engem követő ember tudja, hogy én személy szerint szívesebben reagálom, de természetesen szeretem, ha a döntéseimet nevelés nélkül alapozzuk meg. Az utóbbi időben alaposan kutattam a 2. szöget. Így hasonlít a véleményem szerint a Reakcióhoz.

Megjegyzés: Néha rövidíteni fogom a 2. szög „ng2” kifejezést - ez a közösségben szokásos gyakorlat.

Táncoljunk

A fejlesztői élményre szeretnék összpontosítani, nézzük meg, hogy érezzük a fejlesztőket az ng2 és a React használatával kapcsolatban. A 2. szögről és a Reaktúráról is megkérdeztem követőimet: „Használnád újra?”:

Csak 17% válaszolta, hogy ismét használni fogja a 2. szöget.

56% -uk azt mondta, hogy újra használni fogják a Reakciót.

Ez az. Játék vége. Jobb? Nos, nem egészen. A válaszadók többsége még nem használta az Angular 2-t, így a tisztességes vásárláshoz valóban el kell távolítanunk ezt a csoportot a szavazásból.

Amikor eltávolítjuk azt a csoportot, amely még nem használta őket, mind a pontszámok jobban néznek ki:

Reagálás: 84%

2. szög: 38%

A React egyértelműen megnyeri az ügyfelek elégedettségi körét. De ez nem tudományos. Csak követőim és azoknak a követői, akik retweettettek a közvélemény-kutatások során, és elsősorban a Reaktáról beszélek - de mivel ezek tényleges felhasználók osztoznak a tényleges tapasztalatukban, azt hiszem, biztonságos azt mondani, hogy bár a számok nem lesznek pontosan azonosak az általános felhasználói populációban jó képet adnak nekünk arról, hogy mi várható el.

Vizsgáljuk meg közelebbről a különbségeket és azt, hogy miért érezhetik az emberek úgy, ahogy teszik.

Teljesítmény

Olyan sokan gondolják, hogy a tech választásoknak a teljesítményről kell szólniuk. A React vs. szögletes cikkek inkább a teljesítményre összpontosítottak (a React egyszerűen nyert a 1. szög piszkos ellenőrzési és emésztési ciklusai miatt). De a 2. szög megtisztította a tetteit. Ez gyors. A React és az Angular 2 tesztelésénél sem a teljesítmény nem volt nagy probléma. Mindegyiknek megvan a maga figyelmeztetése, de nem fogok mélyebben belemerülni hozzájuk.

Mint minden más CS-probléma esetén: ha sokszor meg kell ismételnie a drága műveleteket, ez lelassítja az alkalmazást. A React és az ng2 szempontjából ez azt is jelenti, hogy el kell kerülnie a DOM frissítéseit, ha lehetséges, kerülje a mély állapot-iterációt, kerülje az objektumok és összetevők túlzott létrehozását / lebontását stb.… A cikk alkalmazásában feltételezzük, hogy összehasonlít egy pár szuperautót, és mindketten sebességdémonok. A futásteljesítmény változhat.

Ennek ellenére ugyanolyan magasra értékelem a csapat teljesítményét, mint az alkalmazás teljesítményét. Ez az összehasonlítás a fejlesztői tapasztalatokra és a fejlesztői csapat teljesítményével kapcsolatos kérdésekre összpontosít. Végső soron a csapatodnak képesnek kell lennie arra, hogy gyorsan mozogjon és gyors változtatásokat hajtson végre. Meg fogjuk vizsgálni, hogy ezeknek az eszközöknek miként lehet összehasonlítani ezeket a frontokat.

Hogy az 1. szög átalakította a kezelőfelületet?

Az 1. szög kombinálta a gerinc, a knockout és a feltörekvő webkomponensek ötleteit, és az ng1 egyedi irányelvek révén egyedi összetevőket hozott a tömegekbe. Ez egy közös mintát hozott az OOP-ból: A függőség-befecskendező tartály.

Most nyilvánvalónak kell lennie, de az IMO, a legmagasabb átalakító dolog, amelyet az 1. szög népszerűsített, az egyedi alkatrészek voltak. Manapság az összes népszerű front-end keretrendszer támogatja az egyedi alkatrészeket.

Hogyan reagált át a felületre

A React kiadásakor az MV * és a kétirányú adatkötés viharral vette át a frontot. A gerinc és a Knockout súlyos ütközők voltak. Az 1. szög volt az új gyerek a blokon.

A React nem kapott modell beépített koncepcióját, és a csapat azt javasolta, hogy használja azt a Flux architektúra mellett. A Flux egy felhasználói felület architektúrája, amely egyirányú adatfolyamot és tranzakciós állapotot ír elő. A „10 tipp a jobb Redux építészethez” című részben mindkettő számos előnyeit részletesen ismertettem. Ha nem ismeri a Reaktust, a Fluxot és a Reduxot, nagyon ajánlom, hogy olvassa el ezt a cikk folytatása előtt.

A React átalakító jellegű volt, mert az egyirányúvá tette az MVC-t elavult technek és egyirányú áramlásnak tűnt a tömegeken.

Véleményem szerint ez a front-end architektúra legfontosabb átalakulása a HTML és a JavaScript óta.

Szerencsére annyira átalakító volt, hogy már nem egyedülálló a Reaktúrához. Ezt elérheti az ng2-ben is.

A 2. szögben lévő cucc, amelyet nem fog reagálni

Természetesen mindkét keret támogatja az egyedi alkatrészek építését. A 2. szögnek van néhány extra dolga a motorháztető alatt, de alapvetően mindkettő létezik, hogy felhasználói felületeket építsenek az alkalmazás veremének elejére. A 2-es szögnek csak több előírás és az „elemek beépítése” filozófiája van.

Nézzük meg az Angular 2 néhány előírását.

Gépelt

Szeretettel / gyűlölettel foglalkozom a TypeScript-szel. Az egyik kedvenc kutyám az a népszerű ötlet, hogy a TypeScript meg fogja menteni az alkalmazását mindenféle hibáról. Rossz hír van neked: Nem fogja.

Olvassa el a „Megdöbbentő titok a statikus típusokról” oldalt. A hibajavítás nem az, amelyben a statikus típusok jók.

A típus helyessége nem garantálja a program helyességét.
  • Nagyon sok olyan hiba van, amelyet a statikus típusok nem tudnak észlelni.
  • Objektíven jobb módszerek vannak a hibák elfogására (TDD, kód-áttekintések), és ezek a legtöbb típusú hibát fogják elérni.

Eredmény? Igaz, hogy a statikus típusok kiküszöbölhetik a hibák egy osztályát, ám a megnövekedett kódbonyolultság árán, és a hibák teljes csökkentésének a projektre gyakorolt ​​hatása kicsi.

A statikus típusok elsősorban a fejlesztői szerszámokhoz használhatók. Nagyon jó, ha online dokumentációkat kap a dolgokról, például a funkcionális hívásokról, amikor kódolnak. De ennek végrehajtásához nem mindig kell mindenhol beillesztett jelölések.

Szeretem a típusjelölések meghatározásának gondolatát, amikor tisztázásra, fejlesztői dokumentációra és továbbfejlesztett fejlesztői eszközökre van szükség, ám nagyrészt erősen szívesebben gondolom a típusmeghatározást. Az inline típusú nyilatkozatok hajlamosak a rendetlenségekre, és nehezebbé teszik az olvasást.

A jó hír az, hogy a TypeScript elég jó a típusú következtetéseknél, és ha szeretné, akkor a legtöbb alkalommal hagyatkozhat a következtetésekre. A következtetési képességei jobbnak tűnnek, mint a Tern, az Atom és a Microsoft Code fejlesztői eszközei sokkal jobbak, mint a hasonló Tern pluginok. Valójában olyan messzire megyek, hogy azt mondjam, hogy a TypeScript a legjobb intellisense fejlesztői élményt nyújtja a JavaScript világában. Lehet, hogy beleszeret.

A TypeScript a legjobb interallisense fejlesztõ élményt nyújtja a JavaScript világában.

Ha csak szigorúan tudnám használni a TypeScriptet a típusmeghatározási képességei miatt, és kihagyhatnám a be nem jelentett modulok és kétértelmű paraméterekkel kapcsolatos hibákat, akkor mindig szokásos JavaScript fájlokban használom. Könnyű választás.

Ha csak a típusjelölések mindig külön fájlokban éltek (mint például a határozottan beírt "d.ts" fájlok), nulla konfigurációjú megegyezéssel, akkor több kommentárt is használnék, és sokkal inkább a TypeScriptet szeretnék. Könnyedén integrálhatja a TypeScriptet bármilyen munkafolyamatba, mert szó szerint „csak JavaScript” lenne. Bármelyik fordítóval fordíthat, amely támogatja a szabványos JavaScriptet.

A valóságban a TypeScript egy csomó fejlécet ad hozzá a nagy projektekhez, ideértve a konfigurációs felülírásokat (az összes könyvtári tipizálás nyomon követése a modul importálási hibáinak elkerülése érdekében), a szintaxis fölött (a tippeket általában inline-nek deklarálják), sok "bármilyen" menekülési nyílást, stb…

A "bármilyen" menekülési nyílás tisztázása érdekében a TypeScript támogatja a generikus eszközöket a type konstruktor stílusú szintaxissal, de nem mindig világos és könnyű működtetni dolgokat funkcionális programozási stílusú konstrukciókkal, megfigyelhető elemekkel, magasabb rendű funkciók váltásával stb.

Ahelyett, hogy kitalálnák a dolgok beírásának helyes módját, a fejlesztők általában az „any” használatát választják. Alapvetően ugyanaz, mint hogy feladja a típusellenőrzést, és csak azt mondja: „bármilyen típus itt működni fog”, még akkor is, ha ez nem szigorúan igaz.

Az összes felső és menekülő nyílás nagyobb felületet biztosít a hibák elrejtéséhez. Gyakori, hogy a TypeScript projekteket látják, ahol vannak olyan TypeScript hibák, amelyeket a csapatok csak figyelmen kívül hagynak. Időnként több száz vagy ezer hiba.

Amint a HTML bebizonyította, ha olyan valamit készít, amely működik, amikor hibák vannak, akkor a hibák elterjednek.

Bármikor vannak olyan hibák, amelyeket figyelmen kívül hagynak, a hibák már nem használhatók, és csak zajgá alakulnak. A TypeScript támogatói valószínűleg már mindegyikükben fel vannak tüntetve, hogy ezek a csapatok rosszul csinálják, és valóban ki kell javítaniuk a hibákat, és nekik is igaza van, de.

Nem mindig egyértelmű, hogyan lehet gyorsan kijavítani a hibákat, és időközben a projektmenedzserek fejlesztőket hívnak fel, hogy funkcióikat ki lehessen hozni. Mivel a TypeScript még akkor is képes fordítani a munkakészleteket, ha hibák vannak, valószínűleg valószínű, hogy nagy projektek kerülnek ebbe a helyzetbe, függetlenül attól, hogy a fejlesztők kedvelik-e és egyetértenek-e azzal. Ha megkérdezi a projekt egyes résztvevőit, hogy vajon hagyták volna-e a projektet abban az állapotba kerülni, ha rájuk bízott, akkor valószínűleg 100% -uk mondana „nem” -et.

De nem így működnek a nagy projektek nagy csoportokkal.

“Tudjuk, hogy ez szar, de később kijavítottuk.” - Minden valódi dev-csapat, aki valaha létezett.

Lehetséges, hogy a TSLint és a jobb dokumentáció megjavítja ezt a problémát. Ezt még látni kell.

Tehát használnám a Typecriptet a következő projektemnél? Miközben szeretem a fejlesztő eszközöket, azt tapasztalom, hogy a rezsimet több baj okozza, mint amennyit megéri.

Minél többet használom a TypeScript-et, annál inkább azt hiszem, hogy ez inkább lelassít, mint felgyorsítja. És ha ez nem gyorsít fel, és nem csökkenti nagyban a hiba sűrűségét, miért használom ___?

Mindezek ellenére továbbra is beleszeret a TypeScriptbe.

Lehet, hogy lelassít (emlékszem, erre nincs bizonyítékom - csak megdöbbentő érzés), de úgy érzi, hogy ez termelékenyebbé tesz téged. Időnként az érzések és a szeretet nagyon fontosak.

A fejlesztői boldogság fontos. Előfordulhat, hogy amikor nem foglalkozik a TypeScript korlátozásaival:

A TypeScript használata csak boldoggá tesz.

Van valami kielégítő, ha felépítjük a beírt funkciós felületet, és tudjuk, hogy a következő fejlesztő, aki jön, tudni fogja, hogyan kell hívni a funkciót dokumentumok olvasása vagy a forráskód megnézése nélkül.

Csak mélyítsd be azt, tudva, hogy ez sok plusz költségeket fog hozzáadni a projekthez, és tudván, hogy ez nem fog segíteni a hibák csökkentésében.

Mit fog tenni? Dev eszköz varázslat.

Tudom, hogy csak egy csomó TypeS-rajongót lebuktam. Nem azt mondom, hogy „A TypeScript szar, ne használd.” Azt mondom, hogy a „TypeScript remek és nagyszerű fejlesztőeszközökkel rendelkezik, de nagy kompromisszumokkal is rendelkezik, amelyeket a fejlesztőknek tisztában kell lenniük, és ez nem biztosítja az összes várható előnyt. ”

Függőség-befecskendezés

Először is szeretem a függőségi injekciót. Mindig használom. De a 2-es szög függőségi injekcióval veri meg a fejed felett. A dokumentumok és az egységtesztelési receptek elolvasása során mindenféle dolgot megtalál a szolgáltatókról és a függő függőségekről, valamint az egységtesztről a „beforeEachProviders ()” segítségével, és eltart egy kis idő, amíg a feje körül tekerkedik. Nagyon sok mágia zajlik a motorháztető alatt az ng2 injektálható termékek eltávolításához, és a félreértések, hogy mindez hogyan működik, és hogyan kell felvenniük a szolgáltatók használatát, valódi ragaszkodási pont lehet a kezdők számára.

Van egy könnyebb út. Ahelyett, hogy importálná a függőségeket, és támaszkodna egy keretre, hogy automatikusan betöltse őket az osztály-kivitelező aláírásába, csak írjon egy függvényt, amely figyelembe veszi a függőséget. Nagyon egyszerű és így működik:

A Dependency Injection (DI) támogatói azt fogják mondani, hogy túlzottan egyszerűsítem (egyetértek), és nem foglalkozom a megvalósításokkal (egyetértek). Azt mondom, hogy nem számít.

A gyakorlatban a 2. szögben végül az áll, hogy csupán egy maroknyi dolgot gúnyolódik, amelyek valójában gúnyolódást igényelnek (hálózati hozzáférés, lemezhozzáférés, időzítők), és egy csomó dolgot gúnyolnak, amelyeket fekete dobozba kell helyezni. a megvalósítás részletei.

Korábban már sokszor mondtam, de addig fogom mondani, amíg közismerté nem válik:

A gúnyolás kódszag.

Természetesen néha meg kell gúnyolódni, de ha az alkalmazásod tele van `* .mock.ts` fájlokkal, akkor valami rosszat teszel. Az alkalmazásod túl szorosan kapcsolódik egymáshoz (ironikus módon, a DI gondolata az, hogy kevésbé kapcsolja össze az alkalmazást), vagy egy csomó dolgot próbál gúnyolni, amelyek nem szükségesek gúnyolódásra.

Nem kell az egész világot injektálnia és gúnyolódnia.

Jázmin

Olvassa el „Miért használok szalagot Mocha helyett, és miért kellene?” Című részt. A legtöbb Jasmine-ra vonatkozik.

A Jasmine olyan API-t biztosít, amely rosszul próbál olvasni, mint például angol mondatok, és egy csomó állító csengőt és sípot tartalmaz. Ennek eredménye, hogy tesztek és állítások írására több millió módszer létezik, ami azt jelenti, hogy végül mindegyiket gondosan el kell olvasnia, hogy megértse, mit csinál.

Jobb, ha egy maroknyi állításra korlátozod magad. Leginkább az egyenlőség ellenőrzése. Nagy csapatban? Sok sikert azzal.

A Jasmine sok függőséget ösztönöz az "beforeEach ()" és "afterEach ()" függvényektől is, amelyek véletlenül ösztönözhetik a megosztott állapotot: az egységtesztben nagyon gyakori probléma, amely véletlenszerű teszthiba okozhat (a Jasmine teszteket véletlenszerűen hajtják végre ösztönözze a megosztott állapot és a tesztrendeléstől való függőségek használatát).

Ezen kritikák mellett Jasmine-nak még egy hibája van, ami 3 @ + $ # | + őrültnek vet fel. Ha összehasonlít két objektumot az egyenlőség érdekében, akkor sorosítja és kinyomtatja mindkét objektumot egy nagy vonalon. Más szavakkal, az alapértelmezett riporter output alapvetően # $%! @ # $ Értéktelen.

[A szerkesztő megjegyzése: Körülbelül 8 bekezdést kellett kivágnunk, ami nem más, mint! @ # $ Eltűnik a cikk e részétől. Megosztanánk a teljes átiratot, ám előfordulhat, hogy a gyerekek sírnak, és a kölykök a kanapék alatt rejtőznek.]

Chai szép különbségeket nyomtat. A kazetta ezt kinyomtatja:

nem ok 1-nek azonosnak kell lennie
---
operátor: egyenlő
várható: | -
{x: 1, y: {z: 3}}
tényleges: | -
{x: 1, y: {z: 2}}
...

Kicsi tárgyak esetén könnyen meglátom a különbségeket. Vannak plug-in riporterek, amelyek még jobbá teszik:

A fejlesztőknek egyértelmű és nyilvánvaló jelentésre van szükségük a különbségekről, ha a tesztek kudarcot vall, és Jasmine arcán emeli az osztályt. Ha tudod, hogyan lehet egy jó böngészőn belüli riportert felkapni a probléma megoldására, kérjük, kommentáld.

Ha azt várja, hogy rögzüljön a magjában, ne tartsa vissza a lélegzetét. 2014 óta nyitott témája van ennek a problémának.

Egyebek

Van még egy csomó szögletes dolog is. Űrlapok és érvényesítők stb., De természetesen ezek a dolgok a React felhasználók számára elérhetők, ha használni akarják. A nagy különbség az, hogy a React felhasználói nem mindig találják meg a legjobb megoldásokat a nyilvánvaló helyeken (például a React dokumentációjában). Ehelyett a React felhasználók inkább a közösségi bevált gyakorlatokra, blogcikkekre és egyéb tanulási forrásokra támaszkodnak a legjobb választások azonosítása érdekében.

Az összes „egyéb dolog” felrobbantja a 2-es sarokcsomagot. A 2 + RxJS szög nagyon óriási. Majdnem 800 ezer aprítva. Ez körülbelül négyszer nagyobb, mint a React + Redux, és nem hagy sok légzést az alkalmazáskód számára, ha azt szeretné, hogy az alkalmazás gyorsan betöltődjön és megjelenjen.

Ez az egyetlen nagy, észrevehető teljesítménykülönbség, amely szerintem igazán számít, és nagyon kicsit számít. A betöltési idő javítása radikálisan javítja alkalmazásának KPI-jeit. A terhelési idő milliszekundummal történő borotválkozása áthelyezheti a tűket a fontos üzleti mutatókban.

Négyszer nagyobb (majdnem egy megabájt!) Valóban nagy dolog. Ha nincs rá szüksége, ne töltse be.

SZERKESZTÉS: Amint számos kommentátor rámutatott, az ng2 képes az Ahead of Time összeállítására (AOT) és a fák rázására. A helyesen konfigurált gyártási összeállítás segítségével drasztikusan csökkentheti a köteg méretét, csak az alkalmazásában ténylegesen használt szolgáltatásokkal, amelyek sokkal kisebb lábnyomot eredményeznek a végső csomagban. Erősen ajánlom, hogy a gyártási köteget megfelelően konfigurálja. Potenciálisan drámai hatással lesz a visszafordulási arányokra, az átváltási arányokra, az ügyfelek elégedettségére és a csúszásra.

A Reakció dolgai, amelyeket nem talál a 2. szögben

A 2. szög, hasonlóan az 1. szöghöz, HTML sablonokra támaszkodik.

Az ng2 sablonok jó dolog, hogy alapvetően a szabvány HTML továbbfejlesztett formája.

Az ng2 sablonoknál az a rossz dolog, hogy meg kell tanulnod egy kicsit a szögletes DSL-t. Olyan dolgok, mint a "* ngIf" és a "* ngFor".

Az csúnya dolog az ng2 sablonokban az, hogy amikor hibát ejtenek, akkor futás közben meghibásodnak. Néha csendben. Hibakeresés A 2. szögletes sablonok fájdalmat okozhatnak.

Szerkesztés: Azt mondtam, hogy ez javításra került az Angular 2 legújabb verzióiban, amikor AOT-t használsz. A sablon hibáiról a fordításkor jelentik be. Még nem volt lehetőségem kipróbálni a javítást.

A React nem rendelkezik sablonokkal. Ehelyett a JSX, amely fordításkor a JavaScriptre fordul.

A JSX nagyszerű tényező az, hogy amikor hibát követ el, akkor valószínűleg a tervezési időpontban rábukkan, vagy összeállítja az időt, ahelyett, hogy a futási időre várna. A Babel, az ESLint és számos szerkesztőeszköz beépített támogatással rendelkezik a JSX számára.

A JSX másik nagyszerűsége, hogy nemcsak a HTML-t célozhatja meg vele. Célzhatja az egyedi jelöléseket, megcélozhatja a vászont, akár natív mobil felhasználói felületet is megcélozhat.

A JSX esetében az a rossz dolog, hogy nem pontosan illeszkedik 1: 1 arányban HTML-címkékkel. Ez egy JavaScript API-k és a jelölések Frankenstein hibridje. Ez azt jelenti, hogy meg kell tanulnia a quirkait, például a `className` használatát a` class` helyett - de mivel elég egyszerűen keverheti a sima régi JavaScriptet a JSX-rel hurkokhoz, feltételekhez stb. ... Azt hiszem, hogy legyőzi az ng2-t a tanulhatóság érdekében.

Mi a helyzet az állammal?

Mind a Angular 2, mind a React bármilyen adatkezelési réteget felhasználhat. Ha nem bánja a kétirányú adatkötéssel (ami az IMO egyébként rossz dolog), akkor saját államigazgatását az ng2-re állíthatja. Ajánlom az ngrx / store alkalmazást, amely alapvetően Redux + megfigyelhető.

A React esetén próbálja ki a Redux-ot (a legtöbb nagy alkalmazáshoz) vagy a MobX-t (kevésbé összetett alkalmazásokhoz, amelyeknek nincs szükségük tranzakciós állapotra).

A JavaScript alkalmazások modern állami menedzsmentjével kapcsolatos részletekért olvassa el a „10 tipp a jobb Redux architektúrához” című oldalt.

Mit kell választania?

Miután egy ideig erősen használtam (természetesen hosszabb ideig reagálunk), nyilvánvalónak tűnik számomra, hogy az Angular 2-nek sokkal több tech vásárlás és sokkal több kazán szükséges az alkalmazásokban.

Ha szereti a technikai döntéseket és élhet a kiegészítő kazánlap fölött, válassza az Angular 2 lehetőséget.

Ha elégedetlen a Angular 2 tech valamelyik választása mellett, és valami karcsúbb és kevésbé előírókért szeretne választani, válassza a React lehetőséget.

Természetesen vannak más lehetőségek is (ezek közül néhány nagyon jó), de van egy érték egy nagy ökoszisztéma és fejlesztői közösségben, és a React & Angular uralja a használatot. Még egy közel harmad sem van. Az egyetlen könyvtár, amely népszerűbb, mint a kettő, a jQuery (igen, még mindig).

Táncolj tovább.

Indítsa el az ingyenes órát az EricElliottJS.com webhelyen

Eric Elliott a „Szoftver készítése” és a „JavaScript alkalmazások programozása” című könyv szerzője. Az EricElliottJS.com és a DevAnywhere.io társalapítójaként alapvető szoftverfejlesztési készségeket tanít a fejlesztőknek. Fejleszti és tanácsolja a fejlesztőcsoportokat kriptoprojektekhez, és hozzájárult az Adobe Systems, a Zumba Fitness, a Wall StreetJournal, az ESPN, a BBC és a legjobbak felvételét alkotó művészek, például Usher, Frank Ocean, Metallica és még sok más szoftver-tapasztalatainak fejlesztéséhez.

Élvez távoli életmódot a világ legszebb nőjével.