Angular2 vs ReactJS - Ce alegeți pentru producție?

react-js
links
angular

(Ionut Moldoveanu) #1

Stiu ca nu se pot compara ca un intreg pentru ca unul e framework si altul nu dar pentru ceea ce au in comun momentan react pare mai matur ca angular 2 si pare sa castige disputa.

Voi ce ati alege pentru interfete?


(Ex. Dakull) #2

on topic:

Umm, I dunno: Use the right tool for the job?™ (Angular 2 nici macar nu a iesit din RCs)

EDIT:

https://splintercode.github.io/is-angular-2-ready/


(Ionut Moldoveanu) #3

Chiar nu intentionez sa fie flaming. Sunt doar curios ce ar alege lumea astazi.


(Ex. Dakull) #4

Cand a fost ultima data cand ai rulat in productie un framework in RC?


(Ionut Moldoveanu) #5

Point taken. Cu toate astea nimeni nu zice asta cand il promoveaza cu cel putin 1 an inainte de a putea fi folosit la ceva practic.


(Ionut Moldoveanu) #6

Si ca sa reformulez. Care credeti ca e the right tool for the job pentru (buzz word warning) progressive web apps?


(Ionuț Staicu) #7

4 posts were split to a new topic: Utilizarea framework-urilor/bibliotecilor aflate în stadiul de pre-repease


Utilizarea framework-urilor/bibliotecilor aflate în stadiul de pre-release
(Horia Coman) #8

Tl;dr: As zice ca cele doua ecosisteme sunt oarecum echivalente. Dar mai bine mergi pe mana lui React.

Am lucrat cu amandoua, pe proiecte as zice medii spre mari. Angular2 l-am folosit in varianta de Dart, asa ca asta s-ar putea sa coloreze intr-o anumita masura ce spun.

Primul lucru pe care l-as mentiona e ca trebuie sa te uiti la intregul ecosistem din jurul proiectului. Care inseamna:

  • Corporate backers: stam bine aici pentru amandoua. Fb pentru React si Google pentru Angular2. As da runda aceasta lui React pentru ca pare ca au facut partea de open source mult mai buna (756 vs 315).
  • Proiecte: React e folosibil si singur, dar aplicatii mari fara react-router etc. sunt mai grele. Angular2 vine cu multe din prima, asa ca, prin definitie, ecosistemul este mai mic. Chiar si asa, React pare mai vibrant si mai bine integrat in toata partea de front-end dev modern (exista un modul react ptr babel, dar nu unul pentru angular2).

Apoi, cam ce-ti trebie pentru lucru propriu-zis la o aplicatie? Aici as numi pe Angular2 castigator, in sensul in care iti ofera cam tot ce-ti trebuie pentru frontend: componente, dependency injection, router, putina abstractie peste ajax etc. La React, trebuie sa iti alegi tu. Si ai de unde alege. Cateva variante de router, cateva variante de state management (redux, flux etc.) etc. Pe de alta parte, esti liber sa folosesti ce vrei impreuna si am simtit ca e mult mai usor sa ies din framework in React decat in Angular - in sensul ca foloseam jQuery cu modificare de DOM si lucrurile erau “OK”.

Puncte de finete: amandoua au varianta “native”.

In termen de cod propriu-zis, Angular2 mi s-a parut mai OK. Limbajul de templating mi se mare mult mai dragut si separarea in componente mai OK. Angular2 mergea mult pe partea de webcomponents, shadow dom etc. fiind de baza. React e mai “simplu”. Limbajul de templating e combinat cu codul intrun format numit JSX. Nu sunt mare fan. Iterarea este absolut odioasa, fiind necesara construirea de mana a listei de elemente. Pe de alta parte e mai usor de “rationat” cand se intampla ceva in React (cand se schimba props sau starea), iar modelul in care componentele au input functional si raspund prin eventuri e mai OK de lucrat decat bindingurile bidirectionale din Angular (la care s-a renuntat pana la urma in favoarea unui model similar celui din React). Angular2 este de asemenea destul de legat de DI. Mie imi place, si imi place cum e implementat in Angular asa ca sunt fan. In React treaba e mai simpla, din nou si nu am vre-o solutie stas pentru problema asta, mai ales ca constructia componentelor este inafara controlului.

Un ultim punct: exista mult mai mult cod Angular1 decat Angular2. Angular1 nu e asa grozav la momentul asta.

In concluzie, n-ai cum sa gresesti cu una sau alta, pe un orizont de <3 ani. Dar parca lucrurile sunt mai mult in tabara lui React.


(Eugen) #9

Cred ca mai bine pui un poll si votam. :slight_smile:

I would go with React.


(Vilmos) #10

Angular 2 toata ziua!

Angular 1.x merge din prima cu foarte putin set up. React foarte rar merge fara Babel, webpack, redux, react-redux :confused: etc. etc. Nu e usor.


Utilizarea framework-urilor/bibliotecilor aflate în stadiul de pre-release
(Ex. Dakull) #11

Experienta mea cu React and friends (ca observator):

It literally killed a project due to exponential complexity of choosing stuff, various hacks and NIH whilst using all the goodies of ES6.


(Horia Coman) #12

Suna interesant, ca poveste din care se poate învăța. Aș fi curios de 2-3 paragrafe în plus despre proiect.


(Eugen) #13

Hard to believe that. Deciziile proaste nu tin de vreo librarie aparte ci de persoanele care le fac.

React e mai simplu de invatat decat Angular, complexitatea apare cand vrei sa te intreci in “cool tech” cu Facebook & Co. si incepi sa bagi Flux + Radium + GraphQL + etc, dar echipa e formata din <5 oameni.

As putea paria bani ca, complexitatea este din lipsa experientei in JS / front-end. Da un copy & paste la package.json din proiectul respectiv, lista de dependencies spune multe.


(Ex. Dakull) #14

=> :laughing:

Alta anecdota: pe un proiect am lucrat cu o echipa pt. UI - UI-ul fiind complex++ fata de proiectul cu React. Din devs unul era medium sau nou pe Angular 1.x. Guess what? It got finished on time.

Pe proiectul cu React, aveam in echipa doua persoane spre advanced, dupa o luna or more s-a facut un clean slate pt. ca arhitectura aleasa initial era compromisa.

Also guess what? La fel am obs. un bias puternic catre FP-everything just for the sake of it. :sunny:

In baza experientelor mele, raman sceptic asupra ecosistemului si as alege fie Angular 1.x (2 when it gets out of RC), fie Ember,js; you know, just for my sanity and making stuff actually work instead of arhitecturing for the sake of arhitecture.

EDIT:

tl;dr:

  • Angular 1.x, Ember.js => aparent mai greu de invatat insa iti dau o serie de boundaries in care sa lucrezi fara probleme indiferent de nivel
  • React and friends => aparent simplu (React ca view component este simplu, da) insa imediat ce vrei sa faci ceva complex automat esti without boundaries si poti face o amestecatura completa (aparent chiar si daca esti advanced)

(Ionuț Staicu) #15

Știi din ce cauză se întâmplă așa? Pentru că există The Angular way sau The Ember way pentru a folosi respectivele frameworks. Adică alea de care ziceai tu aici că nu-s neapărat o idee bună. :slight_smile:

La fel ca mai sus. Faptul că nu știi ce pachete să alegi să le pui peste React nu înseamnă că nu ai experiență în JS ci că nu ai experiență în React.

Este exemplul perfect de „Javascript Fatigue”, pe seama căruia au apărut zeci de articole în ultima vreme. Uită-te doar câte opțiuni ai pentru rutare (și tind să cred că nu sunt toate). Ce ai alege? De ce? De ce alegerea ta ar fi corectă/greșită? :slight_smile:


(Ex. Dakull) #16

Umm, nu :slight_smile: Motivul este simplu: batteries included

Documentatia are si ea rolul ei, foarte important de altfel (hint hint, Angular este oribila spre deosebire de Ember care a fost top notch de la bun inceput)


(Vilmos) #17

Haha. Faza e ca nu ai de ales, React e atat de simplu fiindca nu face multe. Ai nevoie de toate chestiile alea in plus. Pe cand in Angular, nu ai nevoie de nimic.


(Eugen) #18

Am lucrat cu Angular 2 in ultimile zile, ajut echipa unui amic sa dezvolte un app.

Pe langa TypeScript, cu care m-am obisnuit relativ repede, Angular inca are multe structuri “the Angular way”, ca exemplu o lista link-uri (extras din cod):

<a
  *ngFor="let artist of artists"
  [routerLink]="['/account', account.id, 'artist', artist.id]"
  [ngClass]="{ artist: true, active: isActive }"
  ">
  {{ artist.name }}
</a>

Spre surprinderea mea, ei au decis sa foloseasca ng2-redux. Pt. structura si documentatie s-au inspirat din cartea asta: Rangle.io : Angular 2 Training.

Acelasi principiu de “JavaScript fatigue” se aplica si la Angular. Setup-ul nu este chiar atat de simplu, sunt librarii care sunt necesare pt. browsere mai vechi, ex core-js.

CoreJS is the recommended polyfill for Angular 2. It fills in a lot of missing ES6 features. angular#5755

Personal tot la React & Co. raman.


UPDATE

Dupa ceva dezbateri s-au luat mai multe decizii printre care modificarea exemplului de mai sus, sa fie mai inteligibil:

<li *ngFor="let artist of artists" [ngClass]="{ artist: true, active: isActive }">
  <a [routerLink]="['/account', account.id, 'artist', artist.id]">
    {{ artist.name }}
  </a>
</li>

E cineva care s-a apucat sa scrie un app in Angular 2?


(Catalin Coroeanu) #19

Eu am ales React.
Are o curba de învățare mai mare la inceput si metoda de implementare mai dificila in schimb îți oferă un nivel de granulație si structurare fără limite.


(István F.) #20

React are cel mai mult sens acum, babel sau typescript sunt necesare dar super utile pe langa plain js, dacă as fi avut un babel pentru js/css când IE6 era baza pe business eram foarte fericit, singura optiune solida era flash. De anul acesta mi-am propus sa trec din html pe pug cu preact si css pe componente.

Toată șmecheria e sa înveți programare funcțională. Oarecum e ca fizica, după ce înveți integrarea si derivarea sau mecanica Lagrange multe lucruri devin triviale. (Ma rog tot o sa ai integrale triple dar deja faci lucruri imposibile altcumva) Dacă mă pun pe muncă fac o interfață de admin complexa pe componente cu rxjs/redux in 30 de minute. (Dacă api-urile sunt scrise si documentate calumea)