Vue.js e SPA

 

Vue.js SPA e SFC

Ou: siglas e mais siglas

Olá, leitora ou leitor

Algumas vezes fico me perguntando: "Será que tem alguma área onde tem mais siglas pra decorar do que na TI"?

Quer ver? Faz um teste se você sabe todas estas siglas: ASCII, CRM, API, UX/UI, IoT, VPN, LLM, BI, BPM, BYOD, ERP. Que sopa de letrinhas não é mesmo?

Bem no Vue.js não é diferente, existem muitas siglas e conceitos que você precisa saber o que significam, mas a boa notícia é que não é preciso decorar, com o tempo e o uso você aprende.

Vou tentar te ajudar apresentando os conceitos e siglas mais presentes no desenvolvimento com Vue.js.

Mas como de costume vou fazer um disclaimer!

Disclaimer

Este texto faz referência a sites, informações, produtos e/ou serviços que são controlados por outras pessoas e que foram mencionados com o único objetivo de informar e instruir a você leitor, sendo que não recebi nenhum valor monetário ao citar estes produtos e não me responsabilizo pela correção, funcionamento ou descontinuação das informações, serviços e produtos citados neste texto.

SPA

Esta sigla significa Single-Page Application (SPA) e diz respeito às aplicações web que são implementadas de forma a minimizar a quantidade de acessos às páginas do servidor web.

Normalmente uma SPA consiste em um único arquivo Java Script que é servido ao browser. Este navegador interpreta e renderiza a aplicação sem que haja necessidade de obter outras páginas do servidor web.

Uma SPA possui as seguinte caracterísitcas:

• Implementa interatividade avançada com o usuário
• Mantem o registro das seções do usuário e controla o armazenamento e estado da aplicação no lado do cliente (frontend)
• Possui roteamento do lado do cliente, permitindo o uso de múltipla páginas ou telas de aplicação sem o recarregamento do aplicativo

Conforme o trecho abaixo, retirado da documentação do Vue.js, uma SPA tem a seguinte desvantagem:

Aplicativos SPA puros do lado do cliente são problemáticos quando o aplicativo é sensível ao SEO e ao conteúdo produzido em tempo real. Isso ocorre porque o navegador receberá uma página HTML praticamente vazia e terá que esperar até que o JavaScript seja carregado antes de renderizar qualquer coisa.

Para saber mais sobre as SPA no contexto do Vue.js visite o seguinte LINK.

SFC

Single-File Components esta sigla diz respeito a um formato especial de arquivo existente no Vue.js  que permite definir em um único arquivo o template (HTML), a lógica (Javscript) e a estilização (CSS).

São os arquivos com a extensão *.vue. Veja abaixo um exemplo deste tipos de arquivo retirado diretamente da documentação doVue.js:

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>
<template>
  <p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>


Post anterior

abril 28, 2024 Tags : javascipt , js , vue.js , web

Subscribe by Email

Follow Updates Articles from This Blog via Email