WTT 2026 – Desenvolvimento de uma Single Page Application (SPA) utilizando Vue.js

No dia 14 de abril de 2026, os alunos da Faculdade de Computação e Informática (FCI) da Universidade Presbiteriana Mackenzie (campus Higienópolis), participaram do Workshop de Tendências Tecnológicas 2026 (WTT 2026). O WTT é um evento da FCI para destacar as práticas e processos tecnológicos mais recentes da comunidade profissional e acadêmica, promovendo o contato dos alunos com temas relevantes e inovadores.

A equipe do laboratório MackLeaps, composta por Elieder Sousa, Vitor Kenzo Ochida, Gabriel Mendes, Eric Denser, Júlia Campolim, Enzo Benedetto e João Reiss, propôs a realização de três Workshops realizados em dias consecutivos, cada um abordando um aspecto diferente de uma arquitetura de software voltada a segurança das aplicações.

Vitor Kenzo Ochida, aluno do 3º semestre de Sistemas de Informação e estagiário do MackLeaps, conduziu duas sessões do workshop “Introdução a SPA com Vue.js”. O conteúdo, que aborda a criação de uma Single Page App (SPA) focada em front-ends dinâmicos, foi desenvolvido em parceria com Júlia Campolim, aluna do 8º semestre de Ciência da Computação e residente da Open Academy.

Introdução à SPA com Vue.js

No desenvolvimento web convencional, a interação do usuário é frequentemente pautada pelo modelo de Multi-Page Applications (MPA). Nesse cenário, cada ação que demande novos dados resulta em uma requisição completa ao servidor, que processa a solicitação e devolve um novo documento HTML inteiramente renderizado. Esse processo gera o característico “piscar” da tela, um fenômeno técnico que interrompe a continuidade visual e pode se tornar um gargalo para a experiência do usuário, especialmente em sistemas que exigem alta performance e interatividade constante.

A pergunta central que norteou o workshop foi como é possível oferecer uma interface que se comporte de forma instantânea e fluida operando diretamente no navegador ? A resposta reside no conceito de Single-Page Application (SPA). Diferente das MPAs, a SPA carrega o “esqueleto” fundamental da aplicação, incluindo cabeçalhos, menus e rodapés , apenas uma única vez.

Durante o workshop, foi demonstrado que, sob essa arquitetura, as interações subsequentes atualizam apenas o conteúdo específico necessário, mantendo a estrutura global intacta. Esta abordagem prioriza dois pilares fundamentais da engenharia de software moderna: a experiência do usuário (UX), ao eliminar transições abruptas, e a performance, ao reduzir drasticamente o volume de dados trafegados e o tempo de processamento no cliente.

A Arquitetura e o Ecossistema Vue.js

A implementação de uma Single-Page Application (SPA) fundamenta-se na premissa de que a aplicação deve residir em uma única página web, onde a manipulação do DOM (Document Object Model) ocorre de forma dinâmica. Diferente do modelo multipágina, a SPA carrega o “esqueleto” fundamental apenas uma vez. A partir desse carregamento inicial, o sistema gerencia a interface por meio de scripts que interceptam as ações do usuário e atualizam apenas os fragmentos necessários, priorizando a experiência do usuário e a performance.

Durante a atividade prática ministrada por Vitor, os participantes exploraram a organização estrutural de um projeto em Vue.js, compreendendo como cada módulo desempenha um papel vital na orquestração do sistema:

• App.vue: O componente raiz que atua como o “pai” global da aplicação.
• Router: O maestro da navegação, responsável por trocar as telas sem recarregar o navegador.
• Views: Representam as “telas” da aplicação (como Home ou Login). Elas coordenam a lógica de alto nível, solicitando dados aos Services e distribuindo-os para os componentes que integram a interface.
• Componentes: São as unidades básicas, autônomas e reutilizáveis de interface. Eles isolam lógica, estrutura e estilo, garantindo que alterações em um único arquivo sejam replicadas em todo o projeto de forma consistente.
• Services: Uma camada isolada de lógica que utiliza a biblioteca Axios para buscar dados de APIs externas sem poluir a interface.
  

Single File Components

Complementando essa organização, o workshop explorou o conceito de SFC (Single-File Components). No ecossistema Vue, isso significa que um elemento de interface tem seu comportamento, conteúdo e visual centralizados em um único arquivo de extensão .vue . Esta estrutura é dividida em três blocos principais:

• Lógica: Define o comportamento e o estado reativo da aplicação.
• Conteúdo: Define a estrutura HTML.
• Visual: Define o estilo do componente.

Uma abordagem dinâmica de ensino

Durante a atividade, Vitor utilizou metodologias ativas, com destaque para estratégias de gamificação, ao distribuir recompensas aos alunos que identificavam bugs ou respondiam a perguntas sobre a lógica implementada. Essa abordagem contribuiu para manter as turmas engajadas e participativas ao longo de toda a sessão.

Ao final, a grande maioria dos participantes tinha uma aplicação funcional rodando na própria máquina.

Sobre o ministrante

Sobre a colaboradora