Executando verificação de segurança...
18

Prazer, Angular!!

Olá! Hoje vim trazer para vocês um conteúdo mais técnico. Decidi falar sobre Angular, um framework web usado para a criação de páginas SPAs (como o React e Vue). Ao decorrer do texto farei alguns comparativos com o React.

Antes de iniciar o post, queria deixar algumas coisas claras: Eu sou um aspirante a dev full stack com Angular + C# (.NET). Iniciei meus estudos em Angular recentemente e resolvi revisar o que aprendi ensinando. Por isso, fique a vontade a passar alguma critica construtiva. Agora vamos ao conteúdos!

Afinal, o que é Angular?

Angular é um framework, que inicialmente foi baseado em Javascript, mas atualmente está escrito em Typescript (irei falar sobre isso mais tarde) para a criação de páginas SPA´s.

O Angular veio para resolver um problema no desenvolvimento web, que era a criação de páginas SPA (Single Page Aplication). Ele foi um dos (ou o) pioneiro neste sentido, visto que sua primeira versão foi lançada em meados de 2010.

O Angular é baseado em componentes. E isso significa que a aplicação web é dividida em "pedaços" e depois juntos para formar o que o dev desejar. Imagine que é como se fosse um lego, que você monta peça a peça. As maiores vantagens disso é mais facilidade na manutenção e reaproveitamento de componentes.

A sua estrutura é organizada e bem definida, ou seja, o Angular impõe alguns padrões de arquitetura para o dev seguir. Isso facilita na escala do projeto. Diferentemente do React, que deixa o desenvolvedor mais livre para organizar as coisas. Mas isso não quer dizer que o Angular é melhor que React e vice-versa. Isso vai depender muito do contexto da sua aplicação. Esse assunto será tratado mais a frente.

O seu sistema de ferrramentas (system tooling) é muito completo, que contém sua própria CLI, Router, HTTP etc. Ele já te da basicamente tudo que você precisa e raramente você irá precisar instalar bibliotecas de terceiros. O que é mais uma diferença do React, que dificilmente ao criar um projeto você não precise instalar alguma biblioteca externa. Mais uma vez: Isso não faz Angular melhor que React e vice-versa.

O Angular não é muito indicado de se utilizar em projetos pequenos ou quando você sabe que o projeto não tomará grandes proporções, pois o Angular ira adicionar uma complexidade desnecessária.

AngularJs x Angular

É muito comum para iniciantes confundir AngularJS com Angular, eu também fui um deles, mas AngularJS e Angular são duas coisas totalmente diferentes.

O AngularJs é a primeira versão do Angular, que foi escrito em Javacript e teve seu primeiro lançamento em meados de 2010. Porém, com a rápida evolução do Javascipt e a implementação do ECMAScript, o AngularJS passou por mudanças drásticas.

Essas mudanças deixaram muita gente descontente. Pode-se dizer que isso foi a porta de abertura para a criação de tantos frameworks para resolver o mesmo problema.

A partir da sua segunda versão, o Angular foi totalmente reescrito em Typescript, sua arquitetura foi alterada e seu nome também. Desde então passou a se chamar Angular.

O AngularJs se tornou legado e praticamente caiu em desuso. Diferente do Angular, que é mantido pela gigante Google e recebe atualizações até hoje.

Angular vs React

Pode-se dizer que esse é um excelente debate, mas a resposta para qual é o melhor é um tradicional depende.

Não existe tecnologia ou framework melhor que o outro. Existe contexto e cada um se sairá melhor em seu contexto. Por exemplo, o Angular é mais indicado para projetos de grande porte ou para projetos que você sabe que no futuro precisará escalar, pois em projetos menores pode ser adicionado uma complexidade desnecessária. Já o React é mais indicado para projetos de menor porte ou que não vai precisar escalar.

O principal motivo para Angular ser mais indicado para projetos de grande porte é pelo fato do Angular ser um framework. Isso faz com que o dev seja “forçado” a seguir uma arquitetura e jeito de escrever códigos imposto pelo framework.

O React é uma biblioteca, então ele é uma soma a mais a seu projeto. Como se fosse uma caixa de ferramentas ou uma peça a mais. Ele não impõe organização de pastas ou algo do tipo. Isso fica a cargo do desenvolvedor.

Isso não quer dizer que um projeto pequeno não pode ser feito em Angular ou que não da pra escalar um projeto React. Códigos ruins podem ser escritos independente da ferramenta - e é isso que são: Ferramentas. O código final é sempre feito por você. Se estiver mal feito, o problema esta entre o monitor e a cadeira e não no framework ou biblioteca.

Angular comparado ao React com mais detalhes

O Angular é mantido pela Google. Já o React pelo Facebook. Uma verdadeira briga de gigantes.

Como já foi dito, o Angular é um framework, ou seja, impera na forma que as coisas são organizadas ou te mostra o jeito de se organizar. Já o React é uma biblioteca, ele soma ao seu projeto, mas não altera a forma que o projeto deve ser estruturado. O desenvolvedor é mais livre para organizar.

Templating: O Angular cria seus templates com HTML + Typescript. O React cria com JS ou JSX.

Binding: Binding é a forma pelo qual as informações trafegam pelos componentes. O Angular usa a estratégia de Two-way data binding. Ou seja, as informações trafegam de forma bi-direcional. Tanto do componente pai para o componente filho, como do filho para o pai. No React as informações trafegam de forma uni-direcional, ou seja, somente de pai para filho. Seguindo sempre a hierarquia.

Manipulação da DOM: O React cria uma DOM virtual - chamada de Virtual DOM, que é uma cópia da DOM e vai injetando a lógica criada. Já o Angular não cria uma DOM virtual, o Angular faz algo como uma vinculação de dados, que permite que os elementos sejam atualizados de forma automatica assim que são alterados.

E essa breve introdução sobre Angular fica por aqui. Muito obrigado se você leu até aqui e fique a vontade para corrigir informações erradas ou adicionar mais alguma informação!!

Carregando publicação patrocinada...
2

Trabalhei com Angular desde sua versão JS e migração para TS, uma super ferramenta.
Comecei a trabalhar com React mas depois da exigência do Framework Next, vejo muitas empresas migrando para o Angular por estar mais sólido em relação a isso e não impor mudanças que o pessoal da Vercel faz para usar seus sistemas.
Eu mesmo estou voltando a atuar com projetos em Angular também, estava com saudade kkk.

1

O que mais gostei do Angular é que ele te da quase tudo que você precisa. No React tu sempre que tem instalar uma lib externa, usar com Next...

Eu até fiquei procurando algo equivalente ao Next para o Angular quando iniciei meus estudos, não vou mentir haha

1

Idem, eu já trabalhei também bastante com React, mas confesso que gosto muito das formas Angular de fazer as coisas. React funciona muito bem para algumas situações, projetos pequenos OU projetos grandes (no qual você tem tempo e equipe para desenvolver sua propria ui kit por exemplo)

1

Sim, esse lance de System Design no React acho da hora(quando dá para fazer), mas ter que colocar 'use client' em tudo já esta ficando chato kkk.
O Next tinha uma grande promessa se eles não focassem tanto na infra da Vercel, limita muito outras pessoas a usar em outras plataformas, tendo que aderir ao Vite com React "puro" o que eleva a complexidade de produzir estruturas maiores.
Não sei se sou eu, mas já notei que a maioria das telas construídas com Next ou React, existe um delay em componentes, as vezes uns tremem kkk, outros parece vir se arrastando apresentando sutis pixeis brancos. Eu sei que existe um possível erro entre a tela e a cadeira kkk, mas se uma ferramenta faz com que a maioria faça isso, vejo um problema na ferramenta.

2

Em 2013 eu usei AngularJS (1.x) para desenvolver um front-end de um sistema que já usava jQuery, e na época o Angular era muito poderoso porém confuso, mal estruturado.

Com o lançamento da versão 2 do framework, as coisas mudaram bastante, e hoje acho um dos frameworks mais maduros do mercado. Beeeeeeeeem mais a frente do React.

Pra mim a maior vantagem em relação ao react, é a existencia de um UI kit oficial (o angular material), e de um guia de estilo de codigo, que dita como você deve fazer as coisas, embora te deixe livre para fazer de outras formas.

Muitos falam da performance, mas sinceramente eu nunca tive problema com performance no Angular, exceto quando há algum erro de concepção do projeto.

1

Que massa! Eu realmente não sabia deste material Angular UI e do guia de estilo! Com certeza irei estudar sobre. Já vou até adicionar na minha agenda de estudos aqui.

Caramba a cada comentario aprendo uma coisa nova. Isso me motiva a criar mais contéudos. Para ensinar a alguém e aprender também. Obrigado pela sua contribuição!

1

Ótimo texto. estou sofrendo parra aprender esse framework mas, estou gostando muito.
a Tipagem é chata no começo mas depois você não vive sem heheh!

1

Realmente no começo tem essa dificuldade mesmo. Por isso muita gente desiste dele, mas com o tempo e pratica a gente vai ganhando confiança haha

Eu também estou estudando Angular. Hoje estava vendo sobre rotas

1
1

Sim! Eu to colocando o que aprendi em prática criando um blog pessoal.

No começo tive uma certa dificuldade, mas depois que aprende fica mais facil.

Achei a curva de aprendizado do Angular maior que a de React. Acho que é por isso que muita gente prefere o React kkkkk

1

Eu experimentei ja brincar um pouco com Angular, mas a senação que eu tive era de estar utilizando um "spring" no frontend. Achei super burocrático e acabei não dando mais muita atenção ao framework.

Reparem bem o fato de eu achar burocrático e não ter seguido em frente com ele, não quer dizer que eu ache ele ruim.

1

Essa é o maior obstaculo dele mesmo. Por isso muitos iniciantes preferem o React.

Eu estava vendo que muita gente elogia o Vue + Nuxt. Tenho vontade de brincar um pouco depois e ver as possibilidades.

Em projetos pequenos Angular adiciona uma complexidade desnecessaria.

1

O modo como as coisas são feitas no VUE me parecem muito mais simples de se entender, escrever e fazer do que no react.

Vue só não é tão famoso e utilizado em larga escala por conta de quem o mantem .. React tem o nome poderodo da META ( facebook ) por trás.
Muito lobby e tudo mais. Angular tem o Google. ( apesar do google amar matar as suas criações )

Vue tem quem ?

Estou usando svelte e ele consegue ser ainda mais simples que o VUE.

Recomendo dar uma olhada nele também. Agora que o cridor Rich Harris está trabalhando na Vercel tem tudo pra decolar. Mesmo a vercel tendo o Next.

1

Eu vou da uma olhada sim também, pode deixar! Só vou formar uma base boa no Angular ai fica mais fácil de brincar com os outros!

O React tem o facebook, junta com o Next que tem a Vercel então é um marketing pesado mesmo

Obrigado pelas sugestões!

1

Parece com o spring em que sentido?

Pq eu amo spring kkkkk

Aprendi o basico do React(componentes, states, props, routers, redux, reducers, arquiteturas de projeto, etc) mas tive que "engolir" muita coisa.

Em projetos pessoais é muito gostoso, mas em um projeto real, tive muita dificuldade em implementar novas funcionalidades.

Talvez seja alguém do além dizendo para dar uma chance ao Angular?

Fico com esse questionamento kkkk

1

Parabéns por seu artigo e obrigado pela contribuição.

Sua aspiração em se tornar um desenvolvedor full-stack usando C#/Angular é nobre. Essas ferramentas são muito robustas e amplamente utilizadas na indústria. No entanto, é importante manter a mente aberta e continuar aprendendo outras tecnologias e abordagens - focando principalmente nos padrões e especificações.

À medida que nos aproximamos de 2024, está se tornando evidente que o domínio dos SPAs está diminuindo, com um foco renovado no SSR e em outras abordagens. O campo do desenvolvimento web está em intensa evolução, e a linha entre o desenvolvimento front-end e back-end está cada vez mais turva.

É crucial para os desenvolvedores aprenderem não apenas ferramentas específicas, mas também principalmente os conceitos subjacentes. Especificações como WebAssembly e Web Components estão se tornando cada vez mais relevantes, sinalizando uma mudança na forma como as aplicações web são construídas e estruturadas que perdurarão muito além de qualquer framework.

Aqui estão algumas correções e expansões em seu artigo.

  1. O texto sugere que o Angular foi desenvolvido para resolver o problema da criação de SPAs. No entanto, é importante notar que o Angular visava solucionar um problema muito maior: evitar recargas completas de página a cada ação do usuário, um problema comum em aplicações web tradicionais, o Angular apresentou ao mundo uma solução robusta para esse problema, as SPAs.

    Antes do Angular, o jQuery era a biblioteca principal para adicionar interatividade às páginas web, mas ele carecia de uma maneira estruturada de construir aplicações. O Angular não apenas ofereceu uma ferramenta completa para a criação de SPAs (framework de programação), mas também forneceu as idéias e metodologias (framework conceitual) para o desenvolvimento de aplicações web do lado do cliente.

  2. Ao discutir a evolução do Angular, é crucial destacar a importância do ECMAScript 6 (ES6), lançado oficialmente em 2015, mas já em amplo uso desde 2014. O JavaScript antes do ES6 (espeficamente o ES5) era bastante diferente. O ES6 trouxe melhorias substanciais, tornando o JavaScript uma linguagem muito mais robusta e versátil, o que foi fundamental no desenvolvimento e popularidade dos frameworks web modernos.

    Dentro os milhares de frameworks, o Vue é um projeto independente, criado desde o ínico com o propósito de combinar o melhor do Angular e do React que ganhou muita popularidade. Além disso, frameworks como o Next trouxeram maneiras estruturadas de usar o React.

    O período de aproximadamente 2014 a 2020 viu uma explosão na popularidade dos SPAs, tornando o domínio de uma das três grandes ferramentas, um pré-requisito (e as vezes o único) para desenvolvedores front-end. Essa mudança foi revolucionária para a indústria de engenharia de software como um tudo, com a web se tornando maneira padrão de entregar GUIs.

Um abraço e bons estudos!

2

SENSACIONAL esse teu comentário!! Eu até fiquei com um certo receio para escrever esse post por não dominar tanto o Angular, mas sabia que teria pessoas que adicionariam mais conhecimentos. Eu vou até adicionar essas novas informações nas minhas anotações!!

Sobre as novidades, eu fico sempre de olho, sim" Inclusive vi que o .NET 8 e Blazor ta trabalhanco com WebAssembly e render modes. Para ser sincero, ainda tenho que estudar sobre esses termos mais profundamente, vi isso rapidamente em um video do Balta sobre o tema.

1

Finalmente alguém falando de Angular no TabNews kkk, também utilizo e acho excelente. Estou há pouco mais de um ano estudando, comecei com o básico do JS Vanilla e logo migrei para o Typescript para começar a usar Angular.

Seu post é excelente, me incomoda um pouco sempre ter que comparar com o React, mas fazer o que, concorrência é isso né.

Já vi pessoas falando que a curva de aprendizado é lenta e blablabla, mas eu discordo, acredito que apenas exige um conhecimento mais aprofundado e consistente (que vai te tornar um profisional mais qualificado, só vantagem). Pra mim tem muito mais pontos positivos do que negativos, principalmente agora com o Angular 17 e suas novidades.

Pra quem ainda não viu as novidades recomendo fortemente dedicar um tempinho pra entrar no novo site e no canal do Youtube pra ver.

No Angular 16 vieram os Signals, e agora temos a reformulação do Control Flow, possibilidade de fazer lazy loading a nível de componentes (antes era somente em rotas), Server-side rendering e etc.

Quem, assim como eu, está aprendendo Angular + Typescript e quiser manter contato estou a disposição.

Meu Linkedin
Meu Github

Bonus: Se vc gosta do Angular sugiro dar um confere no NestJS pra subsitituir o Node e Express!

1

Sim, essa comparação é complicada. As pessoas gostam muito de comparar tecnologia. Essas pessoas que vão pro React é sempre com o mesmo argumento que é mais facil etc.

Mas como você falou, a curva de aprendizado maior te torna um profissional melhor. As vezes o caminho mais fácil te abstrai de muitos aprendizados valiosos.

Quem deixa de aprender Angular por esse motivo são as mesmas pessoas que preferem Python a Java. Claro, apesar da curva de aprendizado ser maior, não achei um bicho de 7 cabeças não. Só requer um pouco mais de tempo e dedição. Fora que o Angular te da todo o apoio na documentação.

O React tem o Facebook por trás e junta com a turma do Foguetinho ai fica um hype pesado mesmo kkk

Fico feliz de encontrar mais pessoas aprendendo Angular. Vou te seguir no Github e Linkedin. O meu Linkedin está meio desatualizado e o GitHUb so to guardando projetos de estudos. Quando eu estiver buscando vagas, arrumo eles!