Intro - Frontend Frameworks

Os frameworks front-end são ferramentas que facilitam o desenvolvimento de aplicações web, fornecendo uma estrutura e um conjunto de recursos para criar interfaces de usuário interativas e dinâmicas. Eles são conjuntos de código pré-escrito que fornecem aos desenvolvedores uma estrutura escalável e sustentável para criar interfaces de usuário de maneira mais eficiente. Eles contêm componentes HTML, CSS e JavaScript que os desenvolvedores podem reutilizar em outros projetos, ajudando a manter o código consistente e organizado.

Um dos principais benefícios dos frameworks front-end é a ligação entre os dados e a apresentação. Sem um framework, quando você atualiza uma variável em seu código, ela não é automaticamente atualizada no HTML. Com um framework, no entanto, a interface do usuário e o modelo de dados subjacente permanecem sincronizados, permitindo que as alterações nos dados sejam refletidas automaticamente na interface do usuário.

Os frameworks front-end também são ferramentas poderosas para prototipagem rápida e desenvolvimento web em geral. Eles tornam o código mais organizado e gerenciável, cuidam de todas as coisas que uma boa aplicação precisa do lado do cliente. Alguns dos recursos que os frameworks front-end ajudam a incluir: geração de código HTML e CSS, criação de designs responsivos otimizados para vários dispositivos, criação de uma aparência consistente em plataformas, automação de tarefas repetitivas como modificação, compressão e otimização, gerenciamento e atualização de código.

Alguns dos frameworks front-end mais populares incluem React, Angular, Vue.js, Svelte, Ember.js e Backbone.js. Cada um desses frameworks tem suas próprias características e abordagens para resolver problemas comuns no desenvolvimento front-end, como gerenciamento de estado, roteamento e renderização de componentes.

Em resumo, os frameworks front-end representam uma ferramenta vital para o desenvolvimento web e os desenvolvedores devem escolher cuidadosamente para garantir escalabilidade e desempenho de primeira linha. Eles fornecem estrutura ao processo de desenvolvimento e tornam mais fácil escrever código consistente e bem organizado.

MVC - Model, View e Controller.

MVC é um padrão de arquitetura de software que separa a aplicação em três camadas: Model, View e Controller. Essa separação de camadas ajuda na redução de acoplamento e promove o aumento de coesão nas classes do projeto1.

Model: A camada Model é responsável por gerenciar os dados da aplicação. Ela representa o domínio específico da informação em que a aplicação opera e contém a lógica de negócio para manipular esses dados.

View: A camada View é responsável por exibir os dados ao usuário. Ela renderiza o Model em uma forma específica para a interação, geralmente uma interface de usuário.

Controller: A camada Controller é responsável por processar e responder a eventos, geralmente ações do usuário, e pode invocar alterações no Model. É lá que é feita a validação dos dados e também é onde os valores postos pelos usuários são filtrados.

Vue.js é um framework JavaScript progressivo que pode ser usado para construir interfaces de usuário e aplicações de página única (SPA). Ele pode ser usado como parte da camada View em uma arquitetura MVC, permitindo que você crie componentes reutilizáveis e dinâmicos para exibir os dados ao usuário.

No entanto, Vue.js não é limitado apenas à camada View. Ele também pode ser usado para gerenciar o estado da aplicação e interagir com APIs, desempenhando algumas das funções da camada Controller. Além disso, com o uso de bibliotecas adicionais como Vuex, Vue.js pode ser usado para gerenciar o estado global da aplicação, desempenhando algumas das funções da camada Model.

Requisitos - VueJS

1. Conhecimento básico de HTML, CSS e JavaScript: Vue.js é um framework JavaScript para construir interfaces de usuário, então é importante ter uma base sólida em HTML, CSS e JavaScript antes de começar a trabalhar com ele.
2. Conhecimento do terminal/linha de comando: Para instalar o Vue.js e usar algumas de suas funcionalidades mais avançadas, é necessário ter conhecimento básico do terminal/linha de comando.
3. Node.js e npm: O Node.js é um ambiente de execução JavaScript que permite executar código JavaScript no lado do servidor. O npm é o gerenciador de pacotes do Node.js, que permite instalar e gerenciar dependências em projetos Vue.js. É importante ter o Node.js e o npm instalados em seu computador para trabalhar com Vue.js.
4. Conhecimento básico de ferramentas de construção: Ferramentas como Vite, Webpack ou Browserify são usadas para empacotar e otimizar o código Vue.js para produção. É útil ter algum conhecimento dessas ferramentas ao trabalhar com projetos Vue.js.

Com esses conhecimentos, você estará pronto para começar a construir aplicações com Vue.js. É claro que, à medida que você avança em seus projetos, pode ser necessário aprender mais sobre tópicos avançados como gerenciamento de estado, roteamento e integração com APIs RESTful.

Relembrando

Vue.JS, ou simplesmente Vue (pronuncia-se View), para os mais íntimos é um framework JavaScript para o desenvolvimento de componentes reativos para web.

O que são componentes?

A web mudou muito durante os últimos anos. Cada vez mais técnicas avançadas são criadas, para facilitar o desenvolvimento de aplicações que rodam dentro do seu navegador. A última moda de desenvolvimento são os componentes reativos, os quais são a base do Vue.js.

Componentes reativos nada mais são do que fragmentos de código que possuem sua marcação (HTML), seu estilo (CSS) e seu próprio comportamento (JavaScript). Nada muito diferente do que você já está acostumado a ver em páginas web, certo? Mais ou menos. Os componentes são fragmentos menores que as páginas. Na verdade, eles servem para compor as páginas. Desse modo, temos um modo fácil e elegante de se reaproveitar código. Isto é o que temos de mais moderno para o desenvolvimento front-end hoje em dia.

Legal, já definimos o que são componentes, mas e a parte da reatividade? Pois bem, reatividade é tão simples quanto a definição de componentes. A ideia é que, quando a "informação" de um componente mudar (através do JavaScript), sua marcação (HTML)saiba reagir e se adaptar a isto.

Um dos exemplos mais básicos é a adição de um item em uma lista no seu JavaScript. Neste momento, algo ocorre, um evento, então o seu HTML deve saber reagir a isto e adicionar também para a visualização do usuário.

Tudo é componente no mundo do Vue.JS

Single File Components (Componente de Arquivo Único)

Single File Components (SFC) é um formato de arquivo especial do Vue.js 3 que permite encapsular o template, a lógica e o estilo de um componente Vue em um único arquivo. Esses arquivos têm a extensão *.vue e são uma extensão natural do trio clássico de HTML, CSS e JavaScript. Os blocos <template>, <script> e <style> encapsulam e colocam a visualização, lógica e estilo de um componente no mesmo arquivo.

Embora os SFCs exijam uma etapa de construção, eles oferecem inúmeros benefícios em troca, como a autoria de componentes modularizados usando sintaxe familiar de HTML, CSS e JavaScript, colocação de preocupações inerentemente acopladas, templates pré-compilados sem custo de compilação em tempo de execução, CSS com escopo de componente, sintaxe mais ergonômica ao trabalhar com a API de Composição, mais otimizações em tempo de compilação ao analisar o template e o script cruzados, suporte IDE com preenchimento automático e verificação de tipo para expressões de template e suporte fora da caixa para substituição de módulo quente (HMR).

SFC é um recurso definidor do Vue como um framework e é a abordagem recomendada para usar o Vue nos seguintes cenários: Aplicações de página única (SPA).

<template>
  <section>
    <!-- conteúdo visual -->
  </section>
</template>

<script>
  export default {
    // dados do componente, como nome, atributos e métodos
  }
</script>

<style>
  section{
    
  }
</style>

Fluxo

O Vue pode ter diversas formas e fluxos de funcionamento,mas aqui veremos a forma mais correta (ou "padrão"), na qual temos um arquivo principal que requisita um bloco inicial e este, por sua vez, exibe os demais blocos que compõem nossa aplicação. Também veremos algo sobre a reatividade, um elemento fundamental para que o framework possa fazer tudo em tempo real com uma performance altíssima.

A figura acima, temos um exemplo de projeto no Vue. Podemos ver que, ao acessar esse site imaginário, obrigatoriamente passaremos por dois arquivos: o main.js , onde temos o código iniciando a aplicação; e o App.vue , que será nosso layout, no qual chamamos os demais blocos, sejam eles A ou B. Não se preocupe com esses dois arquivos, veremos mais sobre eles adiante. Neste momento, apenas observe que, depois do App.vue , temos uma árvore de blocos, e isso nos mostra o quão separado e organizado um site fica. O resultado apresentado no browser é o nosso bloco representado por App.vue , no qual teremos os outros blocos que formavam a árvore, constituindo a interface do site. Como podemos ver: o A virou nosso cabeçalho, o B e o C são barras laterais e o restante dos blocos popula essas barras. A ideia inicial é que você perceba que o reuso pode ser muito alto, dado que cada elemento da nossa interface está separado em blocos, e cada bloco tem seus blocos filhos e pai.

Para começarmos a configurar nosso ambiente

1. Nodejs https://nodejs.org/pt-br/download (ou Yarn)
2. Visual Studio Code (ou outro)
3. Vue CLI https://cli.vuejs.org/guide/installation.html
4. Vite (mais pra frente)

Para começar a usar o Vue.js 3, você precisará instalar o Node.js e o Vue CLI. Aqui está um guia passo a passo para instalar o Node.js e o Vue CLI no Windows e no Linux:

Windows:

1. Acesse a página de download do Node.js1.
2. Clique na opção Windows Installer da versão LTS para iniciar o download automático do pacote instalador.
3. Execute o arquivo baixado e siga as instruções na tela para concluir a instalação do Node.js.
4. Abra um prompt de comando ou PowerShell e verifique se o Node.js foi instalado corretamente executando node -v. Isso deve exibir a versão do Node.js que você acabou de instalar.
5. Para instalar o Vue CLI, execute npm install -g @vue/cli no prompt de comando ou PowerShell.

Linux:

1. Abra um terminal pressionando Ctrl + Alt + T.
2. Instale o Node.js usando o gerenciador de pacotes do seu sistema operacional. Por exemplo, no Ubuntu, você pode executar sudo apt-get install nodejs.
3. Verifique se o Node.js foi instalado corretamente executando node -v no terminal. Isso deve exibir a versão do Node.js que você acabou de instalar.
4. Para instalar o Vue CLI, execute sudo npm install -g @vue/cli no terminal.

Após a instalação, você terá acesso ao binário vue em sua linha de comando. Você pode verificar se ele está instalado corretamente simplesmente executando vue, que deve apresentar uma mensagem de ajuda listando todos os comandos disponíveis. Você pode verificar se tem a versão correta com este comando: vue --version.

Vamos começar a falar de pontuações!

• Separar equipes
• Cada equipe ficará com um framework para criar uma apresentação para turma.
• aurelia.io
• lego.js.org
• riot.js
• fresh.deno.dev
• inferno.js
• mithril.js.org
• markojs.com
• svelte.dev
• O que deve ser apresentado?
• Características
• Conceitos
• Exemplos
• Comparativo com Vue.JS
• Instalação e Requisitos
• Entre outros pontos que acharem interessantes
• Apresentação dia 28 de Setembro, uma semana antes da AV1.
• Pontuação 3.0
• Tempo de Apresentação: Entre 15 e 20minutos
• Todos apresentam

Equipes

###################
GRUPO I - (LEGO.JS) Agamenon
Ariel
Edge
Jonatas
Michele

###################
GRUPO II - (AURELIA) Saulo
Zé Neto
Alexsandra
Guilherme
Ulisses

###################
GRUPO III - (MITHRIL) Pablo
Eliza
Thaynan
Rayne
Matheus

###################
GRUPO IV (RIOT.js) Marcos
Isaac
Kauê Castro
Eduardo
Kaue Vinicius

###################
GRUPO V (INFERNO) Cauê Alencar

###################
GRUPO VI (SVELTE) Arlen
Esdras
José Pedro
Pedro Henrique
Gabriel Ramalho

###################
GRUPO VII (MARKO.JS) Pedro Iury
Antônio Lucas
Adrian
Gustavo
Robson

Referencias para aulas