\n Uma pergunta que me fazem quase diariamente \u00e9 se devo come\u00e7ar com ReactJS ou Angular? No entanto, antes de prosseguir, deixe-me dar-lhe um aviso.\n<\/p>\n
\n N\u00e3o \u00e9 um blog onde vou criticar um ou outro ou dizer que voc\u00ea deve sempre usar um em detrimento do outro. Cada desenvolvedor e cada projeto s\u00e3o completamente diferentes e eles t\u00eam um conjunto diferente de requisitos, ent\u00e3o dizer que voc\u00ea sempre deve usar ReactJS ou sempre usar Angular \u00e9 muito est\u00fapido.\n<\/p>\n
\n Voc\u00ea pode argumentar que o Angular \u00e9 uma estrutura e o React \u00e9 tecnicamente uma biblioteca por si s\u00f3. N\u00e3o estou negando esse fato, mas esse \u00e9 o argumento no qual n\u00e3o quero entrar agora. Existem pacotes que voc\u00ea pode adicionar ao React que o transformar\u00e3o em uma estrutura que compete diretamente com o Angular. Estamos comparando os dois ecossistemas, n\u00e3o a estrutura exata versus a biblioteca exata.\n<\/p>\n
\n Vamos come\u00e7ar com Angular. Ainda outro aviso: quando digo Angular, estou falando de Angular 4, n\u00e3o de AngularJS.\n<\/p>\n
\n Angular \u00e9 um grande framework, o que significa que \u00e9 poderoso e inclui muito. H\u00e1 muito a aprender. Voc\u00ea vai ouvir um monte de novo vocabul\u00e1rio intimidador como inje\u00e7\u00e3o de depend\u00eancia, decoradores de diretivas, pipes, etc. Ent\u00e3o voc\u00ea tem que lidar com Typescript, que \u00e9 JavaScript mais um monte de outros recursos, incluindo digita\u00e7\u00e3o est\u00e1tica.\n<\/p>\n
\n O Angular \u00e9 mais opinativo do que o React, o que \u00e9 uma das vantagens na minha opini\u00e3o porque com o React voc\u00ea pode fazer a mesma coisa de um milh\u00e3o de maneiras diferentes. Com o Angular, geralmente h\u00e1 uma ou duas maneiras de fazer certas coisas, o que facilita o acompanhamento e fornece instru\u00e7\u00f5es muito mais claras sobre o que voc\u00ea deve fazer.\n<\/p>\n
\n Mas, novamente, tudo se resume \u00e0 prefer\u00eancia. Voc\u00ea pode gostar da flexibilidade de fazer as coisas de maneiras diferentes. Como mencionei, o ReactJS \u00e9 uma biblioteca se estivermos falando apenas da biblioteca principal, \u00e9 muito menor e muito mais f\u00e1cil de aprender do que o framework Angular. Voc\u00ea pode dizer que aprender\u00e1 React em um per\u00edodo de tempo menor. O React \u00e9 uma \u00f3tima biblioteca de visualiza\u00e7\u00e3o em si, mas n\u00e3o \u00e9 nem de longe t\u00e3o poderoso para aplicativos grandes. Se voc\u00ea deseja roteamento, valida\u00e7\u00e3o e solicita\u00e7\u00f5es HTTP no React, precisar\u00e1 instalar outros pacotes e isso aumenta a curva de aprendizado.\n<\/p>\n
\n Se voc\u00ea observar o c\u00f3digo React de dois desenvolvedores diferentes, eles provavelmente parecer\u00e3o completamente diferentes, estejam fazendo solicita\u00e7\u00f5es HTTP ou manipulando o estado e as propriedades. Tudo isso pode ser tratado de maneira muito diferente e, muitas vezes, pode ser feito da maneira errada.\n<\/p>\n
\n Voc\u00ea encontra as melhores pr\u00e1ticas e todos os problemas desaparecem, mas isso aumenta a curva de aprendizado.\n<\/p>\n
\n Ao contr\u00e1rio do Angular, o React n\u00e3o usa templates. Ele usa algo chamado extens\u00e3o JSX ou JavaScript ou extens\u00e3o de sintaxe JavaScript, que nos permite incorporar HTML no JavaScript. A princ\u00edpio, isso pode parecer um pouco peculiar. Especialmente, quando provavelmente voc\u00ea foi ensinado a separar sua marca\u00e7\u00e3o e seu JavaScript.\n<\/p>\n
\n Pense nisso como colocar HTML dentro do JavaScript com algumas mudan\u00e7as diferentes: voc\u00ea n\u00e3o pode usar o atributo class e precisa usar o nome da classe.\n<\/p>\n
\n Por \u00faltimo, temos o Redux. React \u00e9 frequentemente usado com Redux ou Flux, que s\u00e3o gerenciadores de estado de n\u00edvel de aplicativo. Na minha opini\u00e3o, o Redux \u00e9 muito dif\u00edcil, apenas configur\u00e1-lo e aprender os conceitos dele \u00e9 dif\u00edcil.\n<\/p>\n
\n Acho que \u00e9 usado em demasia. Acho que muitos desenvolvedores usam redux onde n\u00e3o \u00e9 necess\u00e1rio. Voc\u00ea n\u00e3o precisa dele para aplicativos menores, mas muitos desenvolvedores insistem em us\u00e1-lo. Isso novamente se resume \u00e0 prefer\u00eancia. Redux \u00e9 muito poderoso, n\u00e3o quero tirar isso. Ao falar sobre a curva de aprendizado, \u00e9 muito dif\u00edcil de entender.\n<\/p>\n
| \n Caracter\u00edsticas<\/span><\/span>\n <\/td>\n | \n Reagir<\/span><\/span>\n <\/td>\n | \n Angular<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Linguagem de programa\u00e7\u00e3o<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n TypeScript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Estrutura de C\u00f3digo<\/span><\/span>\n <\/td>\n | \n Opinativo<\/span><\/span>\n <\/td>\n | \n Flex\u00edvel<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Biblioteca Central<\/span><\/span>\n <\/td>\n | \n Pequena<\/span><\/span>\n <\/td>\n | \n Muito grande<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Modelagem<\/span><\/span>\n <\/td>\n | \n JSXGenericName<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Compet\u00eancia<\/span><\/span>\n <\/td>\n | \n Pequenas Aplica\u00e7\u00f5es<\/span><\/span>\n <\/td>\n | \n Aplica\u00e7\u00f5es em Grande Escala<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Vencedor: \u00e9 um empate<\/strong>\n<\/p>\n \n N\u00e3o \u00e9 justo comparar diretamente o desempenho do Angular com o React. Angular \u00e9 um framework front-to-back completo que inclui roteamento, ferramentas de formul\u00e1rio, biblioteca HTTP, extens\u00f5es reativas, etc. Todos esses recursos incham o framework e o tornam mais lento. No entanto, o React por si s\u00f3 \u00e9 apenas uma biblioteca de visualiza\u00e7\u00e3o, que \u00e9 muito menor e mais r\u00e1pida.\n<\/p>\n \n Uma vez que voc\u00ea come\u00e7a a adicionar pacotes como o roteador, cliente HTTP ou o que quer que voc\u00ea v\u00e1 adicionar ao seu aplicativo React, ele come\u00e7a a aparecer um pouco mais onde o Angular est\u00e1 e ent\u00e3o voc\u00ea pode come\u00e7ar a compar\u00e1-los de forma justa, mas mesmo depois disso o React ainda ganha o departamento de desempenho. \u00c9 uma tecnologia muito r\u00e1pida em geral.\n<\/p>\n \n A mudan\u00e7a de Angular 2 para Angular 4 sob o cap\u00f4 fez bastante para aumentar o desempenho. O Angular 4 tem desempenho melhor que o Angular 2. No entanto, o React ainda vence no departamento de desempenho.\n<\/p>\n \n \n Vencedor: Reagir<\/strong>\n<\/p>\n \n Ambos os frameworks t\u00eam muitos dos mesmos recursos e vantagens gerais: eles organizam seu c\u00f3digo, s\u00e3o baseados em componentes, oferecem marca\u00e7\u00e3o din\u00e2mica, etc. Eles s\u00e3o usados \u200b\u200bpara fazer muitas das mesmas coisas e compartilham uma muitos dos mesmos recursos.\n<\/p>\n \n Veremos alguns dos recursos individuais. O Angular obviamente tem muito mais recursos do que o React em seu n\u00facleo. Deixe-me lembr\u00e1-lo de que estamos falando de dois ecossistemas e pacotes comuns usados \u200b\u200bcom o React.\n<\/p>\n \n Angular \u00e9 uma estrutura com tudo inclu\u00eddo. Ele vem com roteador de componentes, extens\u00f5es reativas para observ\u00e1veis, um cliente HTTP, um m\u00f3dulo de formul\u00e1rio para valida\u00e7\u00e3o e a lista continua. Al\u00e9m disso, oferece liga\u00e7\u00e3o de dados bidirecional de uma forma que nenhuma outra estrutura realmente oferece. A vincula\u00e7\u00e3o de dados da exibi\u00e7\u00e3o ao modelo \u00e9 extremamente f\u00e1cil usando a diretiva de modelo ng.\n<\/p>\n \n Angular tamb\u00e9m suporta MVC (Controlador de exibi\u00e7\u00e3o de modelo) ou pelo menos aspectos diferentes desse padr\u00e3o de design. ele tamb\u00e9m vem com recursos que permitem implementar testes facilmente: tanto o teste de unidade quanto o teste de ponta a ponta. O Angular est\u00e1 repleto de recursos para criar aplicativos front-end de n\u00edvel empresarial. O React, por outro lado, n\u00e3o inclui muito em seu n\u00facleo. No entanto, coisas podem ser adicionadas para fornecer os recursos que o Angular inclui prontos para uso, al\u00e9m de alguns adicionais.\n<\/p>\n \n O React usa um DOM virtual que \u00e9 muito poderoso. Ele cria sua pr\u00f3pria vers\u00e3o leve do Dom real e inclui e atualiza apenas o que \u00e9 necess\u00e1rio, em vez de atualizar tudo. O DOM virtual \u00e9 uma das principais raz\u00f5es pelas quais o React \u00e9 incrivelmente r\u00e1pido.\n<\/p>\n \n O React usa JSX, que \u00e9 mais poderoso que os modelos padr\u00e3o, porque voc\u00ea pode colocar absolutamente qualquer tipo de JavaScript que desejar. O JSX n\u00e3o \u00e9 necess\u00e1rio para usar o React, mas torna as coisas muito mais f\u00e1ceis. N\u00e3o consigo pensar em nenhum motivo para voc\u00ea n\u00e3o usar JSX com Angular tamb\u00e9m. O React tamb\u00e9m faz um \u00f3timo trabalho ao gerenciar o estado e as propriedades do componente. Isso torna os dados realmente f\u00e1ceis de trabalhar e passar entre os componentes. Passar dados entre componentes, Angular \u00e9 muito mais dif\u00edcil do que faz\u00ea-lo no React.\n<\/p>\n \n O Core React \u00e9 dif\u00edcil de manter o estado do n\u00edvel do aplicativo. O estado do componente \u00e9 f\u00e1cil, mas se voc\u00ea deseja um verdadeiro gerenciamento de estado no n\u00edvel do aplicativo, precisar\u00e1 do Redux ou do Flux, que eu disse antes que \u00e9 muito confuso de aprender. Pacotes externos que s\u00e3o frequentemente usados \u200b\u200bcomo o novo roteador React vers\u00e3o 4 s\u00e3o um pouco dif\u00edceis de entender, mas tamb\u00e9m s\u00e3o muito poderosos quando voc\u00ea aprende a execut\u00e1-lo e configur\u00e1-lo. Existem muitas maneiras diferentes de us\u00e1-lo tamb\u00e9m. O React n\u00e3o possui um componente HTTP principal como o Angular, mas voc\u00ea pode usar o Fetch ou o Axios, que \u00e9 um cliente HTTP externo e o Enzyme \u00e9 popular para atestar o React. Existem alguns dos diferentes pacotes que s\u00e3o comumente usados \u200b\u200bcom o React, mesmo que n\u00e3o fa\u00e7am parte da biblioteca real.\n<\/p>\n \n Embora ambas as tecnologias compartilhem um bom n\u00famero de recursos, se voc\u00ea estiver apenas comparando as principais tecnologias, o Angular \u00e9 o vencedor.\n<\/p>\n \n Vencedor: Angular<\/strong>\n<\/p>\n \n Angular e React t\u00eam algumas interfaces de linha de comando muito boas. O Angular CLI e o aplicativo Create React s\u00e3o \u00f3timos e realmente nos permitem simplificar o desenvolvimento. O Angular CLI \u00e9 um pouco mais poderoso porque podemos gerar rapidamente coisas como componentes e servi\u00e7os. Create React n\u00e3o pode fazer isso. Voc\u00ea tem que criar tudo sozinho, tanto quanto os arquivos e a estrutura b\u00e1sica. Ambos os sistemas usam web pack, possuem seus pr\u00f3prios servidores de desenvolvimento de carregamento autom\u00e1tico e ferramentas de compila\u00e7\u00e3o e constru\u00e7\u00e3o. Obviamente, Angular tem a tarefa adicional de transpilar Typescript. A CLI tem um script para isso quando executamos ng serve. Tudo isso aconteceu nos bastidores. Ele usa algo chamado TSC ou Typescript Compiler para isso e ambos t\u00eam ferramentas de teste tamb\u00e9m.\n<\/p>\n \n Se for um aplicativo de pilha completa, eles s\u00e3o realmente importantes. Voc\u00ea n\u00e3o precisa us\u00e1-los. Voc\u00ea pode criar um aplicativo React desde o in\u00edcio com o pacote da web. Isso torna muito mais f\u00e1cil n\u00e3o apenas construir o aplicativo, mas tamb\u00e9m compil\u00e1-lo e desenvolv\u00ea-lo para produ\u00e7\u00e3o.\n<\/p>\n \n Ambos s\u00e3o bonitos, mesmo nesse departamento.\n<\/p>\n \n Vencedor: Angular<\/strong>\n<\/p>\n \n Como eu disse, ambas as tecnologias t\u00eam seus pr\u00f3prios ecossistemas que agora se espalham muito al\u00e9m do navegador da web.\n<\/p>\n \n Ionic \u00e9 uma estrutura h\u00edbrida popular que \u00e9 um aplicativo Angular executado dentro de um wrapper nativo para aplicativos m\u00f3veis. Voc\u00ea pode criar aplicativos m\u00f3veis usando Angular. Os aplicativos h\u00edbridos podem ser um pouco desajeitados em compara\u00e7\u00e3o com os aplicativos nativos. A experi\u00eancia do usu\u00e1rio pode n\u00e3o ser t\u00e3o boa \u00e0s vezes, nem t\u00e3o r\u00e1pida e responsiva. Entre os v\u00e1rios frameworks h\u00edbridos, o Ionic 3 \u00e9 o melhor. H\u00e1 tamb\u00e9m o NativeScript, que nos permite criar verdadeiros aplicativos nativos para iOS e Android com Angular e JavaScript.\n<\/p>\n \n No entanto, o NativeScript n\u00e3o parece ser t\u00e3o bom quanto o React Native do Facebook, pelo menos neste ponto. O Angular tamb\u00e9m possui uma biblioteca de componentes de design de material, se voc\u00ea for um f\u00e3 de design de material. Angular Universal \u00e9 um projeto inicial que pode ser usado para renderizar Angular no lado do servidor. H\u00e1 tamb\u00e9m a loja NgRx, que \u00e9 uma biblioteca de gerenciamento de estado inspirada no Reax redux. \u00c9 baseado no estado mutado por redutores de mesmo n\u00edvel. Tamb\u00e9m possui integra\u00e7\u00e3o com extens\u00f5es reativas.\n<\/p>\n \n Voc\u00ea teria notado. Uma vez, um deles faz algo que o outro copia de maneira diferente. React e Angular tornaram-se Microsoft e Apple de frameworks JavaScript.\n<\/p>\n \n React tem um ecossistema e tanto. Possui React nativo, que \u00e9 popular. \u00c9 a melhor maneira de criar aplicativos m\u00f3veis com tecnologias da web. O React Native \u00e9 r\u00e1pido e muitos dos aplicativos, se constru\u00eddos corretamente, est\u00e3o l\u00e1 em cima com aplicativos nativos que s\u00e3o constru\u00eddos em Swift ou Java. O React tem uma biblioteca de design de material chamada Material-UI, muito parecida com o componente de design de material do Angular, mas mais madura. JS \u00e9 uma estrutura para renderizar aplicativos React do lado do servidor. Ele visa fazer isso da maneira mais simples poss\u00edvel, para que possa ser comparado ao Angular Universal. MobX \u00e9 outra maneira de gerenciar o estado. Funciona um pouco diferente do que o redux. Ele fornece um conjunto de decoradores para definir observ\u00e1veis \u200b\u200be observadores e introduz a l\u00f3gica reativa em seu estado.\n<\/p>\n \n Storybook \u00e9 um ambiente de desenvolvimento para React. Ele permite que voc\u00ea navegue em uma biblioteca de componentes, visualize diferentes estados de cada componente e desenvolva e teste componentes de forma interativa. A RV reativa est\u00e1 levando o React para a realidade virtual. React desktop \u00e9 uma biblioteca JavaScript constru\u00edda sobre a biblioteca Reacts que supostamente traz uma experi\u00eancia nativa de desktop para a web, apresentando muitos componentes macOS e Windows 10. O ecossistema React \u00e9 extremamente grande e poderoso. O React est\u00e1 entrando em todos os aspectos da tecnologia e \u00e9 um claro vencedor.\n<\/p>\n \n Vencedor: Reagir<\/strong>\n<\/p>\n \n Se voc\u00ea est\u00e1 decidindo entre essas estruturas, observe as diferentes categorias e veja o que lhe interessa. Experimente os dois e veja qual voc\u00ea pega mais r\u00e1pido. Fa\u00e7a mais algumas pesquisas mais do que este blog. Voc\u00ea nunca obter\u00e1 todas as informa\u00e7\u00f5es de que precisa em um blog, ent\u00e3o leia um pouco mais.\n<\/p>\n \n Se voc\u00ea estiver procurando por um ecossistema maior que inclua o desenvolvimento de aplicativos m\u00f3veis nativos, escolha React sem pensar duas vezes. Se voc\u00ea procura recursos, o Angular \u00e9 enorme. Existem mais recursos do que voc\u00ea precisa.\n<\/p>\n<\/p>\n |