Imprimir

Angular 2.1

Framework Name: Angular

Student List (with name and USP id):

  • Felipe Cadavez Oliveira - 11208558 (coordenador)
  • João Lucas Rodrigues Constantino - 11795763 (editor)
  • Gabriel Zanotim Manhani - 11912276
  • Eduardo Henrique Porto Silva - 11796656
  • Ana Clara Amorim Andrade - 10691992
  • Henrique Garcia Gomes do Ó - 10734331
  • Mateus Israel Silva - 11735042
  • Breno Alves de Sousa - 11345555
  • Yure Pablo do Nascimento Oliveira - 11275317

Main Framework Features:

Angular se trata de um framework cross-platform, de código aberto e baseado em TypeScript, que  permite a construção tanto de aplicações simples, quanto de aplicações de maior complexidade, além de realizar otimizações de performance nos códigos escritos pelo usuário — tornando-o eficiente em construir aplicações ágeis. Ademais, abstrai a manipulação do Document Object Model (DOM), e permite elevada modulação dos componentes de desenvolvimento — de modo a reduzir o código e o acoplamento —, além de seguir a arquitetura Model-View-Controller, que é ideal para a construção de aplicações baseadas em interface gráfica,

Quanto às características de desenvolvimento, o framework envolve comandos em linha por meio da Angular CLI, assim como diretivas de desenvolvimento, e a fácil injeção de dependências externas. Ainda, inclui um eficiente two-way data binding — de modo a refletir transformações do Modelo na camada de Visão instantaneamente —, e o Component Development Kit (CDK), que permite, dentre diversas outras possibilidades de automação do frontend, o uso do virtual scrolling.

Framework Advantages:

Em geral, suas features são vantajosas em si, uma vez que aprimoram e facilitam as condições de desenvolvimento em comparação às condições nativas. Nesse sentido, destacam-se o projeto modular baseado em componentes (component-based), a fácil manipulação do DOM via two-way data binding, o suporte integrado para AJAX, HTTP e observables, a abstração e facilitação do desenvolvimento de Single Page Applications (SPAs), e a inclusão do Angular Ivy — que provê otimização de uso e de pré-compilação de arquivos do servidor, sendo muito vantajoso para o desenvolvimento de pequenas aplicações.

Além disso, apresenta integração com diversas bibliotecas de automação de testes e, somando-se ao fato de ser baseado em TypeScript, torna-se ótima opção para a implementação de testes de código — de modo a facilitar o processo de validação e de verificação da solução implementada. Por fim, o framework é mantido — em código aberto — pela Google, possui uma extensa comunidade e um grande tempo de mercado, é amplamente utilizado no ambiente corporativo e apresenta notórias robustez e documentação.

Framework Disadvantages:

  • Devido à organização em árvore implementada pelo Angular, debugar o codigo pode ser bem difícil, principalmente devido ao cascateamento de indefinições: caso uma requisição seja feita a um nó pai, porém não está definida em sua estrutura, tal requisição é propagada aos seus filhos e, caso continue não sendo atendida, a pilha de erros ascende na estrutura hierárquica até ao nó pai originalmente requisitado — de modo a complicar a sua interpretação.
  • A curva de aprendizado é mais extensa, sobretudo no que se refere à injeção de dependências e à inversão de controle, tornando-se um empecilho tanto para novos programadores, quanto para programadores experientes ainda não acostumados com tais funcionalidades.
  • Devido à vinculação de dados bidirecional, especialmente em dispositivos mais antigos, a  abstração da manipulação do DOM pode acarretar redução de desempenho, pois envolve grande consumo de recursos computacionais por parte do navegador — o qual se encontra constantemente ocupado com a manipulação dos elementos da página.
  • Caso sua SPA cresça muito, pode haver problemas de performance, pois o Angular utiliza alguns subterfúgios para conseguir executar o código de modo independente ao browser.
  • No caso de frameworks modernos, como Vue e React, é criado um DOM virtual no qual eles trabalham, que possui uma manipulação muito mais simples do que o DOM utilizado pelo Angular. Além disso o Vue e o React são bibliotecas mais leves, que podem ser utilizados com outros frameworks, o que não ocorre com o Angular — dado que ele precisa de um ecossistema próprio para funcionar.
  • Embora no presente isto tenha diminuído, trabalhar com o Angular costumava ser ainda mais complicado, pois, a cada nova atualização do framework, as mudanças eram bem drásticas e, em geral, requeriam uma reestruturação quase completa do código
Main Application Niches:

Seu principal nicho são as aplicações dinâmicas, isto é, aquelas que precisam de resultado instantâneo e podem lidar com uma grande quantidade de dados, gerando tráfego intenso — como, por exemplo, mídias em tempo real, mídias sociais, aplicações de chat, de meteorologia, de viagem e de localização; a saber, o Angular providencia ótima performance sob essas condições, incluindo os menores tempos de resposta. Ainda, os ambientes corporativos são outro de seus nichos, nos quais há oferecimento de uma solução consistente e de fácil manutenção via, sobretudo, sua injeção de dependências e seu suporte à validação e à verificação de código.

Future Perspectives:

  • Implementar APIs para NgModules opcionais, de modo a simplificar o processo de inicializar e instanciar componentes, e a usar o router de modo independente a eles.
  • Melhorar a performance de imagens: melhoria que pode permitir que páginas web sejam carregadas ainda mais rapidamente, proporcionando uma melhor experiência ao usuário.
  • Adicionar diretivas em elementos hosts: o recurso permitiria que os desenvolvedores acrescentem propriedades aos componentes, com comportamentos adicionais, sem ter de recorrer ao uso da herança.
  • Melhorar a pilha de erros, sobretudo sua capacidade de informar os passos que levaram aos erros.
  • Novas primitivas CDK: novas primitivas que permitiriam criar componentes UI com base em WAI-ARIA design.
  • Melhorar a performance do processo de build ao distribuir o Angular como um plugin do TypeScript.
Apresentação em slides:
link