SCC0219 - Introdução ao Desenvolvimento Web (2022)

Framework name: Angular

Slides presentation link

Student List (with name and USP id) 

Main Framework Features

• Cross-platform: permite criar apps simultaneamente para mais de uma plataforma, como web, mobile nativo e desktop;
• Permite a criação de PWAs (Progressive Web Apps) que é uma adaptação de um site para um formato mobile;
• Permite usar diversas linguagens como base de desenvolvimento, como NodeJS, .NET e PHP, de forma, que há uma conversão quase instantânea para HTML e CSS;
• A API do Angular é intuitiva e de fácil manipulação;
• É possível arrumar seu código por meio de estruturas de teste de unidade inteligentes como Jasmine e Karma de forma pré configurada;
• API de animações embutida nativamente no Angular;
• Possui arquitetura MVC (Model-View-Controller), e garante que os desenvolvedores só precisam dividir o aplicativo em MVC e ele faz o resto por conta própria, não sendo necessário escrever o código para conectar as diferentes partes do programa, o que o torna uma estrutura de baixo código em comparação com as outras tecnologias de front-end. 
• Possui um sistema de vinculação de dados bidirecional, o View e o Model tem sincronização automática, logo uma alteração no Model é refletida automaticamente no View;
• O virtual scrolling é uma feature que permite um tempo de loading muito menor do site ao renderizar apenas os componentes que estão em tela. Dessa forma, views que não estão sendo utilizados não têm que ser renderizados pelo navegador.
• Injeção de dependências: permite a modularização do código através do uso de dependências externas.

Framework Advantages 

Por ser um framework, possui uma grande variedade de recursos nativos, que facilitam o desenvolvimento em relação aos outros frameworks do mercado;

Já possui um estilo de programação definido, o MVC, que divide a aplicação em níveis, tornando o desenvolvimento mais separado em partes.

Um dos recursos inteligentes oferecidos é chamado de carregamento lento, isso é uma vantagem pois o roteador pode carregar o módulo sob demanda e não precisa fazer toda a fiação na inicialização, como nas arquiteturas de roteamento mais antigas.

Boa estabilidade: mantido pela Google e possui versão LTS (Long Term Support)

Facilidade de Modularização: Por ter injeção de dependências e "opinar" sobre como será feita a modularização.

Framework Disadvantages

• Curva de aprendizado maior que outras frameworks devido ao uso do TypeScript e rxjs, o controle de data flow two-way, a injeção de dependências e o modelo envolta do NgModule, forçando o usuário a compreender uma quantidade de conceitos base maior antes de conseguir começar o desenvolvimento.
• As opções limitadas de Search Engine Optimization e acessibilidade baixa aos search engine crawlers o que pode causar um carregamento lento do código js e delays na indexação de conteúdo dinâmico.
• Por ser um projeto da Google o Angular não consegue ser completamente da comunidade e descentralizado, com a manutenção e as decisões finais sendo deixadas a uma entidade máxima.
• Dificuldades de debugging os escopos devido à arquitetura hierárquica de árvore e aos Deep Scopes.
• Two way binding em hardware mais antigo pode gerar uma perda de performance por causa de nesting muito grande e o uso da recursão usar muita memória.
• Angular muito mais pesado em comparação com outras frameworks mais como o Vue e o React que são mais lightweight, já que as features estão acopladas à framework, ao invés de serem instaladas quando necessárias. Isso também é problema pois não é possível usar outras bibliotecas e componentes javascript criadas para uso em outras frameworks pois o Angular busca criar seu próprio ecossistema.
• Angular não tem um virtual dom em comparação com outras frameworks que usam isso, facilitando a mudança nas views.
• Dificuldades de migração de código legacy js/jQuery e de upgrade para versões mais novas do angular devido ao ciclo de desenvolvimento rápido e iterativo e a falta de backwards compatibility entre as versões.

Main Application Niches

Atualmente, existe um vasto número de bibliotecas de JavaScript, com inúmeras opções para o desenvolvimento de aplicações web. Um dos maiores e mais relevantes frameworks de design de aplicações é o Angular.

No entanto, tendo em vista a massiva quantidade de ferramentas de design de aplicações web, é necessário avaliar os pontos fortes de cada framework para deliberar qual deles é o ideal para o desenvolvimento de cada tipo de projeto. 

No caso do Angular, essa plataforma destaca-se na criação de web apps para todos os tipos de ambiente, principalmente:

• Dynamic web apps: onde os conteúdos e componentes são mostrados de acordo com o usuário que está acessando e o cliente (web ou mobile) que consome a aplicação.

• Business-level apps: Typescript permite o design de aplicativos a partir da reutilização de componentes e diferentes módulos. Ainda, devido à grande variedade de bibliotecas, é possível acelerar o desenvolvimento do projeto.

• Single-page apps/progressive web apps (SPA/PWA): Angular uma grande gama de opções e suporte para a projeção de apps minimalistas mas altamente dinâmicos.

Contudo, o Angular não se mostra a melhor escolha em todos os casos. Em certos projetos, mostra-se necessário buscar outras plataformas que facilitem o desenvolvimento do projeto. São esses casos:

• Desenvolvimento de páginas com conteúdo estático, que não necessitam de customização pelo usuário. A implementação do Angular nesses tipos de websites apenas sobrecarrega o trabalho das páginas, gerando arquivos muito mais pesados do que o necessário.

• Aplicativos desenvolvidos em estilo de micro-serviço. Como Angular é uma framework muito completa, não é possível ter o controle necessário para o desenvolvimento de projetos escaláveis.

• Websites otimizados para ferramentas de busca (ou Search-engine optimized (SEO) websites). Angular não é um framework que oferece melhores soluções para SEO websites e, por isso, desenvolver uma ferramenta de busca com ele pode ser um processo longo.

• Criação de componentes autônomos como um recurso de visualização do desenvolvedor, facilitando o aprendizado, tornando o NgModule não obrigatório.

• Fazer uma mudança no formato no modelo de componente, sistema de reatividade, e como as mudanças são detectadas e lidadas.

• Angular está trabalhando em formulários tipados, reforçando as vantagens do TypeScript, tornando mais forte a padronização de desenvolvimento do  Angular e detecção de erros DayZero.