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

WEB Group Discussion - VUE

Students List

• Adrio Oliveira Alves (11796830)
• Bernardo Marques Costa (11795551)
• Guilherme Lourenço de Toledo (11795811)
• Pedro Augusto Ribeiro Gomes (11819125)
• Thales Darini Souza (10747562)
• João Pedro Rodrigues Freitas (11316552)
• Natan Henrique Sanches (11795680)
• Marcus Vinícius Teixeira Huziwara (11834432)
• Vinicius Santos Monteiro (11932463)
• João Victor Sene Araújo (11796382)
• Paulo Henrique de Souza Soares (11884713)

Main Framework Features

• Virtual DOM: O virtual DOM é um conceito presente em outros frameworks, como o react. Ele é um padrão de programação que permite que armazenemos - em memória - uma representação ideal da UI, que é sincronizada com o DOM real. Ou seja, não fazemos alterações diretamente no DOM, ao invés disso, temos um ambiente virtual em memória composto por estruturas de dados em JS, e as modificações feitas nele são , posteriormente, adicionadas ao DOM real. Essa feature concede ao desenvolvedor a capacidade de desenvolver a UI de maneira declarativa, deixando a manipulação do DOM para o renderizador, fazendo com que o processo seja mais eficiente, já que as mudanças podem ser feitas de forma mais rápida, e também é vantajoso em termos de otimização.
  
  
• Data Binding: O VUE permite, a partir de uma diretiva chamada v-bind, a manipulação ou atribuição de valores aos atributos HTML, mudança de estilos e atribuição de classes, sem que seja necessário acessar o documento HTML diretamente.
  
  
• Components: Característica de programação que permite criar elementos de código customizados em HTML. As bibliotecas do VUE facilitam a reutilização desses componentes, melhoram a produtividade do desenvolvedor e agilizam o processo de desenvolvimento.
  
  
• Event Handling: O framework fornece o atributo v-on, que é adicionado aos elementos do DOM para escutar eventos.
  
  
• Animation/Transition: O framework providencia várias formas de aplicar transições em elementos HTML quando eles são adicionados, alterados ou removidos do DOM. O VUE possui componentes de transição prontos, permitindo que sejam aplicados em torno dos elementos para realizar efeitos de transição.
  
  
• Computed Properties É uma das mais importantes features do VUE. Ela é a principal maneira que o framework fornece de converter código imperativo em código declarativo, o que é mais vantajoso. Uma computed property é uma propriedade que possui seu valor atualizado sob demanda por uma função pura . É uma função memoizada, ou seja, ela é chamada uma vez e só é recalculada quando suas dependências mudam. Sendo assim, ela ajuda a tornar o código mais eficiente. Torna também a programação mais fácil, já que o programador pode usar o valor da computed property sabendo que ele será atualizado quando necessário (quando suas dependências forem atualizadas).
  
  

Framework Advantages

Vue.js possui múltiplas vantagens em relação a outros frameworks, veremos a seguir as vantagens:

• Requer poucos recursos computacionais: Vue.js é um framework leve comparado a outros, sendo possível rodar em qualquer máquina para qualquer nível de aplicação, desde pequenos projetos pessoais até aplicações multifuncionais.
  
  
• Simplicidade: Diferente de outros frameworks, Vue.js facilita o processo de desenvolvimento. A aplicação não fica mais pesada devido ao aumento de código. Isso ocorre porquê todos os métodos de Vue.js são separados um do outro, o que permite um controle de processo e entendimento de código maior. Além disso, é uma excelente escolha para iniciantes, dado que sua documentação é bastante compreensiva e provê uma completa descrição de todo o framework para desenvolvedores.
  
  
• Reutilizável: Vue.js consegue ser reutilizável, pois possui uma biblioteca UI que possui diverrsos componentes feitos a mão por outros desenvolvedores. Esses componentes podem ser utilizados por qualquer desenvolvedor em diferentes aplicações.
  
  
• Segregação: Diferente de outros frameworks, o Vue.js utiliza um DOM virtual. O ponto é que o Virtual DOM provê uma melhor interface ao desenvolvedor sem a necessidade de renderizar o real DOM caso ocorram alterações na aplicação.
  
  
• Compatibilidade: O Vue.js permite que o desenvolvedor faça templates da forma desejada em HTML, JSX e JS. Isso permite uma fácil utilização desses recursos em outros frameworks.
  
  

Framework Disadvantages

Veremos a seguir as desvantagens do framework:

• Barreira de linguagem: A adoção do Vue por empresas como Xiaomi e Alibaba ajudaram a popularizar esse framework, gerando uma demanda de profissionais qualificados para utilizá-lo. Assim, não surpreendentemente, uma parte significativa dos conteúdos e discussões estão em chinês. Desse modo, em uma busca por conteúdos acerca do Vue será comum encontrar discussões, instruções e descrições de plugins em chinês, o que pode ser um problema para aqueles que não compreendem essa língua.
  
  
• Complexidade de reatividade: Uma das características do sistema de reatividade é o two-way data binding que auxilia na sincronização dos componentes. Entretanto, este sistema geralmente comete erros durante a leitura dos dados fazendo-se necessário “achatar” os dados para contornar este problema.
  
  
• Falta de suporte para projetos de larga escala: Vue é uma framework mais recente e sua comunidade e equipe de desenvolvimento é comparativamente menor que frameworks mais disseminadas como Angular. Além disso, ela não é financiada por grandes empresas. Isso faz com que ainda não seja muito usada para projetos de larga escala que requerem uma tecnologia estável com suporte e assistência mais imediatos na resolução de problemas. Dessa forma, Vue é mais utilizado em projetos menores como single page applications.
  
  
• Risco de excesso de flexibilidade: O Vue.js possui grande flexibilidade pois depende apenas de JavaScript, não exigindo nenhuma outra ferramenta para operar. Assim, possui grande integração entre aplicações já existentes. Neste sentido, o excesso de flexibilidade é uma qualidade controversa em termos de grandes projetos, pois fornecer diversas opções a um time de desenvolvimento pode resultar em diferentes abordagens de programação conflitando dentro de um time. E, como resultado, pode prejudicar o projeto como um todo.
  
  
• Recursos limitados: Comparado com Angular e React, Vue possui muito menos plugins e recursos implementados. Alguns plugins comumente usados por outras frameworks também não são suportados pelo Vue. Embora isto possa ser apenas uma questão de tempo, é algo a ser considerado pelos desenvolvedores.
  
  
• Falta de desenvolvedores experientes: Como o Vue é um framework relativamente novo e que ainda está se popularizando, então é necessário esperar alguns anos até que o mercado de trabalho em relação a esse framework seja preenchido com desenvolvedores experientes em Vue.js.
  
  

Main Application Niches

Como temos as principais vantagens do Vue contra outros frameworks (como Angular e React) sendo a facilidade do aprendizado e leve, os nichos em que o Vue segue ganhando espaço, e dominando, são:

• Inicialização de novos projetos, em que os desenvolvedores não estão ainda familiarizados ou especializados em um framework específico. Isso acontece em grandes e pequenas empresas na indústria, quando temos desenvolvedores Juniors, que demandam um processo de aprendizagem e mentorias/acompanhamento, o Vue se sobressai como framework de escolha, devido a sua curva de aprendizado.
  
  
• A facilidade e praticidade, faz com que muitos projetos sejam adaptados e sofram manutenções por meio deste framework.
  
  
• O Vue se sobressai, quando projetos devem sofrer deploy em um curto período de tempo, tanto em médias quanto pequenas empresas. Isso pois, como é mais intuitivo e prático para desenvolvedores, poupa custo de desenvolvimento e cumpre os objetivos de negócio rapidamente.
  
  
• O Vue possui grande espaço em Progressive Web Apps (PWAs) - que corresponde a criação de aplicativos web com interatividade semelhantes a aplicações nativas, mas sem a necessidade de desenvolvimento neste viés. Com isso, temos a vantagem de que a aplicação seja acessível em qualquer plataforma/navegador web. Um exemplo de PWA em que o Vue é grande influente é de projetos relacionados a e-commerce, como o AliExpress.
  
  

Future Perspectives

O futuro do Vue depende do suporte da comunidade para migração de bibliotecas de Vue 2 para Vue 3, visto que, não necessariamente são compatíveis entre si. Atualmente, bibliotecas relevantes como NUXT (server side rendering), Quasar (framework para construção de websites e aplicativos de modo modular) e Vuetify (Material UI para Vue) estão sendo importadas da Vue 2 para Vue 3, o que indica progresso para este critério de sucesso para o framework. No momento, a comunidade responsável pelo desenvolvimento do Vue tem como foco estabilizar e polir a recém lançada versão Vue 3, e não possui planos publicados para novas funcionalidades.