Aplicações Informáticas B · 12.º Ano · Desenvolvimento de Aplicações e Web · 2o Periodo

Introdução a Frameworks Front-end

Os alunos exploram os conceitos básicos de frameworks front-end (e.g., React, Vue, Angular) para desenvolvimento de aplicações web complexas.

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

Sobre este tópico

A introdução a frameworks front-end guia os alunos do 12.º ano na exploração de ferramentas como React, Vue e Angular para o desenvolvimento de aplicações web complexas. Estes frameworks baseiam-se em componentes reutilizáveis, gestão de estado reativa e virtual DOM, que otimizam o desempenho e facilitam a manutenção do código. Os alunos respondem a questões chave, como a aceleração do desenvolvimento através de abstrações e convenções, comparando arquiteturas com e sem frameworks, e avaliando desafios na aprendizagem e integração em projetos existentes.

No âmbito do Currículo Nacional, este tema alinha-se com os standards de criação de conteúdos digitais e algoritmia avançada, promovendo competências em programação orientada a objetos e pensamento computacional. Os alunos desenvolvem capacidade para selecionar frameworks adequados, considerando escalabilidade e interoperabilidade, o que prepara para contextos profissionais reais.

A aprendizagem ativa beneficia este tópico porque atividades práticas de codificação colaborativa, como construção de interfaces modulares, tornam conceitos abstratos tangíveis. Os alunos depuram em tempo real, iteram sobre protótipos e partilham repositórios, reforçando a compreensão profunda e a resolução autónoma de problemas técnicos.

Questões-Chave

1. Como os frameworks front-end aceleram o desenvolvimento de aplicações web?
2. Compare a arquitetura de uma aplicação desenvolvida com um framework e uma sem.
3. Avalie os desafios de aprender e integrar um novo framework num projeto existente.

Objetivos de Aprendizagem

• Identificar os componentes arquitetónicos fundamentais de frameworks como React, Vue e Angular (e.g., componentes, estado, props, diretivas).
• Comparar a estrutura e o fluxo de dados de uma aplicação web desenvolvida com um framework e uma aplicação desenvolvida com JavaScript puro.
• Avaliar a complexidade e o esforço necessários para integrar um framework front-end num projeto web existente, considerando a curva de aprendizagem e a compatibilidade.
• Demonstrar a criação de uma interface de utilizador simples utilizando os princípios de desenvolvimento baseado em componentes de um framework à escolha.
• Explicar como os frameworks front-end otimizam o desempenho de aplicações web através de mecanismos como o Virtual DOM ou a reatividade.

Antes de Começar

Fundamentos de HTML, CSS e JavaScript

Porquê: É essencial ter uma compreensão sólida das tecnologias base da web para poder apreciar e utilizar as abstrações fornecidas pelos frameworks.

Programação Orientada a Objetos (Conceitos Básicos)

Porquê: Muitos conceitos em frameworks, como encapsulamento e reutilização, são mais facilmente compreendidos por alunos com noções de POO.

Estruturas de Dados e Algoritmos Fundamentais

Porquê: A compreensão de como organizar e manipular dados é crucial para gerir o estado e otimizar o desempenho em aplicações web complexas.

Vocabulário-Chave

Componente	Um bloco de construção reutilizável numa interface de utilizador, que encapsula a sua própria lógica e aparência.
Estado (State)	Os dados que uma aplicação ou componente precisa para funcionar e que podem mudar ao longo do tempo, afetando a sua renderização.
Props (Properties)	Dados que são passados de um componente pai para um componente filho, permitindo a comunicação e a configuração.
Virtual DOM	Uma representação em memória da interface de utilizador real, usada para otimizar as atualizações e melhorar o desempenho.
Reatividade	A capacidade do framework de detetar automaticamente alterações no estado e atualizar a interface de utilizador de forma eficiente.

Atenção a estes erros comuns

Erro comum

Frameworks front-end eliminam completamente o JavaScript vanilla.

O que ensinar em alternativa

Frameworks constroem sobre JavaScript, exigindo compreensão base para configuração e depuração. Atividades de comparação lado a lado ajudam os alunos a verem as abstrações como extensões, não substituições, fomentando análises críticas.

Erro comum

Todos os frameworks front-end funcionam da mesma forma.

O que ensinar em alternativa

Cada um tem paradigmas distintos, como JSX no React ou templates no Vue. Experiências hands-on com múltiplos frameworks revelam diferenças arquiteturais, ajudando os alunos a discernir através de protótipos práticos.

Erro comum

Aprender um framework é imediato e sem desafios.

O que ensinar em alternativa

Existe uma curva de aprendizagem íngreme devido a conceitos como hooks ou diretivas. Abordagens colaborativas de depuração em projetos reais constroem confiança gradual e identificam obstáculos comuns.

Ideias de aprendizagem ativa

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.

45 min·Pares

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.

50 min·Pequenos grupos

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.

60 min·Individual

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.

30 min·Pequenos grupos

Ligações ao Mundo Real

• Desenvolvedores front-end na Farfetch utilizam frameworks como React para construir interfaces de utilizador dinâmicas e responsivas para a sua plataforma global de comércio eletrónico, permitindo uma experiência de compra personalizada.
• Equipas de engenharia na OutSystems empregam Angular para desenvolver a interface das suas ferramentas de low-code, facilitando a criação rápida de aplicações empresariais complexas para clientes em diversos setores industriais.
• A criação de dashboards interativos para monitorização de dados em tempo real, como os usados por analistas financeiros na EDP, beneficia enormemente da estrutura e eficiência proporcionadas por frameworks como Vue.js.

Ideias de Avaliação

Bilhete de Saída

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.

Questão para Discussão

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?'

Verificação Rápida

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?'

Perguntas frequentes

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

Frameworks como React e Vue fornecem componentes reutilizáveis, gestão automática de estado e atualizações eficientes do DOM, reduzindo código boilerplate e erros manuais. Isto permite focar em lógica de negócio, acelera iterações e escala para equipas, como demonstrado em comparações práticas de tempo de desenvolvimento.

Como comparar a arquitetura de uma aplicação com e sem framework?

Sem framework, o código usa manipulação direta do DOM, levando a estruturas monolíticas e difíceis de manter. Com framework, organiza-se em componentes modulares com fluxo unidirecional de dados. Atividades de refatoração mostram visualmente ganhos em legibilidade e testabilidade, alinhando com standards de programação avançada.

Como o ensino ativo ajuda na aprendizagem de frameworks front-end?

O ensino ativo, através de codificação colaborativa e protótipos iterativos, torna conceitos como reatividade e estado tangíveis. Alunos depuram em pares, partilham repositórios e apresentam demos, o que reforça retenção em 70% comparado a aulas expositivas. Esta abordagem simula fluxos profissionais, desenvolvendo autonomia e resiliência técnica.

Quais os desafios de integrar um framework num projeto existente?

Desafios incluem refatoração de código legado, gestão de dependências e migração gradual de componentes. Soluções passam por modularidade incremental e ferramentas como webpack. Projetos práticos guiam os alunos a planear migrações, avaliando trade-offs em tempo real para decisões informadas.