Elo verfügbar an der BETA Versioun, AngularJS 2 ass prett fir de waarme neie Kader vun 2016 ze ginn. Elo ass d'Zäit fir d'Evaluatioun. Loosst eis kucken wéi et géint de Schatz vun 2015 geet: ReactJS.
Verzichterklärung : Ech hu wierklech gär mat der Versioun 1 vun AngularJS geschafft, awer si sinn op ReactJS am Joer 2015 gewiesselt. Ech sinn vläicht net ganz objektiv, awer gleeft mir, ech attackéieren vu béide Säiten.
Komm, loosst eis blutt!
Fotokreditt: @jwcarrol
Probéiert net Uebst a Geméis ze vergläichen
Jo, AngularJS ass e Kader wärend ReactJS eng Bibliothéik ass. Fir e puer mécht dëst en objektive Verglach onméiglech. Dëst ass net meng Meenung!
D'Virdeeler vum AngularJS 2
Loosst eis mat de Virdeeler vum AngularJS 2 iwwer ReactJS ufänken.
Keng komplizéiert Entscheedungen
AngularJS ass e Kader, dat heescht datt et eng grouss Zuel vu gebierteg Optiounen a Feature ubitt. Mat ReactJS ass et néideg extern Komponentbibliothéiken derbäi ze ginn fir déiselwecht Zuel vu Featuren ze hunn. Dir musst Elementer fir Routing addéieren, unidirektional Fluxen zwéngen, APIen ruffen, Tester opsetzen, Ofhängegkeeten verwalten, asw. Den Entwéckler entscheet iwwer alles an déi geringsten technologesch Entwécklung baséiert op senge Choixen.
AngularJS erlaabt Iech eng Rei vun Optiounen direkt ze benotzen, wat et méiglech mécht e Projet méi séier unzefänken ouni ze entimidéiert vun de Choixen fir beim Start-up ze maachen. Dës Standardiséierung mécht et och ganz einfach Entwéckler z'änneren, well d'Projete baséieren op embedded an dofir Standardkomponenten, wat och Teamwork erliichtert.
Ech bewonneren och d'Adoptioun vum TypeScript vum AngularJS Entwécklungsteam, dëst féiert eis zum zweete wichtege Virdeel vun AngularJS.
TypeScript = Clear Path
TypeScript ass net eestëmmeg. AngularJS 2 huet d'Essenz vum Javascript och wann et net nëmmen Javascript ass. Fir säin Deel sinn d'ReactJS Beispiller presentéiert heiansdo an ES5, heiansdo an ES6 an de selwechte Proportiounen. An ReactJS erlaabt Iech elo dräi verschidden Deklaratioune fir déiselwecht Handlung ze benotzen: d'Komponenterklärung. Dëst huet den Effekt fir Newcomer ze desorientéieren.
Och wann AngularJS 2 d'Benotzung vum TypeScript net erfuerdert, dréckt de Kär vun AngularJS Entwéckler staark an dës Richtung, notamment duerch d'Dokumentatioun. Dëst bedeit datt déi meescht Beispiller verfügbar an Open Source Projeten Syntax ubidden déi Entwéckler vertraut hunn, déi dëse Standard verfollegen well déi meescht dëse Standard respektéieren. AngularJS bitt Beispiller déi weisen wéi een den TypeScript Compiler benotzt (Dës Demonstratiounen sinn iwwregens bewonnert, net jidderee benotzt TypeScript haut, awer ech si bereet ze wetten datt et geschwënn Standard gëtt). Dëse Wee fir ze schaffen hëlleft Feeler ze vermeiden verbonne mat enger schlechter Entscheedung déi am ReactJS kéint optrieden.
Reduzéieren Churn
2015 war d'Joer vun engem gewësse Verloscht am Vanille Javascript. ReactJS war ee vun den Akteuren vun dëser Ännerung. Wärend React bei der Versioun A 1.0 ass, ginn nei Ännerungen an der Zukunft erwaart. Den Ökosystem ronderëm ReactJS erlieft weider e Churn Phänomen, besonnesch ronderëm d'Komponenten déi am Flux benotzt ginn. Dëst bedeit datt alles wat haut an ReactJS geschriwwe gëtt, wahrscheinlech verouderd ass wann ReactJS 1 verëffentlecht gëtt oder op d'mannst e wesentleche Rewrite erfuerdert.
Am Géigesaz, AngularJS 2 ass eng methodologesch a virsiichteg Erfindung vun der viregter Versioun. Dës Versioun ass méi al, méi verständlech. Also jo, Updates an enger spéider Versioun vun AngularJS wäerte vill manner schmerzhaf sinn wéi déi vu ReactJS. An als komplette Kader, wa mir décidéieren mat AngularJS ze schaffen, wësse mer datt déi embedded an nativ verfügbar Elementer gutt zesumme schaffen well se gewielt goufen fir zesummen ze schaffen. Am ReactJS ass et Är Verantwortung fir Komponenten ze wielen déi an e puer Fäll Kompatibilitéitsprobleemer, Leeschtungsprobleemer, etc. Komponentupdates kënnen och zousätzlech Schwieregkeeten an Debugging verursaachen. Mir all wëssen datt dës Phasen frustréierend sinn, vill Zäit verschwenden a wierklech endlos schéngen.
Eng breet Palette vun ënnerstëtzten Tools
Wéi Dir hei ënnen gesitt, betruechten ech React JSX als e grousse Schrëtt no vir, obwuel et néideg ass Komponenten ze wielen déi JSX ënnerstëtzen. React ass sou populär ginn datt Ënnerstëtzung fir e bestëmmten Tool selten en Thema ass, Dir musst just geduldig sinn. Tatsächlech hunn nei Tools selten JSX Ënnerstëtzung wann se lancéiert ginn (Beispiller: IDEs, Linters, etc.). AngularJS 2 Templates an hir String Markup ginn a getrennten HTML Dateien gespäichert. Tatsächlech erfuerdert dës Method kee speziellt Tool fir hir Liesen ze erliichteren.
Kompatibel mat Web Komponenten
Den Design vun AngularJS 2 respektéiert Web Components Standards. Einfach gesot, d'Komponenten déi Dir an AngularJS 2 baut sollten vill méi einfach sinn a reng Komponenten ëmzewandelen wéi déi a ReactJS produzéiert. Browser-Ënnerstëtzung bleift limitéiert, awer dëst kéint e Beschleuniger op laang Siicht wärend Äre Migratiounen zum Beispill sinn.
Elo datt mir e bessert Verständnis vun den Highlights vum AngularJS 2 hunn, ass et Zäit d'Highlights vun ReactJS ze iwwerpréiwen.
D'Virdeeler vum ReactJS
Also wat ënnerscheet React wierklech?
JSX
JSX ass eng Pseudo-Sprooch mat enger Syntax no bei HTML kompiléiert vu Javascript. D'Markup an den Uwendungscode sinn an der selwechter Datei komponéiert. De Virdeel ass datt dës Architektur eng effizient Autokomplementéierung während der Entwécklung erlaabt, besonnesch wann eng Variabel, e Schlësselwuert, asw. Dëst ass e wichtegen Ënnerscheed mam AngularJS 2. Als Resultat huet ReactJS eng gutt, konsequent a komplett Syntaxfaarf an de meeschte Redaktoren, dacks mat op d'mannst deelweis Autocompletion an d'Méiglechkeet fir Feeler z'identifizéieren. . Dat gesot, AngularJS bitt engem hausgemaachte Parser dës Schwieregkeet ze iwwerwannen (gutt gemaach!).
Wann Dir allergesch sidd op Templates baséiert op Charakterstrings wéi an AngularJS, ass et och méiglech den Inhalt a verschidde Dateien opzedeelen, awer op d'Käschte fir zréck an eng "almodesch" Dateiarchitektur.
ReactJS identifizéiert séier Feeler
Wann Dir e Syntaxfehler am ReactJS maacht, gëtt et net kompiléiert. Dëst ass eng exzellent Saach. Dëst bedeit datt Dir fäeg sidd direkt z'identifizéieren wéi eng Rei e Feeler huet. De JSX Compiler seet eis direkt wann en Element zum Beispill net zou ass oder wann eng Immobilie mëssbraucht oder net existéiert am Kontext vun der Säit. Dës Approche streamlines bedeitend d'Entwécklungsphasen.
Am Géigesaz, wann e schlechte variabelen Referenztyp Feeler am AngularJS 2 gemaach gëtt, gëtt et keng Indikatioun ... AngularJS 2 'crasht' roueg, an trotzdem kompiléiert. De Feeler gëtt beim Start identifizéiert. Dëst huet den Effekt fir d'Entwécklung ze verlangsamen. Mir lueden d'Applikatioun an da musse mir eis froen firwat d'Donnéeën net lueden, zum Beispill ...
ReactJS ass Javascript Centric
Hei ass et, de fundamentalen Ënnerscheed tëscht ReactJS an AngularJS 2. Leider bleift AngularJS 2 op HTML konzentréiert anstatt Javascript. Dëst ass tatsächlech e fundamentalen Designproblem:
AngularJS 2 fiert Javascript op HTML derbäi. ReactJS setzt HTML an JavaScript.
Dëst beaflosst grondsätzlech d'Entwécklungserfarung. D'HTML-centric Approche ass déi gréisste Schwäch vun AngularJS. Javascript ass vill méi mächteg wéi HTML. Also, et schéngt méi logesch datt Javascript HTML Markup ënnerstëtzt wéi de Géigendeel. HTML an Javascript mussen zesumme schaffen, si sinn verlinkt. D'Javascript Approche vu ReactJS ass dofir grondsätzlech iwwer d'Approche vun AngularJS, EmberJS oder souguer Knockout déi um Géigendeel Paradigma baséiert.
hei ass firwat
ReactJS: Javascript-centric Design = Einfachheet
AngularJS 2 ass eng Fortsetzung vun der AngularJS Approche. D'Approche ass ëmmer HTML méi Kraaft ze ginn. Mir benotzen dofir d'AngularJS 2 Syntax fir einfach Veraarbechtung wéi Loops, Konditiounen, asw. Leider feelt dëst Standard. Zum Beispill AngularJS 2 bitt zwou Bindungsmethoden (einfach oder bidirektional) mat verschiddene Syntax:
{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding
Am ReactJS akzeptéiert entweder déiselwecht Aart vu Syntax.
{myVar}
AngularJS 2 ënnerstëtzt 'inline' Syntax direkt am Element:
<ul>
<li *ngFor="#hero of heroes">
{{hero.name}}
</li>
</ul>
D'Codebeispill hei uewen schléit duerch eng Array mam Numm 'Helden'. Ech hunn e puer Froen op dëser Etapp:
- Dir musst e 'Master' Modell iwwer eng fréier Instruktioun deklaréieren.
- de Pound Zeechen (#) virun Held deklaréiert eng lokal Variabel. Dëst Schlësselkonzept an AngularJS schéngt wéi onnéideg Kaméidi. Mir kënnen och var benotzen wa mir léiwer.
- D'ngFor Ausso füügt Loop Semantik un HTML duerch AngularJS-spezifesch Attributer.
Et gëtt e wesentleche Kontrast tëscht der Syntax vum AngularJS 2 uewen an deem vum ReactJS wat pure Javascript ass (ënnert).
<ul>
{ heroes.map(hero =>
<li key={hero.id}>{hero.name}</li>
)}
</ul>
Zënter datt Javascript Loops als Standard ënnerstëtzt, benotzt ReactJS JSX all d'Kraaft vu Javascript direkt fir dës Zort Operatioun, a vill anerer, wéi Kaarten, Filteren, etc.
Fir ReactJS ze liesen: Dir musst just Javascript wëssen.
- Ember: {{# jeweils}}
- Angular 1: ng-widderhuelen
- Angular 2: ngFor
- Knockout: data-bind = "foreach"
- Reaktioun: JUST BENOTZEN JS. 🙂
All ausser ReactJS benotze spezifesch Schlësselwierder amplaz vun den gebiertege Instruktiounen déi am Javascript verfügbar sinn: eng Loop. Hei ass d'Schéinheet vu ReactJS. Dëst respektéiert Javascript Konventiounen a behält seng Kraaft. Et gi keng béis Iwwerraschungen oder zweifelhaft Grammatik.
D'Quarks vun AngularJS 2 weider mat Klickverbindung:
(click)=”onSelect(hero)"
Am Géigesaz zu der Natierlechkeet vum gebiertege Javascript am ReactJS
onClick={this.onSelect.bind(this, hero)}
ReactJS enthält och en Eventsystem (wéi AngularJS 2). Dofir stellt d'Erklärung vun Eventer kee Leeschtungsproblem op wann Dir Nolauschterer deklaréiert.
Firwat Code Syntax a Grammatik spezifesch fir e Kader léieren wann Dir nëmmen e pure Javascript am Kapp behale kënnt?
Eng luxuriéis Entwécklungserfarung
Ënnerstëtzung fir Autocompletion fir JSX, Echtzäit Validatioun a räich Fehlermeldungen kënnen d'Entwécklung erheblech beschleunegen.
D'Gewiicht Fro
Hei ass d'Gewiicht vun de populärste Kaderen (Quell)
Angular 2: 566k (766k mat RxJS)
Wénkel 2 : 764k verklengert
Ember : 435 k an
Wénkel 1: 143 k an
Reaktioun + Redux : 151k verklengert
Also, AngularJS 2 ass 4 Mol méi schwéier wéi ReactJS + Redux déi an der Einfachheet vergläichbar sinn. AngularJS 2 wäert wahrscheinlech Gewiicht verléieren an de kommende Méint a virun der definitiver Verëffentlechung vun der offizieller Versioun, awer trotzdem!
Frameworks wéi AngularJS oder EmberJS si méi schwéier a punkto Gewiicht well et vill méi Features nativ verfügbar sinn.
Dëst stellt Froen op. Vill Uwendungen brauchen net all dës Elementer, déi an dëse Kaderen ugebuede ginn. An enger Welt wou ëmmer méi Mikro-Servicer oder Mikro-Apps entstinn, ReactJS bitt gutt Kapazitéitskraaft andeems Dir Iech nëmmen déi blo Essenziell erlabt. An enger Welt déi méi wéi 200.000 NPM-Typ Moduler kennt, ass dëst eng interessant Positionéierung.
ReactJS respektéiert d'Philosophie vun der UNIX Welt
Denkt drun, ReactJS ass eng Bibliothéik. Dëst ass genau de Géigendeel vun der Philosophie vu méi breede Kaderen wéi AngularJS an EmberJS. Wa mir ReactJS auswielen, si mir fräi fir déi bescht modern komplementär Bibliothéik ze wielen fir dës oder déi Schwieregkeet ze léisen. Javascript fortschrëtt séier, a React erlaabt Iech vun engem klenge Stéck Code an eng Applikatioun ze goen, déi méi grouss Bibliothéiken an engem Blëtz vun engem Aen integréiert.
Zesummefaassung
AngularJS 2 ass eng bedeitend Verbesserung iwwer dat wat a senger éischter Versioun ugebuede gouf. Den neie Komponentmodell ass méi einfach ze verstoen an z'integréieren wéi d'Versioun 1 Richtlinnen. Dës Versioun ënnerstëtzt Isomorphismus / Universal Rendering an et benotzt eng Versioun vu virtueller DOM déi eng 3 bis 10 Mol Verbesserung wat d'Leeschtung ugeet. Dës Ännerungen maachen AngularJS 2 e Kader deen näischt ze schummen huet am Verglach mam ReactJS. Et kann net ofgeleent ginn datt d'Features, déi vum AngularJS 2 ugebuede ginn, iwwergräifend sinn a bedeitend Virdeeler ubidden andeems d'Bedierfnes fir Javascript ze schreiwen reduzéiert gëtt.
Wéi och ëmmer, d'Gewiicht vum AngularJS 2 a seng Syntax stellen Froen op. D'Tatsaach datt AngularJS HTML-centric ass mécht et komplex fir et mat ReactJS ze vergläichen wat JavaScript-centric ass. Am React ass et net néideg eng bestëmmte Sprooch ze léieren fir de Kader ze benotzen. Dir musst just Javascript wëssen. Wéi och ëmmer, ReactJS schreift näischt fir den Entwéckler, also ass et vill méi Code fir allgemeng ze schreiwen, och wann et just Javascript ass. Dëst ass d'Zukunft un déi ech gleewen.
Original Artikel aus Cory Haus, publizéiert op de Site medium.freecodecamp.com
Iwwersat aus Englesch vun Matthew Breton - CTO JS Republik
[Trennungstyp ="" Gréisst ="" Ikon = "Stär"] [actionbox Faarf = "Standard" Titel ="" Beschreiwung ="JS-REPUBLIC ass eng Servicefirma spezialiséiert op JavaScript Entwécklung. Mir sinn eng guttgeheescht Training Zentrum. Fannt all eis technesch Formatiounen op eisem Partner Site gewidmet fir Training” btn_label=”Eis Training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external = "1"]
