SCC0219 - Introdução ao Desenvolvimento Web (2025)

Class 1

• Astro1 - Slides

  Renan Trofino Silva - 15522316 - Coordenador - Apresentador

  Felipe Ferreira Colona - 15636525 - Editor - Apresentador

  Daniel Mistieri Foloni - 15446899

  Caio Capocasali da Silva - 1254173 - Apresentador

  Bruno Kazuya - 14562466
  

• Swelte1 - Slides
• Vue1 - Slides

  Laura Fernandes Camargos - 13692334 - Coordenadora

  Luis Asuncion Velasquez - 16796593 - Editor

  Adhemar Molon Neto - 14687681 - Apresentação

  Douglas da Fontoura Pereyra - 14566686 - Apresentação

  Leonardo Marangoni - 14747614 - Apresentação

  
  
• Flutter1 - Slides

Class 2

• Flutter2 - Slides

Presenter - Coordinator -  Rafael Brazolin Alves Mansur - 14604020

Gabriel Hyppolito - 14571810

Kouki Hayashi - 13672018

Murilo Matos - 13719065

Gabriel Martins Montero - 14572099

Editor - Juan Marques Jordao - 14758742

Presenter -Thales Sena de Queiroz - 14608873

Helio Marcio Cabral Santos - 14677862

Vinicius Gustierrez Neves - 14749363

Presenter - Luiz Felipe Catuzzi Araujo Hotoshi - 11871198

Flutter Main Features (explain how to start an app)

• Aplicativos Flutter são escritos na linguagem Dart

• Framework de desenvolvimento open-source criado pela Google em 2015, com o objetivo de construir aplicações multi-plataforma a partir de um único código fonte, aumentando a eficiência e reduzindo custos de desenvolvimento

• Primeiro aplicativo comercial Flutter lançado em 2017

• 2018: Flutter 1.0 - focado em mobile (iOS/Android)

• 2021: Flutter 2.0 - suporte a web e desktop

• Atualmente: novas ferramentas, melhorias de desempenho, integração (macOS, linux, Windows) e renderização (impeller)

Estrutura: dividida em 3 camadas

• Framework layer (Dart): inclui widgets, renderizações, animações e bibliotecas fundamentais

• Engine layer (C++): lida com acessibilidade, layout de texto e I/O

• Embedder layer: contém código específico de plataforma (Android, iOS, web) e faz a ponte entre o código em Dart e as APIs nativas

Tutorial: para começar o desenvolvimento de uma aplicação Flutter o usuário deve:

• ter Flutter SDK instalado e configurado no sistema;

• ter um emulador ou dispositivo físico conectado;

• ter um Editor de código com extensões para Dart e Flutter

• Criar um projeto novo ao digitar “flutter create meu_app” e “cd meu_app” no terminal

• Rodar o app em um emulador ou celular com “flutter run”

• Rodar o app em web com “flutter run -d chrome”

• Editar o arquivo “lib/main.dart”

• Realizar o desenvolvimento, podendo adicionar dependências e widgets

A arquitetura básica de um programa Flutter consiste em um widget composto por outros widgets, sendo que o widget descreve a lógica, interação e design de uma UI. Os widgets do Flutter — que, diferente de outras UIs, renderizam com base em pixels — podem ser separados em stateless e stateful. Widgets stateless só mudam se, de alguma forma, seus inputs também mudarem, tornando-os bem estáticos. Já os stateful podem chamar a função setState() e alterar seu estado interno e apresentação.

Widgets são os blocos de construção do Flutter, mas existem formas de fugir desse padrão — por exemplo, com a realização de arte diretamente no canvas. Isso é usado majoritariamente na implementação de game engines.

O framework também pode ser dividido em dois grupos, cada um representando um tipo específico de linguagem de design: a implementada pelo Google, denominada Material Design, e a implementada pela Apple, Cupertino, que, ao contrário do senso comum, também pode ser usada para desenvolvimento voltado ao Android.

Os aplicativos feitos com Flutter são desenvolvidos usando a linguagem Dart, enquanto a engine do Flutter é primariamente escrita em C++.

Flutter vs Astro:
Flutter é voltado para a criação de apps móveis, desktop e web com uma base de código única, enquanto Astro é focado em sites estáticos e com baixo uso de JavaScript. A principal vantagem do Flutter é que ele permite criar aplicações nativas e multiplataforma com UI rica e altamente customizável, coisa que Astro não oferece por ser um framework voltado a sites com foco em performance, não aplicações completas.

Flutter vs Vue:
Diferente do Vue, que é usado principalmente para aplicações web e requer adaptações para funcionar em mobile (como com Cordova ou Capacitor), Flutter já entrega apps nativos reais para Android, iOS, desktop e web com desempenho consistente. Além disso, o Flutter possui um sistema de UI unificado, onde tudo é componente, sem depender de HTML/CSS, oferecendo mais controle visual e previsibilidade no layout.

Flutter vs Svelte:
Svelte é eficiente para aplicações web leves com performance ótima no navegador, mas não tem suporte nativo para apps móveis ou desktop. Flutter sai na frente por ser uma solução completa para multiplataforma, com performance nativa e suporte oficial do Google. Além disso, o Flutter oferece um ecossistema mais sólido para desenvolvimento de apps grandes, com ferramentas como o Flutter DevTools, integração com Firebase e uma base de componentes (widgets) mais ampla.

• Svelte2 - Slides       

Felipe Volkweis - 14570041 - Coordenador       
Pedro Henrique Ferreira Silva - 14677526 - Editor       
Ayrton da Costa Ganem Filho - 14560190 - Apresentação

• Vue2
• Astro2 - Slides

• - Editor Clara Ernesto de Carvalho 14559479

  - Presenter Augusto Cavalcante Barbosa Pereira 14651531

  - Thiago Zero Araújo 11814183

  - Coordinator Gabriel Barbosa dos Santos 14613991

  - Presenter Gabriel Antunes Afonso de Araujo 14571077

  - Bruno Figueiredo Lima 14562383

  - Felipe Carneiro Machado 14569373 

  - Presenter Renan Parpinelli Scarpin 14712188