\n Una domanda che mi viene posta quasi quotidianamente \u00e8 che dovrei iniziare con ReactJS o Angular? Tuttavia, prima di procedere oltre, lasciate che vi dia una dichiarazione di non responsabilit\u00e0.\n<\/p>\n
\n Non \u00e8 un blog in cui colpir\u00f2 l'uno o l'altro o dir\u00f2 che dovresti sempre usare l'uno sull'altro. Ogni sviluppatore e ogni progetto sono completamente diversi e hanno un diverso insieme di requisiti, quindi dire che dovresti sempre usare ReactJS o usare sempre Angular \u00e8 dannatamente stupido.\n<\/p>\n
\n Potresti sostenere che Angular \u00e8 un framework e React \u00e8 tecnicamente una libreria a s\u00e9 stante. Non sto negando questo fatto, ma questo \u00e8 l'argomento che non voglio entrare in questo momento. Ci sono pacchetti che puoi aggiungere a React che lo trasformeranno in un framework che compete direttamente con Angular. Stiamo confrontando i due ecosistemi, non la struttura esatta rispetto alla libreria esatta.\n<\/p>\n
\n Iniziamo con Angular. Ancora un altro disclaimer: quando dico Angular sto parlando di Angular 4 non di AngularJS.\n<\/p>\n
\n Angular \u00e8 un grande framework, il che significa che \u00e8 potente e include molto. C'\u00e8 molto da imparare. Ascolterai un sacco di nuovi vocaboli intimidatori come l'iniezione di dipendenze, decoratori di direttive, pipe, ecc. Quindi dovrai occuparti di Typescript, che \u00e8 JavaScript pi\u00f9 un sacco di altre funzionalit\u00e0 tra cui la digitazione statica.\n<\/p>\n
\n Angular \u00e8 pi\u00f9 supponente di React, il che \u00e8 uno dei vantaggi secondo me perch\u00e9 con React puoi fare la stessa cosa in un milione di modi diversi. Con Angular, ci sono generalmente uno o due modi per fare certe cose, il che rende pi\u00f9 facile da seguire, ti d\u00e0 istruzioni molto pi\u00f9 chiare su cosa dovresti fare.\n<\/p>\n
\n Ma poi di nuovo, si riduce alle preferenze. Ti potrebbe piacere la flessibilit\u00e0 di fare le cose in modi diversi. Come ho gi\u00e0 detto, ReactJS \u00e8 una libreria se parliamo solo della libreria principale, \u00e8 molto pi\u00f9 piccola e molto pi\u00f9 facile da imparare rispetto al framework Angular. Puoi dire che imparerai React in un lasso di tempo pi\u00f9 breve. React \u00e8 di per s\u00e9 un'ottima libreria di visualizzazione, ma non \u00e8 nemmeno cos\u00ec potente per applicazioni di grandi dimensioni. Se desideri instradamento, convalida, richieste HTTP in React, dovrai installare altri pacchetti e questo si aggiunge alla curva di apprendimento.\n<\/p>\n
\n Se guardi il codice React di due diversi sviluppatori, probabilmente sembreranno completamente diversi sia che stiano effettuando richieste HTTP o gestendo lo stato e le propriet\u00e0. Tutta quella roba pu\u00f2 essere gestita in modo molto diverso e molte volte pu\u00f2 essere nel modo sbagliato.\n<\/p>\n
\n Trovi le migliori pratiche e tutti i problemi scompaiono, ma ci\u00f2 si aggiunge alla curva di apprendimento.\n<\/p>\n
\n A differenza di Angular React non utilizza modelli. Utilizza qualcosa chiamato estensione JSX o JavaScript o estensione della sintassi JavaScript, che ci consente di incorporare l'HTML nel JavaScript. All'inizio questo pu\u00f2 sembrare un po' strano. Soprattutto, quando probabilmente ti \u00e8 stato insegnato a separare il tuo markup e il tuo JavaScript.\n<\/p>\n
\n Pensa a come inserire l'HTML all'interno di JavaScript con un paio di modifiche diverse: non puoi usare l'attributo class e devi usare il nome della classe.\n<\/p>\n
\n Infine, abbiamo Redux. React viene spesso utilizzato con Redux o Flux, ovvero gestori di stato a livello di applicazione. A mio parere, Redux \u00e8 dannatamente difficile solo impostarlo e apprenderne i concetti \u00e8 difficile.\n<\/p>\n
\n Penso che sia abusato. Penso che molti sviluppatori utilizzino redux dove non \u00e8 necessario. Non ne hai bisogno per applicazioni pi\u00f9 piccole, ma molti sviluppatori insistono nell'usarlo. Anche questo dipende dalle preferenze. Redux \u00e8 molto potente, non voglio portarlo via. Quando si parla della curva di apprendimento \u00e8 dannatamente difficile da cogliere.\n<\/p>\n
| \n Caratteristiche<\/span><\/span>\n <\/td>\n | \n Reagire<\/span><\/span>\n <\/td>\n | \n Angolare<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Linguaggio di programmazione<\/span><\/span>\n <\/td>\n | \n javascript<\/span><\/span>\n <\/td>\n | \n Dattiloscritto<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Struttura del codice<\/span><\/span>\n <\/td>\n | \n Supponente<\/span><\/span>\n <\/td>\n | \n Flessibile<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Libreria principale<\/span><\/span>\n <\/td>\n | \n Piccolo<\/span><\/span>\n <\/td>\n | \n Molto largo<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Modelli<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Competenza<\/span><\/span>\n <\/td>\n | \n Piccole Applicazioni<\/span><\/span>\n <\/td>\n | \n Applicazioni su larga scala<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Vincitore: \u00c8 un pareggio<\/strong>\n<\/p>\n \n Non \u00e8 giusto confrontare direttamente le prestazioni di Angular con React. Angular \u00e8 un framework front-to-back completo che include routing, strumenti per moduli, libreria HTTP, estensioni reattive, ecc. Tutte queste funzionalit\u00e0 gonfiano il framework e lo rendono pi\u00f9 lento. Tuttavia, React di per s\u00e9 \u00e8 solo una libreria di visualizzazione, che \u00e8 molto pi\u00f9 piccola e pi\u00f9 veloce.\n<\/p>\n \n Una volta che inizi ad aggiungere pacchetti come il router, il client HTTP o qualsiasi altra cosa aggiungerai alla tua applicazione React, inizia a salire un po ‘di pi\u00f9 rispetto a dove si trova Angular e quindi puoi iniziare a confrontarli in modo equo, ma anche dopo che React continua vince il dipartimento delle prestazioni. \u00c8 una tecnologia molto veloce in generale.\n<\/p>\n \n Il passaggio da Angular 2 ad Angular 4 sotto il cofano ha fatto un bel po' per aumentare le prestazioni. Angular 4 ha prestazioni migliori di Angular 2. Tuttavia, React vince ancora nel reparto prestazioni.\n<\/p>\n \n \n Vincitore: Reagisci<\/strong>\n<\/p>\n \n Entrambi i framework hanno molte delle stesse caratteristiche e vantaggi generali: organizzano il tuo codice, sono basati su componenti, offrono markup dinamico, ecc. Sono abituati a fare molte delle stesse cose e condividono un molte delle stesse caratteristiche.\n<\/p>\n \n Vedremo alcune delle caratteristiche individuali. Angular ha ovviamente molte pi\u00f9 funzionalit\u00e0 di React al suo interno. Lascia che te lo ricordi, stiamo parlando di due ecosistemi e pacchetti comuni utilizzati con React.\n<\/p>\n \n Angular \u00e8 un framework tutto incluso. Viene fornito con un router componente, estensioni reattive per osservabili, un client HTTP, un modulo del modulo per la convalida e l'elenco potrebbe continuare. Inoltre, offre data binding bidirezionale in un modo che nessun altro framework offre realmente. L'associazione dei dati dalla vista al modello \u00e8 estremamente semplice utilizzando la direttiva del modello ng.\n<\/p>\n \n Angular supporta anche MVC (Model View controller) o almeno aspetti diversi da quel modello di progettazione. \u00e8 inoltre dotato di funzionalit\u00e0 che consentono di implementare facilmente i test: sia il test unitario che il test end-to-end. Angular \u00e8 ricco di funzionalit\u00e0 per creare applicazioni front-end di livello aziendale. React d'altra parte non include molto al suo interno. Tuttavia, \u00e8 possibile aggiungere elementi per dargli le funzionalit\u00e0 che Angular include immediatamente, pi\u00f9 alcune aggiuntive.\n<\/p>\n \n React utilizza un DOM virtuale molto potente. Crea la propria versione leggera dell'attuale Dom e include e aggiorna solo ci\u00f2 che \u00e8 necessario anzich\u00e9 aggiornare l'intera cosa. Il DOM virtuale \u00e8 uno dei motivi principali per cui React \u00e8 incredibilmente veloce.\n<\/p>\n \n React utilizza JSX che \u00e8 pi\u00f9 potente dei modelli standard perch\u00e9 puoi inserire assolutamente qualsiasi tipo di JavaScript che desideri. JSX non \u00e8 necessario per utilizzare React, ma rende le cose molto pi\u00f9 semplici. Non riesco a pensare a nessun motivo per cui non dovresti usare JSX anche con Angular. React fa anche un ottimo lavoro nella gestione dello stato e delle propriet\u00e0 dei componenti. Rende i dati davvero facili da lavorare e passare tra i componenti. Passare i dati tra i componenti, Angular \u00e8 molto pi\u00f9 difficile che farlo in React.\n<\/p>\n \n Core React \u00e8 difficile mantenere lo stato a livello di app. Component State \u00e8 facile ma se vuoi una vera gestione dello stato a livello di app, allora avrai bisogno di Redux o Flux, che ho detto prima \u00e8 piuttosto confuso da imparare. I pacchetti esterni che vengono spesso utilizzati come la nuova versione 4 del router React sono un po' difficili da comprendere ma sono anche molto potenti una volta imparato a eseguirlo e configurarlo. Ci sono anche molti modi diversi per usarlo. React non ha un componente HTTP di base come Angular, ma puoi usare Fetch o Axios, che \u00e8 un client HTTP esterno e quindi Enzyme \u00e8 popolare per attestare React. Ci sono alcuni dei diversi pacchetti comunemente usati con React anche se non fanno parte della libreria vera e propria.\n<\/p>\n \n Sebbene entrambe le tecnologie condividano un buon numero di funzionalit\u00e0, se stai solo confrontando le tecnologie di base, allora Angular \u00e8 il vincitore.\n<\/p>\n \n Vincitore: Angolare<\/strong>\n<\/p>\n \n Angular e React hanno alcune interfacce a riga di comando piuttosto carine. La CLI di Angular e l'app Create React sono entrambe fantastiche e ci consentono davvero di semplificare lo sviluppo. La CLI di Angular \u00e8 un po' pi\u00f9 potente perch\u00e9 possiamo generare rapidamente cose come componenti e servizi. Create React non pu\u00f2 farlo. Devi creare tutto da solo per quanto riguarda i file e la struttura di base. Entrambi i sistemi utilizzano il web pack, hanno i propri server di sviluppo con caricamento automatico e dispongono di strumenti di compilazione e creazione. Ovviamente, Angular ha il compito aggiuntivo di transpilare Typescript. La CLI ha uno script per questo quando eseguiamo ng serve. Tutto quello che \u00e8 successo dietro le quinte. Usa qualcosa chiamato TSC o Typescript Compiler per questo ed entrambi hanno anche strumenti di test.\n<\/p>\n \n Se si tratta di un'applicazione full stack, questi sono davvero importanti. Non \u00e8 necessario utilizzarli. Puoi creare un'applicazione React da zero con il web pack. Questi rendono molto pi\u00f9 semplice non solo creare l'applicazione, ma anche compilarla e crearla per la produzione.\n<\/p>\n \n Sono entrambe carine anche in quel reparto.\n<\/p>\n \n Vincitore: Angolare<\/strong>\n<\/p>\n \n Come ho detto, entrambe queste tecnologie hanno i propri ecosistemi che ora si diffondono ben oltre il browser web.\n<\/p>\n \n Ionic \u00e8 un popolare framework ibrido che \u00e8 un'applicazione Angular che viene eseguita all'interno di un wrapper nativo per app mobili. Puoi creare app mobili utilizzando Angular. Le app ibride possono essere un po' goffe rispetto alle applicazioni native. L'esperienza dell'utente pu\u00f2 non essere cos\u00ec eccezionale a volte, non cos\u00ec veloce e reattiva. Tra i vari framework ibridi, Ionic 3 \u00e8 il migliore. C'\u00e8 anche NativeScript, che ci consente di creare vere app native per iOS e Android con Angular e JavaScript.\n<\/p>\n \n Tuttavia, NativeScript non sembra essere buono come React Native di Facebook almeno a questo punto. Angular ha anche una libreria di componenti di material design se sei un fan del material design. Angular Universal \u00e8 un progetto seed che pu\u00f2 essere utilizzato per il rendering di Angular sul lato server. C'\u00e8 anche il negozio NgRx che \u00e8 una libreria di gestione dello stato ispirata a Reax redux. Si basa sullo stato mutato dai peer reducer. Ha anche l'integrazione con le estensioni reattive.\n<\/p>\n \n Te ne saresti accorto. Una volta, uno di loro fa qualcosa che l'altro copia in modo diverso. React e Angular sono diventati framework Microsoft e Apple di JavaScript.\n<\/p>\n \n React ha abbastanza l'ecosistema. Ha React nativo che \u00e8 popolare. \u00c8 il modo migliore per creare app mobili con tecnologie web. React Native \u00e8 veloce e molte delle applicazioni, se create correttamente, sono all'altezza delle app native basate su Swift o Java. React ha una libreria di material design chiamata Material-UI che \u00e8 molto simile al componente di material design di Angular ma pi\u00f9 maturo. JS \u00e8 un framework per il rendering di applicazioni React lato server. Ha lo scopo di farlo nel modo pi\u00f9 semplice possibile in modo che possa essere paragonato ad Angular Universal. MobX \u00e8 un altro modo per gestire lo stato. Funziona in modo leggermente diverso rispetto a redux. Fornisce una serie di decoratori per definire osservabili e osservatori e introduce la logica reattiva nel tuo stato.\n<\/p>\n \n Storybook \u00e8 un ambiente di sviluppo per React. Ti consente di sfogliare una libreria di componenti, visualizzare diversi stati di ciascun componente e sviluppare e testare i componenti in modo interattivo. Reactive VR sta portando React nella realt\u00e0 virtuale. React desktop \u00e8 una libreria JavaScript costruita sopra la libreria Reacts che presumibilmente porta un'esperienza desktop nativa sul web, con molti componenti macOS e Windows 10. L'ecosistema React \u00e8 estremamente ampio e potente. React si sta facendo strada in ogni aspetto della tecnologia ed \u00e8 un chiaro vincitore.\n<\/p>\n \n Vincitore: Reagisci<\/strong>\n<\/p>\n \n Se stai decidendo tra questi framework, guarda le diverse categorie e vedi cosa ti interessa. Provali entrambi e vedi quale prendi pi\u00f9 velocemente. Fai qualche ricerca in pi\u00f9 rispetto a questo blog. Non otterrai mai tutte le informazioni di cui hai bisogno da un blog, quindi leggine altre.\n<\/p>\n \n Se stai guardando un ecosistema pi\u00f9 ampio che include lo sviluppo di app mobili native, scegli React senza pensarci due volte. Se cerchi funzionalit\u00e0, Angular \u00e8 enorme. Ci sono pi\u00f9 funzionalit\u00e0 di quelle di cui hai bisogno.\n<\/p>\n<\/p>\n |