Aplicações Informáticas B · 12.º Ano

Ideias de aprendizagem ativa

Introdução a Frameworks Front-end

O estudo de frameworks front-end exige prática ativa porque os alunos enfrentam desafios concretos de configuração e implementação que não se resolvem apenas com teoria. Ao compararem Vanilla JS com React ou Vue, visualizam diretamente como as abstrações poupam tempo e reduzem código repetitivo, tornando os conceitos abstratos mais tangíveis.

• Aprendizagens Essenciais
• DGE: Secundário - Criação de Conteúdos Digitais
• DGE: Secundário - Algoritmia e Programação

• 30–60 min
• Pares → Turma inteira
• 4 atividades

Atividade 01

• Flipped Classroom
• 45 min · Pares

Comparação: Vanilla JS vs React

Os alunos criam uma lista simples de tarefas em JavaScript vanilla e depois recriam-na com React, num ambiente como CodeSandbox. Registam tempo gasto e linhas de código em cada versão. Discutem diferenças em grupo no final.

Como os frameworks front-end aceleram o desenvolvimento de aplicações web?

Sugestão de Facilitação

Durante a atividade de comparação Vanilla JS vs React, peça aos alunos que anotem o número de linhas de código necessárias em cada abordagem para realizar a mesma tarefa.

O que observar

Peça aos alunos para escreverem num pequeno papel: 1) O nome de um framework front-end que aprenderam. 2) Uma frase explicando o principal benefício de usar esse framework. 3) Um desafio que antecipam ao usar este framework num projeto.

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 02

• Flipped Classroom
• 50 min · Pequenos grupos

Construção de Componentes Vue

Em pequenos grupos, os alunos instalam Vue CLI e constroem uma aplicação com três componentes interligados: cabeçalho, lista e formulário. Testam reatividade adicionando dados dinâmicos. Apresentam o resultado à turma.

Compare a arquitetura de uma aplicação desenvolvida com um framework e uma sem.

Sugestão de Facilitação

Na construção de componentes Vue, forneça um protótipo inicial com dados estáticos para que os alunos foquem-se na estrutura de componentes e não na lógica de dados.

O que observar

Inicie uma discussão em turma com a seguinte questão: 'Imaginem que têm de construir uma nova funcionalidade para uma aplicação web existente. Quais seriam os fatores que considerariam ao decidir se devem ou não introduzir um novo framework front-end neste projeto?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 03

• Flipped Classroom
• 60 min · Individual

Integração Angular em Projeto Existente

Individualmente, os alunos adicionam um módulo Angular a um site HTML/CSS/JS pré-existente, migrando uma secção para componentes. Documentam desafios e soluções num relatório partilhado.

Avalie os desafios de aprender e integrar um novo framework num projeto existente.

Sugestão de Facilitação

Durante a integração Angular em projeto existente, distribua roles claros: um aluno modifica o projeto, outro monitoriza conflitos de dependências, e outro documenta os passos.

O que observar

Durante uma atividade prática, observe os alunos a construir um componente simples. Faça perguntas direcionadas como: 'Como é que este dado está a passar para o componente filho?' ou 'O que aconteceria se alterasse este valor no estado?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 04

• Debate Formal
• 30 min · Pequenos grupos

Debate Formal: Escolha de Framework

Em roda de debate, grupos defendem React, Vue ou Angular para um caso de uso específico, baseados em critérios como curva de aprendizagem e performance. Votam e justificam a escolha coletiva.

Como os frameworks front-end aceleram o desenvolvimento de aplicações web?

Sugestão de Facilitação

No debate sobre escolha de framework, estabeleça critérios objetivos como curva de aprendizagem, documentação e suporte da comunidade para guiar as discussões.

O que observar

Peça aos alunos para escreverem num pequeno papel: 1) O nome de um framework front-end que aprenderam. 2) Uma frase explicando o principal benefício de usar esse framework. 3) Um desafio que antecipam ao usar este framework num projeto.

• Analisar
• Avaliar
• Criar
• Autogestão
• Tomada de Decisão

Algumas notas sobre lecionar esta unidade

Comece com problemas do mundo real que os alunos já conhecem, como uma lista de tarefas ou um formulário de contacto, para que percebam a utilidade dos componentes reutilizáveis. Evite apresentar frameworks como 'soluções mágicas' e mostre sempre o código JavaScript por trás das abstrações. Pesquisas indicam que a aprendizagem é mais eficaz quando os alunos constroem algo pequeno mas completo, em vez de seguirem tutoriais passo a passo sem contexto.

Os alunos demonstram compreensão ao criar componentes funcionais com reutilização clara, explicar diferenças entre arquiteturas com e sem frameworks, e justificar escolhas de ferramenta com base em requisitos de projeto. O sucesso mede-se pela capacidade de aplicar conhecimentos em contexto prático, não apenas identificar frameworks.

---

Atenção a estes erros comuns

• Durante a atividade de comparação Vanilla JS vs React, alguns alunos podem pensar que 'React substitui completamente JavaScript'.

  Use o código lado a lado para mostrar que React é uma biblioteca JavaScript que acrescenta sintaxe como JSX, mas o código subjacente continua a ser JavaScript puro. Peça aos alunos que identifiquem onde o JavaScript tradicional é usado dentro de um componente React.

• Durante a construção de componentes Vue, alunos podem assumir que 'todos os frameworks funcionam da mesma forma'.

  Peça aos alunos que comparem a sintaxe de um componente Vue com a de um componente React no mesmo projeto, destacando diferenças como templates vs JSX e diretivas vs props. Use um quadro comparativo para sistematizar as descobertas.

• Durante a integração Angular em projeto existente, alunos podem acreditar que 'aprender Angular é rápido e sem dificuldades'.

  Monitore os alunos enquanto configuram o ambiente e observem erros comuns como conflitos de versões ou problemas de injeção de dependências. Use esses momentos para discutir estratégias de depuração colaborativa e documentação oficial.

---

Metodologias usadas neste resumo

• Flipped Classroom
• Debate Formal