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

WEB Group Discussion - VUE [modifica]

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)
• Gabriel da Cunha Dertoni (11795717)

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).
  
  
• Templates: O VUE fornece templates baseados em HTML que unem o DOM da página com os dados do VUE.
  
  
• Directives: O VueJS possui diretivas embutidas como v-if, v-else, v-show, v-on, v-bind e v-model, que são usadas para executar várias ações no frontend.
  
  
• Watchers: São funções aplicadas a valores de dados que estão suscetíveis a sofrerem modificação, por exemplo, em formulários de input. A função será chamada sempre que esse valor for alterado. Essa feature permite lidar com mudanças nesses valores, sem que precisemos adicionar eventos, fazendo com que o código fique mais simples e rápido. Diferentemente das computed properties, que são recalculadas sempre que qualquer uma das dependências sofrer uma alteração, os watchers são chamados apenas quando uma propriedade específica sofrer modificação.
  
  

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: 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.